vue axios实现下载（兼容ie并实现取后台返回文件名）实例：easypoi导出excel vue axios接收

￡神魔★判官ぃ 2023-07-18 09:40 13阅读 0赞

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();
            }
        }