前端下载导出文件流,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  返回的文件流
相关推荐
会飞的鱼先生6 分钟前
Vue3的内置组件 -实现过渡动画 TransitionGroup
前端·javascript·vue.js·vue
晓得迷路了6 分钟前
10 分钟开发一个 Chrome 插件?Trae 让你轻松实现!
前端·javascript·trae
秋天的一阵风12 分钟前
Vue3探秘系列— 路由:vue-router的实现原理(十六-上)
前端·vue.js·面试
秋天的一阵风13 分钟前
Vue3探秘系列— 路由:vue-router的实现原理(十六-下)
前端·vue.js·面试
CodeCraft Studio31 分钟前
Excel处理控件Spire.XLS系列教程:Java设置Excel活动工作表或活动单元格
java·python·excel
海底火旺33 分钟前
JavaScript中的Object方法完全指南:从基础到高级应用
前端·javascript·面试
海底火旺33 分钟前
JavaScript中的Symbol:解锁对象属性的新维度
前端·javascript·面试
天天扭码34 分钟前
一文吃透 ES6新特性——解构语法
前端·javascript·面试
Kagerou35 分钟前
组件测试
前端
JustHappy37 分钟前
啥是Hooks?为啥要用Hooks?Hooks该怎么用?像是Vue中的什么?React Hooks的使用姿势(上)
前端·vue.js·react.js