前端js/vue下载后台传过来的流文件（如excel）并设置下载文件名_艾欢欢的博客-CSDN博客_js下载excel 自定义文件名
前端js/vue下载后台传过来的流文件（如excel）并设置下载文件名
艾欢欢
于 2019-09-30 13:41:59 发布
15345
收藏
38
分类专栏：
Vue
JavaScript
文章标签：
Blob
下载文件
js-file-download
解决下载文件乱码
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AiHuanhuan110/article/details/101767967
版权
Vue
同时被 2 个专栏收录
34 篇文章
13 订阅
订阅专栏
JavaScript
33 篇文章
1 订阅
订阅专栏
这里介绍两种方法，使用 Blob对象 和 使用 js-file-download ​ 这两种方法下载的文件都不会乱码，但是 不管使用哪种方法，发送请求时都要设置 responseType ​ 如果不打算了解直接使用，请通过目录或者直接点击跳转 四、主要完整代码
方法一：使用Blob对象
Blob对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。File接口基于Blob，继承了blob的功能并将其扩展使其支持用户系统上的文件。
一、Blob() 构造函数
摘自：Blob() 构造函数
语法
var aBlob = new Blob( array, options );
参数
array 是一个由ArrayBuffer, ArrayBufferView, Blob, DOMString 等对象构成的 Array ，或者其他类似对象的混合体，它将会被放进 Blob。DOMStrings会被编码为UTF-8。options 是可选的，它可能会指定如下两个属性：
type，默认值为 ""，它代表了将会被放入到blob中的数组内容的MIME类型。也就是设置文件类型。endings，默认值为"transparent"，用于指定包含行结束符\n的字符串如何被写入。 它是以下两个值中的一个： "native"，代表行结束符会被更改为适合宿主操作系统文件系统的换行符，或者 "transparent"，代表会保持blob中保存的结束符不变。
二、URL对象
通过创建URL对象指定文件的下载链接。
// 创建新的URL表示指定的File对象或者Blob对象。
let objectURL = window.URL.createObjectURL(blob);
window.URL.revokeObjectURL(objectURL); // 释放内存
在每次调用createObjectURL()方法时，都会创建一个新的 URL 对象，即使你已经用相同的对象作为参数创建过。当不再需要这些 URL 对象时，每个对象必须通过调用 URL.revokeObjectURL()方法来释放。浏览器会在文档退出的时候自动释放它们，但是为了获得最佳性能和内存使用状况，你应该在安全的时机主动释放掉它们。
三、利用a标签自定义文件名
const link = document.createElement('a'); // 生成一个a标签。
link.href = window.URL.createObjectURL(blob); // href属性指定下载链接
link.download = fileName; // dowload属性指定文件名
link.click(); // click()事件触发下载
download 属性设置文件名时，可以直接设置扩展名。如果没有设置，则浏览器将自动检测正确的文件扩展名并添加到文件 。
四：主要完整代码
普通下载 axios.post(postUrl, params, {responseType: 'arraybuffer'}).then(res => {
// 创建Blob对象，设置文件类型
let blob = new Blob([res.data], {type: "application/vnd.ms-excel"})
let objectUrl = URL.createObjectURL(blob) // 创建URL
location.href = objectUrl;
URL.revokeObjectURL(objectUrl); // 释放内存
})
自定义下载后的文件名 // 利用a标签自定义下载文件名
const link = document.createElement('a')
axios.post(postUrl, params, {responseType: 'arraybuffer'}).then(res => {
// 创建Blob对象，设置文件类型
let blob = new Blob([res.data], {type: "application/vnd.ms-excel"})
let objectUrl = URL.createObjectURL(blob) // 创建URL
link.href = objectUrl
link.download = 'xxx' // 自定义文件名
link.click() // 下载文件
URL.revokeObjectURL(objectUrl); // 释放内存
})
注 ：下载指定扩展名的文件只需要对照MIME 参考手册设置type即可。
方法二：使用 js-file-download
安装 npm install js-file-download --save
使用 import fileDownload from 'js-file-download'
axios.post(postUrl, params, {responseType: 'arraybuffer'}).then(res => {
fileDownload(res.data, 'xxx.xls')
})
艾欢欢
关注
关注
点赞
38
收藏
打赏
评论
前端js/vue下载后台传过来的流文件（如excel）并设置下载文件名
这里介绍两种方法，使用 Blob对象 和 使用 js-file-download但是 不管使用哪种方法，发送请求时都要设置 responseType如果不打算了解直接使用，请通过目录进入 四、主要完整代码​方法一：使用Blob对象Blob对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。File接口基于Blob，继承了blob的功...
复制链接
扫一扫
专栏目录
vue前端下载各类文件，后端返回的是文件流，该怎么下载？获取到文件信息？
qq_40739261的博客
10-17
857
前端vue项目下载文件，后端后台返回的是文件流（二进制），前端操作代码该如何写。vue前端常见的文件流格式类型有哪些，怎么设置下载类型。
blob() 一个url下载文件，并更改文件名的方法
Liszter
06-21
692
利用blob对象下载文件并更改文件名
评论 7
您还未登录，请先
登录
后发表或查看评论
vue实现下载文件
最新发布
weixin_42536961的博客
10-24
2121
vue实现下载文件
js 导出excel,设置下载的标题
你好邱林和的专栏
11-07
8362
在网上找到了js导出为excel的方法,可就是找不到如何修改导出的excel标题的方式,找到了如下的网站: 参考国外的网站:http://stackoverflow.com/questions/17126453/html-table-to-excel-javascript.他是利用a标签,可以设置download属性,设置下载的文件标题,这里是a标签的详细解释http://www.runoob.c
js excel导出 自定义excel文件名
qq_36470908的博客
09-14
3767
var idTmr;function getExplorer() {
var explorer = window.navigator.userAgent;
// ie
if (explorer.indexOf("MSIE") >= 0) {
return 'ie';
// firefox
else if (explorer.indexOf("Firefox") >= 0) {
js导出Excel并指定文件名
weixin_30345577的博客
04-07
619
<table id="tb"><tr><td>1111</td></tr><tr><td>2222</td></tr><tr><td>333</td></tr><tr><td>444</td><...
js实现文件下载并重命名
xiaoxiannv666的博客
02-02
2745
背景：element-ui写的一个表格，由于数据量太多而目前的筛选功能不完善，新增了导出数据的功能，一键将所有数据下载为一个excel，让运营人员去excel中搜索。导出数据的功能是后端小哥哥做哒，前端只负责下载。
此时，后台小哥哥抛给你一个下载的url
可以用 window.location.href = url;
来下载,但是不够优美（不能根据需求重命名
一般的做法是获取文件 Blob，然后下载重命名，简单整理了一下
// 下载方法
downloadExcel(url, filename
前端根据流或者url下载文件
huozhezhennan的博客
06-29
1745
前端根据流下载文件，前端根据URL下载文件
通用创建a标签打开下载文件或blob对象 自定义文件名
刻痕
02-21
947
url： 下载地址，或者blob对象，必选
saveName： 保存文件名，可选
const openDownloadDialog = (url, saveName) => {
if(typeof url == 'object' && url instanceof Blob)
url = URL.createObjectURL(url); // 创建blob地址
var aLink = document.createElement('a');
aLink.hr.
EasyExcel使用
m0_62237098的博客
05-03
282
一.EasyExcel介绍
1、数据导入：减轻录入工作量
2、数据导出：统计信息归档
3、数据传输：异构系统之间数据传输
二.EasyExcel特点
Java领域解析、生成Excel比较有名的框架有Apache poi、jxl等。但他们都存在一个严重的问题就是非常的耗内存。如果你的系统并发量不大的话可能还行，但是一旦并发上来后一定会OOM或者JVM频繁的full gc。
EasyExcel是阿里巴巴开源的一个excel处理框架，以使用简单、节省内存著称。EasyExcel能大大减少占用内存的主要原因是在解
【JS】json导出到excel，自定义文件名和后缀名
LuviaWu的博客
12-03
1195
json导出excel表格
HTML
&lt;el-button type="danger" class="ml10 fr" @click="exportForm"&gt;导出表格&lt;/el-button&gt;
JS
表格输出的数字，如果太长，会自动计算，解决办法：
在td上加上样式 style=“mso-number-fo
js前端导出Excel（可自定义文件名称，后缀，有边框样式）
热门推荐
乔瑞的博客
09-18
2万+
需求：
要求把项目中的table表格导出Excel
需求分析及解决：
既然需要导出，是报表的可能性比较大，我的项目中就是这样，那既然是报表导出，可以是前端导出，也可以是后端导出（技术包括POI或者报表工具等），这篇文章主
要是网上找的前端导出，既然是前端导出又是报表就需要有数据，所以数据都需要你提前做好相应填充
代码
EasyExcel的使用—详解(前端发送请求后端接收)
Have_MonkeyG的博客
07-11
781
Easyexcel导出表格，前后端都有
URL.createObjectURL讲解
定栓的博客
12-21
3992
URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。
window.URL.createObjectURL
呵呵的牛
01-11
1274
URL.createObjectURL
前端下载文件(blob流文件下载及修改下载文件名称)
weixin_46752896的博客
12-11
2233
项目中经常遇到文件下载需求，有时候后台返回的是一个blob流文件（就是看起来像是乱码的数据），这时就需要前端对文件进行处理，或展示，或下载。故这里简单实现一下blob流文件下载的方法。
function downloadFile() {
// fileUrl使用后台提供的接口地址即可，这里测试使用本地图片，防止跨域
let fileUrl = "./test.jpg";
let xhr = new XMLHttpRequest();
xhr.open("GET",fileUrl,true);
xh
前端用 js-file-download组件 下载后端返回的Excel文件
s212571231的博客
08-23
512
前端用 js-file-download组件 下载后端返回的Excel文件。
js下载文件并修改文件名 / js判断文件后缀
小小前端攻城狮
09-07
1183
js下载文件并修改文件名
js判断文件后缀
js文件流下载文件
m0_59983943的博客
07-20
181
js文件流下载文件
“相关推荐”对你有帮助么？
非常没帮助
没帮助
一般
有帮助
非常有帮助
提交
©️2022 CSDN
皮肤主题：大白
设计师：CSDN官方博客
返回首页
艾欢欢
CSDN认证博客专家
CSDN认证企业博客
码龄4年
暂无认证
75
原创
1万+
周排名
97万+
总排名
49万+
访问
等级
4106
积分
1109
粉丝
345
获赞
168
评论
1414
收藏
私信
关注
热门文章
vuex中store存储store.commit和store.dispatch的区别及用法
62743
axios 进行同步请求(async+await)
58149
【vue项目实战】Vue工程化项目--猫眼电影移动端
30748
前端获取response响应头的所有数据/信息
25671
通过Ajax读取本地json文件，提示跨域的原因和解决方法
25363
分类专栏
CSS
10篇
React
1篇
JavaScript
33篇
Vue
34篇
Webpack
3篇
前端性能优化
3篇
移动端H5
5篇
Node.js
2篇
Weex
1篇
其他
2篇
终端命令
1篇
Sublime Text
1篇
最新评论
【全栈初体验】Vue+Node+MySQL实现前后端分离开发
然336:
我点击提交和查询没有反应，控制台也没报错，点击事件也响应了
【什么是盒模型】标准盒子模型、怪异盒子模型
hcoke:
这里盒子的宽高应该不包括margin
通过meta代码强制浏览器使用WebKit内核极速模式（解决 meta name="renderer" content="webkit" 不起作用）
coder_yanMing:
我这里也没有效果，你那边解决了吗？
【vue项目实战】Vue工程化项目--猫眼电影移动端（二）
艾欢欢:
接口数据失效了，猫眼的api做限制了
【vue项目实战】Vue工程化项目--猫眼电影移动端（二）
little纸船:
大佬,能抽空看看吗
您愿意向朋友推荐“博客详情页”吗？
强烈不推荐
不推荐
一般般
推荐
强烈推荐
提交
最新文章
JS实现拖拽元素交换位置
使用CSS让矩形图片只展示中间正方形区域且图片不变形（div/img两种标签）
移动端H5文本框获取焦点唤起键盘时，fixed或absolute定位的元素被键盘顶上去的问题解决方案
2021年2篇
2020年11篇
2019年61篇
2018年2篇
目录
目录
分类专栏
CSS
10篇
React
1篇
JavaScript
33篇
Vue
34篇
Webpack
3篇
前端性能优化
3篇
移动端H5
5篇
Node.js
2篇
Weex
1篇
其他
2篇
终端命令
1篇
Sublime Text
1篇
目录
评论 7
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
打赏作者
艾欢欢
你的鼓励将是我创作的最大动力
¥2
¥4
¥6
¥10
¥20
输入1-500的整数
余额支付
(余额：-- )
扫码支付
扫码支付：¥2
获取中
扫码支付
您的余额不足，请更换扫码支付或充值
打赏作者
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额
抵扣说明：
1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。 2.余额无法直接购买下载，可以购买VIP、C币套餐、付费专栏及课程。
余额充值