前端下载导出文件流，excel/word/pdf/zip等

葫芦娃y2024-02-02 10:19

一、导入导出接口增加responseType:'blob'

javascript 复制代码

axios({
  url: '接口',
  method: 'post',
  data：{},
  responseType: 'blob'
});

二、导出方法封装

javascript 复制代码

//data   文件流
//fileName  文件名称
/*  mineType  文件类型例如：
	* 下载 Excel :    "application/vnd.ms-excel"
	*下载 Word ： 	 "application/msword"
	*下载 Zip 方法：  "application/zip"
	*下载 Html 方法： "text/html"
	* 下载 Markdown   "text/markdown"
	* *下载pdf         "example.pdf"
*/
 download0(data, fileName, mineType) {
        // 创建 blob
        let blob = new Blob([data], { type: mineType });
        // 创建 href 超链接，点击进行下载
        window.URL = window.URL || window.webkitURL;
        let href = URL.createObjectURL(blob);
        let downA = document.createElement("a");
        downA.href = href;
        downA.download = fileName;
        downA.click();
        // 销毁超连接
        window.URL.revokeObjectURL(href);
    },

三、因为加了responseType:'blob'，接口响应返回为数据流,转为json

javascript 复制代码

 let reader = new FileReader(); // 创建读取文件对象
      reader.addEventListener("loadend", function () { //
         let res = JSON.parse(reader.result); // 返回的数据
         console.log(res,'返回结果数据') // { name: "小明" }
 });
reader.readAsText(res.data, 'utf-8');   //res.data  返回的文件流