Vue請(qǐng)求后端接口導(dǎo)出excel表格方式

更新時(shí)間：2022年04月07日 10:33:42 作者：啊啊怪

這篇文章主要介紹了Vue請(qǐng)求后端接口導(dǎo)出excel表格方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue請(qǐng)求后端接口導(dǎo)出excel

項(xiàng)目中遇到一個(gè)需求，用戶下載文件，會(huì)從后端那里請(qǐng)求接口獲得數(shù)據(jù)并下載導(dǎo)出excel表格

后端小哥給我返回的是二進(jìn)制數(shù)據(jù)流，需要前端自己去處理這些數(shù)據(jù)

如下圖，請(qǐng)求接口返回的數(shù)據(jù)都是亂碼

在這里插入圖片描述

這里我們可以在axios的請(qǐng)求里添加，這樣返回的二進(jìn)制數(shù)據(jù)就會(huì)被讀取為Blob的數(shù)據(jù)，

responseType: ‘blob’

fetchGet1(url, params) {
    return axios({
      url,
      method: 'get',
      params,
      header: {
        headers: { 'Content-Type': 'application/x-download' }
      },
      responseType: 'blob'	//指明返回格式
    })
  }

//下載接口
export var downLoadOrder = (orderId) => ajax.fetchGet1(`/api/order/excel/${orderId}`)

在這里插入圖片描述

當(dāng)我點(diǎn)擊下載訂單的按鈕后，瀏覽器就自動(dòng)彈出下載excel文件一欄了，要注意的是，我的電腦好像沒(méi)有xlsx格式的文件，所以在定義文件名那里改成了xls的格式

在這里插入圖片描述

調(diào)用后端接口導(dǎo)出excel無(wú)效果,直接訪問(wèn)后端url可以

controller層代碼

@ApiOperation(value="導(dǎo)出模板")
? ? @RequestMapping(value="/getTemplate" , method= RequestMethod.GET)
? ? @ResponseBody
? ? public void getTemplate(HttpServletRequest req,HttpServletResponse res) throws IOException {
? ? ?? ?standingBookService.getTemplate(req, res);
? ? }

serviceImpl代碼

?? ?public void getTemplate(HttpServletRequest req, HttpServletResponse res) throws IOException {
?? ??? ?String templateName = "standingBookTemplate";
? ? ? ? String exportName = "template";
? ? ? ??
? ? ? ? ExcelUtil.downloadExcelTemplate(req, res, templateName, exportName);
?? ?}

導(dǎo)出模板路徑

工具箱代碼

? ? /**
? ? ?* 下載批量導(dǎo)入模板
? ? ?* @param HttpServletRequest
? ? ?* @param HttpServletResponse
? ? ?* @param templateName execl模板名稱
? ? ?* @param exportName 導(dǎo)出表單名稱
? ? ?* @throws IOException
? ? ?*/
? ? public static void downloadExcelTemplate(HttpServletRequest req,HttpServletResponse res,String templateName,
? ? ? ? String exportName) throws IOException{
? ? ? ??
? ? ? ? String fullFileName = req.getServletContext().getRealPath("/doc/import/excelTemplate");
? ? ? ? fullFileName += (File.separator + templateName + ".xls");
? ? ? ??
? ? ? ? String export = "";
? ? ? ? if(DataValidUtil.isEmpty(exportName)){
? ? ? ? ? ? export = templateName;
? ? ? ? }else{
? ? ? ? ? ? export = exportName;
? ? ? ? }
? ? ? ??
? ? ? ? String userAgent = req.getHeader("USER-AGENT");
? ? ? ? //文件下載亂碼問(wèn)題
? ? ? ? if (StringUtils.contains(userAgent.toUpperCase(),"MSIE")||StringUtils.contains(userAgent,"Trident")) { ?
? ? ? ? ? ? export = URLEncoder.encode(export, "UTF-8"); ?
? ? ? ? } else { ?
? ? ? ? ? ? export = new String(export.getBytes("UTF-8"), "ISO8859-1"); ?
? ? ? ? }?
? ? ? ??
? ? ? ? //設(shè)置Content-Disposition
? ? ? ? res.setHeader("Content-disposition","attachment; filename="+export+".xls");
? ? ? ??
? ? ? ? //設(shè)置文件MIME類型?
? ? ? ? //res.setContentType("application/vnd.ms-excel");
? ? ? ? //前端框架自定義類型
? ? ? ? res.setContentType("application/export.file");
? ? ? ??
? ? ? ? ? ? OutputStream out = res.getOutputStream();
? ? ? ? ? ? FileInputStream in = new FileInputStream(fullFileName);
? ? ? ? ? ? res.setCharacterEncoding("UTF-8");
? ? ? ? ? ??
? ? ? ? ? ? byte[] b = new byte[1024];
? ? ? ? ? ? int n = -1;
? ? ? ? ? ??
? ? ? ? ? ? while((n=in.read(b))!=-1){
? ? ? ? ? ? ? ? out.write(b, 0, n);
? ? ? ? ? ? }
? ? ? ? ? ??
? ? ? ? ? ? in.close();
? ? ? ? ? ? out.close();
? ? }

vue前端寫(xiě)法

//模板下載
getTemplate(){
  const that = this;
  window.location='/test/test/getTemplate';//正確寫(xiě)法，直接訪問(wèn)你的請(qǐng)求路徑
//這種寫(xiě)法會(huì)導(dǎo)致后臺(tái)不報(bào)錯(cuò)，但是前端無(wú)導(dǎo)出效果
/*window.axios.get('/test/test/getTemplate',{responseType: 'arraybuffer'}).then((res) => {
}).catch((err) => {
});*/
},

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: