当前位置:   article > 正文

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

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

**

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

**

axios({
  url: '接口',
  method: 'post',
  data:{},
  responseType: 'blob'
});
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

二、导出方法封装

//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);
    },
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23

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

 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  返回的文件流
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/tf789/article/detail/62706
推荐阅读
相关标签
  

闽ICP备14008679号