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

**

一、导入导出接口增加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  返回的文件流
相关推荐
sen_shan3 分钟前
Vue3+Vite+TypeScript+Element Plus开发-04.静态菜单设计
前端·javascript·typescript·vue3·element·element plus·vue 动态菜单
敲敲敲-敲代码24 分钟前
【MathType】MathType安装和嵌入word
word·mathtype
旧识君27 分钟前
移动端1px终极解决方案:Sass混合宏工程化实践
开发语言·前端·javascript·前端框架·less·sass·scss
吃没吃1 小时前
vue2.6-源码学习-Vue 核心入口文件分析
前端
Carlos_sam1 小时前
Openlayers:海量图形渲染之图片渲染
前端·javascript
XH2761 小时前
Android Retrofit用法详解
前端
鸭梨大大大1 小时前
Spring Web MVC入门
前端·spring·mvc
吃没吃1 小时前
vue2.6-源码学习-Vue 初始化流程分析 (src/core/instance/init.js)
前端
XH2761 小时前
Android Room用法详解
前端
木木黄木木2 小时前
css炫酷的3D水波纹文字效果实现详解
前端·css·3d