当后台返回Excel文件流，前端怎么下载

最新推荐文章于 2024-06-13 10:06:49 发布

PXYC_J

最新推荐文章于 2024-06-13 10:06:49 发布

阅读量779

点赞数 1

文章标签：前端 excel javascript

本文链接：https://blog.csdn.net/qq_39536826/article/details/129724337

版权

文章讲述了前端如何调用后台提供的/exportXls接口，通过POST请求并设置responseType为blob，处理返回的数据生成Blob对象，然后创建a标签进行文件下载，同时考虑了非IE和IE10+的浏览器兼容性问题。

摘要由CSDN通过智能技术生成

首先根据后台给的导出接口地址：/back/supervision/exportXls
前端：
api 》index.js文件中接口

export function superExportXls(params){
  return request({
    url:`/back/supervision/exportXls`,
    method:'post',
    responseType:'blob',//重要
    data:params
  })
};

在页面中使用:全部代码如下

//结构中
<el-button type="primary" @click="exportXls()">导出</el-button>

//Js中
//引入
import { superExportXls } from '../../../api';

// 导出
exportXls(){
  let _this = this
  let data ={}
 
  superExportXls (data).then((res) => {
    const content = res.data;
    const blob = new Blob([content]);
    const nowDate = _this.$moment().format("YYYY-MM-DD");
    const fileName = `监督检查${nowDate}.xlsx`;

    if ("download" in document.createElement("a")) {
      // 非IE下载
      const elink = document.createElement("a");
      elink.download = fileName;
      elink.style.display = "none";
      elink.href = URL.createObjectURL(blob, {
        type: "text/csv;charset=utf-8",
      });
      document.body.appendChild(elink);
      elink.click();
      URL.revokeObjectURL(elink.href); // 释放URL 对象
      document.body.removeChild(elink);
    } else {
      // IE10+下载
      navigator.msSaveBlob(blob, fileName);
    }
  })   
},