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

4 篇文章 0 订阅
3 篇文章 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();
        }
    }

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值