vue axios實現下載（兼容ie並實現取後臺返回文件名）實例：easypoi導出excel vue axios接收

vue代碼：

axios({
    method: 'post',
    url: '/proxyErmsApi/excel/' + url,
    data: data,
    responseType: 'blob',
    headers: {
      'Authorization': Authorization
    }
  }).then(response => {
    // 兼容ie
    if (window.navigator.msSaveBlob) {
      try {
        const blobObject = new Blob([response.data])
        //設置文件名稱爲後臺返回名稱
        window.navigator.msSaveBlob(blobObject, response.headers['filename']);
      } catch (e) {
        console.log(e)
      }
    } else {
      // 其他瀏覽器
      // eslint-disable-next-line no-undef
      const blob = new Blob([response.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' }) // application/vnd.openxmlformats-officedocument.spreadsheetml.sheet這裏表示xlsx類型
      const downloadElement = document.createElement('a')
      const href = window.URL.createObjectURL(blob) // 創建下載的鏈接
      downloadElement.href = href
      //設置文件名稱爲後臺返回名稱，也可以自定義
      downloadElement.download = response.headers['filename']
      document.body.appendChild(downloadElement)
      downloadElement.click() // 點擊下載
      document.body.removeChild(downloadElement) // 下載完成移除元素
      window.URL.revokeObjectURL(href) // 釋放掉blob對象
      return response.data
    }
  }
  )

java 後臺返回頭設置示例：

        response.reset();
        response.setContentType("multipart/form-data");
        response.setCharacterEncoding("utf-8");
        response.setHeader("Content-disposition", "attachment;filename="+fileName + ".xlsx");
        response.setHeader("FileName", fileName + ".xls");
        response.setHeader("Access-Control-Expose-Headers", "FileName");

 

 

完整代碼：

vue完整方法：

// 下載鑑定單接口
export function downloadCertificate(list, identifyType, Authorization, type, ermsIdenMainId) {
  const data = new FormData()
  // 0是處置列表下載 1 詳情頁下載
  const url = type === 0 ? 'downloadCertificateByMainId' : 'downloadCertificate'
  data.append('list', JSON.stringify(list))
  data.append('identifyType', identifyType)
  data.append('ermsIdenMainId', ermsIdenMainId)
  // const data = JSON.stringify(list)
  // window.location.href = process.env.VUE_APP_ERMS_API + '/excel/downloadCertificate?list=' + encodeURI(JSON.stringify(list)) + '&identifyType=' + identifyType + '&Authorization=' + Authorization
  console.log('list', list)
  axios({
    method: 'post',
    url: '/proxyErmsApi/excel/' + url,
    data: data,
    responseType: 'blob',
    headers: {
      'Authorization': Authorization
    }
  }).then(response => {
    console.log('IDENTIFY_TYPE', global.IDENTIFY_TYPE.get(identifyType + ''))
    if (window.navigator.msSaveBlob) {
      try {
        const blobObject = new Blob([response.data])
        window.navigator.msSaveBlob(blobObject, global.IDENTIFY_TYPE.get(identifyType + '') + response.headers['filename']);
      } catch (e) {
        console.log(e)
      }
    } else {
      // 其他瀏覽器
      // eslint-disable-next-line no-undef
      const blob = new Blob([response.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' }) // application/vnd.openxmlformats-officedocument.spreadsheetml.sheet這裏表示xlsx類型
      const downloadElement = document.createElement('a')
      const href = window.URL.createObjectURL(blob) // 創建下載的鏈接
      downloadElement.href = href
      downloadElement.download = global.IDENTIFY_TYPE.get(identifyType + '') + response.headers['filename'] // 下載後文件名
      document.body.appendChild(downloadElement)
      downloadElement.click() // 點擊下載
      document.body.removeChild(downloadElement) // 下載完成移除元素
      window.URL.revokeObjectURL(href) // 釋放掉blob對象
      return response.data
    }
  }
  )
}

java代碼完整方法示例：easypoi利用模板導出

 /**
     *  通過前段數據直接下載鑑定單
     *  ermsIdenMainId ：鑑定記錄ID
     *  identifyType：鑑定類型：1、保密期限鑑定；2、保管期限鑑定、3遺失鑑定、4銷燬鑑定
     */
    public void downloadCertificateByData(HttpServletResponse response, List<ErmsIdenDetailExpParam> list, String identifyType) {
        try {
            if (ObjectUtils.isEmpty(list) || ObjectUtils.isEmpty(identifyType)) return ;
            //查詢數據
            Map<String,Object> data = new HashMap<>();
            data.put("list",list);
            String tempPath="";
            switch (identifyType){
                case "1":
                    tempPath = "templates/certificateOfSecretPeriod.xls";
                    break;
                case "2":
                    tempPath = "templates/certificateOfSavePeriod.xls";
                    break;
                case "3":
                    tempPath = "templates/certificateOfLosePeriod.xls";
                    break;
                case "4":
                    tempPath = "templates/certificateOfDestroyPeriod.xls";
                    break;
            }
            TemplateExportParams params = new TemplateExportParams(tempPath);
            Workbook workbook = ExcelExportUtil.exportExcel(params, data);
            //返回頭設置下載，並設置文件名，返回
            setDowlowdResponse(response, workbook,"");

        } catch (Exception e) {
            log.error(e.getMessage(), e);
//            return Response.fail("系統錯誤！");
        }
//        return Response.success();

    }

 

 /**
     * 設置下載（axios接收版）
     * @param response
     * @param workbook
     * @param fileName
     * @throws IOException
     */
    public void setDowlowdResponse(HttpServletResponse response, Workbook workbook, String fileName) throws IOException {
        fileName +=new SimpleDateFormat("yyyyMMddHHmmss").format(new Date());
        response.reset();
        response.setContentType("multipart/form-data");
        response.setCharacterEncoding("utf-8");
        response.setHeader("Content-disposition", "attachment;filename="+fileName + ".xlsx");
        response.setHeader("FileName", fileName + ".xls");
        response.setHeader("Access-Control-Expose-Headers", "FileName");
        ServletOutputStream outStream = null;
        try {
            outStream = response.getOutputStream();
            workbook.write(outStream);
        } finally {
            outStream.close();
        }
    }