前端导出excel文件 vue导出文件后端传流导出excel文件

问题描述：导出页面数据生成excel表格有两种方法，分别为前端导出和后端传流导出

1.前端导出

a.下载模块，导入方法

cnpm i webopenfather-excel -S

// 导入方法
import { download } from "webopenfather-excel";

 b.点击事件触发函数

        按钮事件触发导出函数，将后端返回的tableDate数据保存到data中后过滤；

<el-button @click="exportExcelFn">导出Excel表格</el-button>

// vue methods定义函数
methods:{
// 导出Excel表格
    exportExcelFn() {
      // console.log("表格");
      let temp = this.tableData.map((item) => {
        return {
          order_id: item.order_id,
          order_sn: item.order_sn,
          username: item.username, //下单人
          consignee: item.consignee, //收货人
          order_amount: item.order_amount,
          add_time: item.add_time,
        };
      });
      download(
        "美团订单数据",
        ["编号", "订单号", "下单人", "收货人", "总额", "创建于"],
        temp
      );
    },
}

2.后端传流导出

        请求接口，用后端传来的流传参调此方法

// 1. api ==【notice】==：responseType 必须为 blob
export function exportExcel() {
      return request({
        url: "",
        method: "get",
        responseType: "blob",
   });
}

// 2.方法定义
<script>
  function exportFile(result) {
    console.log("result", result);
    let contentDisposition = result.headers["content-disposition"]; //  这里后端给的内容中，文件名字可能是驼峰式名称的 fileName，或者是全部小写的 filename
    let filename = decodeURI(
      // let filename = "1.xlsx";
      // 注意这里的 result．data ，如果只传 result 的话，最后下载出来的excel文件，里面显示的是 ［object object］
      contentDisposition.split("fileName=")[1] ||
        contentDisposition.split("filename=")[1]
    );
    // let blob = new Blob([result.data],{type: "application/x-msdownload;charset=GBK"});
    // let blob = new Blob([result.data],{type: "application/x-msdownload"});
    // let blob = new Blob([result.data]);
    // let blob = new Blob([result.data],{type: "application/vnd.ms-exce1"});
    let blob = new Blob([result.data], {
      type: result.headers["content-type"],
    });
    let url = window.URL.createobjectURL(blob);
    if (window.navigator.msSaveBlob) {
      // IE
      try {
        window.navigator.msSaveBlob(blob, filename);
      } catch (e) {
        console.log(e);
      }
    } else {
      // 非IE
      let link = document.createElement("a");
      link.style.display = "none";
      link.href = url;
      link.setAttribute("download", filename);
      document.body.appendChild(link);
      link.click();
    }
    URL.revokeobjectURL(ur1); // 释放内存
  }
</script>

// 3.方法调用
export default {
       methods: {
        exportExcel() {
          exportExcel().then((res) => {
            console.log("res=>", res);
            if (res.status === 200) {
              exportFile(res);
            } else {
              this.$message({
                message: "服务器错误",
                type: "error",
                duration: 2000,
              });
            }
          });
        },
    },
};

header中Content-Disposition的作用与使用方法

Content-disposition 是 MIME 协议的扩展，MIME 协议指示 MIME 用户代理如何显示附加的文件。Content-disposition其实可以控制用户请求所得的内容存为一个文件的时候提供一个默认的文件名，文件直接在浏览器上显示或者在访问时弹出文件下载对话框。
Response.AppendHeader("Content-Disposition","attachment;filename=FileName.txt");

decodeURI() 函数可对 encodeURI() 函数编码过的 URI 进行解码。
提示： 使用 encodeURI() 函数可以对 URI 进行编码。

1.msSaveBlob：只提供一个保存按钮
2.msSaveOrOpenBlob：提供保存和打开按钮

可以通过Blob的构造函数创建Blob对象：
Blob(blobParts[, options])
参数说明：
blobParts： 数组类型
options： 可选项，字典格式类型，可以指定如下两个属性：
type，默认值为""，它代表了将会被放入到blob中的数组内容的MIME类型。
endings， 默认值为"transparent"，用于指定包含行结束符\n的字符串如何被写入。

调用下载接口
解码后端给的名称
创建blob对象
创建下载链接
创造a标签添加到body中
添加点击事件下载
释放调blob对象