VUE前端Excel文件下载，使用后台文件名

第1步：在后台响应response中增加：

response.setHeader("Content-Disposition", "attachment;fileName=" + URLEncoder.encode(fileName, "utf-8"));
// 这步很重要，需要在给前端返回的请求头中添加Content-Disposition字段，否则前端会取不到Content-Disposition的信息
response.setHeader("Access-Control-Expose-Headers", "Content-Disposition");

第2步：前端请求后台接口获取数据

import request from '@/router/axios'
export function handleDownNew(url,method,pdata) {return request({url: url,method: method,responseType: 'blob',params: pdata}).then((response) => { // 处理返回的文件流var dispositionStr = response.headers['content-disposition'];if (dispositionStr == null || dispositionStr === "") {alert("下载失败!");return;} // 获取文件名let dispositionArr = dispositionStr.split(";");// 我们的文件名可能含有汉字,因此在后端进行了UTF-8编码处理,此处进行解码let fileName = decodeURIComponent(dispositionArr[1]);fileName = fileName.split("fileName=")[1];const blob = new Blob([response.data], {type: 'application/vnd.ms-excel'})const link = document.createElement('a')link.href = URL.createObjectURL(blob)link.download = fileNamedocument.body.appendChild(link)link.click()window.setTimeout(function () {URL.revokeObjectURL(blob)document.body.removeChild(link)}, 0)})
}

VUE前端Excel文件下载，使用后台文件名相关推荐

Vue的Excel文件下载
最早开始接触下载是后端直接返回一个链接,通过a标签直接下载,甚至再简单点直接window.open直接下载.恰巧今天第一次经历文件流下载,代码如下 this.$http.get(`xxx`).then ...
vue导入excel进度条_Vue结合后台导入导出Excel问题详解
最近Vue项目中用到了导入导出功能,在网上搜索了一番之后,决定采用Blob方式,这也是大家推荐的一种的方式,特此做下记录. 导出Excel功能这里不谈别人怎么实现的,我是从后台生成了Excel流文件 ...
java后台实现excel文件下载功能
java后台实现excel文件下载功能 java中对于excel文件的操作,有读取,写入,上传等功能,在对excel文件进行操作时,为了让使用者更加直观的制作excel数据,必然会有下载模板exce ...
纯前端js(或者vue)导出excel实现：合并单元格、设置单元格样式、单元格内换行
前提是安装xlsx,已经可以导出普通的excel npm install --save xlsx file-saver 然后需要安装 npm install xlsx-style 如果运行的时候报错 ...
Vue前端表格导出Excel文件
前言分享一个Vue前端导出Excel文件的方法.记录学习! 功能需求:将表格的全部数据导出Excel格式的文件前端:Vue3+Element-Plus 这个导出方法全部为前端操作,后端只需要传入表 ...
(vue) 前端实现下载本地Excel模板
(vue) 前端实现下载本地Excel模板方法: 第一步: 将文件放在public里第二步: href链接解决参考:https://blog.csdn.net/sincejuly1995/art ...
APP+后台+vue前端全套打包送，电商解决方案CRMEB开源啦
CRMEB是一套网上购物商城系统,其中包括java + vue + uniapp,也就是说pc后台管理系统的前后台+APP全套源码全部提供.其中项目有php版本与java版本.本文着重讲解java版本 ...
Element ui+vue前端框架组件主题美化后台管理系统模板html
最新设计了一套Element ui主题模板演示地址:Element ui+vue前端框架组件主题美化后台管理系统模板 Element ui版本号:2.15.12 vue版本号:2.7. ...
vue 实现本地excel文件下载功能
今天后端开发人员给了我一个excel文件,跟我说要实现excel下载功能,就是将给的excel文件下载下来. 所以我刚开始就直接还用之前用过的方法来实现,不过有一点小瑕疵,就是名字是默认的不能修改.先 ...

VUE前端Excel文件下载，使用后台文件名

VUE前端Excel文件下载，使用后台文件名相关推荐

最新文章

热门文章