使用post接口进行大批量导出文件

在工作中，使用get方法导出文件会遇到一些问题：url长度限制，传入id量大且加载速度慢，所以抛弃以前的请求下载方式，使用post接口进行请求下载！

  本次的导出文件为excel文件，其他文件未尝试！

以前的方法，使用get接口：

import { getToken } from "@/util/auth";

exportFile(){
    let url_str = `/api/exportFile?Blade-Auth=${getToken()}&ids=${
        this.ids
     }`;
    console.log("url_str", url_str);
    this.$downFile(url_str, "财务导出报告.xlsx");
    this.$message({
        type: "success",
        message: "导出成功！",
     });
};

现在的方法，使用post接口：

接口js如下：（必须写上 responseType: "blob" ，否则下载的文件会乱码）

export const exportFile = (ids) => request({
    url: '/api/exportFile',
    method: 'post',
    data: ids,
    responseType: "blob"
})

页面vue代码如下：

import { exportFile } from "@/api/axiosInfo.js";

exportFile(){
    exportFile({ ids: this.ids }).then((res) => {
          // 大批量导出
          var blob = new Blob([res.data], {
            //这个里面的data 的二进制文件 创建一个文件对象
            type: "application/vnd.ms-excel;charset=utf-8",
          });
          var downloadElement = document.createElement("a"); //创建一个a 虚拟标签
          var href = window.URL.createObjectURL(blob); // 创建下载的链接
          downloadElement.href = href;
          downloadElement.download =
            decodeURI(
              res.headers["content-disposition"].split("filename=")[1]
            ) || ""; // 下载后文件名
          document.body.appendChild(downloadElement);
          downloadElement.click(); // 点击下载
          document.body.removeChild(downloadElement); // 下载完成移除元素
          window.URL.revokeObjectURL(href); // 释放掉blob对象
};

该方法来源于：

js post 请求接口下载文件 作者：义美-小义