Vue - 调用接口导出 excel 表格至本地

调用后台接口返回的数据：

代码：

// 接口地址
axios.post("/project/download",{type: this.params.type,},{responseType: "blob",}
).then((res) => {if (res.status == 200) {const blob = new Blob([res.data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8",});const downloadElement = document.createElement("a");const href = window.URL.createObjectURL(blob);//从response的headers中获取filename, 后端response.setHeader("Content-disposition", "attachment; filename=xxxx.docx") 设置的文件名;let contentDisposition = res.headers["content-disposition"]; let patt = new RegExp("filename=([^;]+\\.[^\\.;]+);*");let result = patt.exec(contentDisposition);let filename = decodeURI(result[1]);downloadElement.style.display = "none";downloadElement.href = href;downloadElement.download = filename; //下载后文件名document.body.appendChild(downloadElement);downloadElement.click(); //点击下载document.body.removeChild(downloadElement); //下载完成移除元素window.URL.revokeObjectURL(href); //释放掉blob对象/**备用let blob = res.data;// FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件的内容const fileReader = new FileReader(); // 开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个data: URL格式的Base64字符串以表示所读取文件的内容fileReader.readAsDataURL(blob); fileReader.onload = (event) => {// 处理load事件。该事件在读取操作完成时触发// 新建个下载的a标签，完成后移除。//创建一个a标签let a = document.createElement("a");//表格名称let _fileName = "数据表格.xls";a.download = _fileName;a.href = event.target.result;document.body.appendChild(a);//模拟a标签点击事件a.click();document.body.removeChild(a);};*/}
});

Vue - 调用接口导出 excel 表格至本地相关推荐

使用js调用接口导出excel
使用js调用接口导出Excel 以下是使用JavaScript调用接口导出Excel文件的一般流程: 客户端向服务器发送请求,请求后端生成Excel文件: 服务器响应该请求,执行Excel生成操作,并 ...
VUE纯前端导出excel表格功能《转载》
插件:使用vue-json-excel插件实现Vue纯前端导出简单的Excel表格功能. 使用方法 1. 安装依赖 npm install vue-json-excel 2. 引入组件 a. 全局引入 ...
node.js/VUE项目中导出excel表格的多种实现方法（D2admin适用）
方法一.vue+js-xlsx 1.vue项目内安装两个依赖:xlsx.file-saver npm install xlsx --save npm install file-saver --sa ...
vue 使用Export2Excel导出Excel表格
第1步:添加依赖: 1:npm install -S file-saver2:npm install -S xlsx3:npm install -D script-loader 第2步: (1)随便写 ...
vue 使用table2excel导出excel表格（带图片）
如想要实现导出功能,并且可以导出图片,如下图效果: 下面直接上步骤: Ⅰ 下载安装插件安装命令:npm install js-table2excel Ⅱ 引入插件在需要用到的页面引入插件,如 ...
vue文件流导出excel表格打不开
要在post请求拦截器加上responseType = 'arraybuffer',必须设置,也只要设置这个就可以了
hutool工具类导出Excel表格
1.引入hutool和相关依赖 <dependency> <groupId>cn.hutool</groupId> <arti ...
vue 调后台接口实现导出excel表格功能
今天遇到了一个导出excel表格的功能(如图) 实现导出分三步: 第一步:定义API接口的时候添加 responseType: "blob" // 导出策略结果downloadSt ...
vue合并表格excel导出_Vue实现导出excel表格功能
引言: 最近使用vue在做一个后台系统,技术栈 vue + iView ,在页面中生成表格后, iView可以实现表格的导出,不过只能导出csv格式的,并不适合项目需求. 如果想要导出Excel 在s ...

Vue - 调用接口导出 excel 表格至本地

调用后台接口返回的数据：

代码：

Vue - 调用接口导出 excel 表格至本地相关推荐

最新文章

热门文章