vue文件下载:把文件流保存到本地
开发vue项目时经常碰到文件下载的需求,分两种情况:一种是:后台给文件路径,前端拼地址去下载文件另一种是:后台直接返回文件流,前端去处理第一种很简单这里就不赘述了,直接给出第二种接受文件流并下载的方法:/*** 把二进制文件保存到本地* file 为后台返回的文件流* 请求接口可能需要设置 responseType: "arraybuffer"* name: 文件名,需要带后缀*/function
开发vue项目时经常碰到文件下载的需求,分两种情况:
一种是:后台给文件路径,前端拼地址去下载文件
另一种是:后台直接返回文件流,前端去处理
第一种很简单这里就不赘述了,直接给出第二种接受文件流并下载的方法:
/**
* 把二进制文件保存到本地
* file 为后台返回的文件流
* 请求接口可能需要设置 responseType: "arraybuffer"
* name: 文件名,需要带后缀
*/
function exportFile (file, name) {
let url = window.URL.createObjectURL(new Blob([file]));
let link = document.createElement('a');
link.style.display = 'none';
link.href = url;
link.setAttribute('download', name);
document.body.appendChild(link);
link.click();
document.body.removeChild(link); // 下载完成移除元素
window.URL.revokeObjectURL(url); // 释放掉blob对象
}
关于 responseType: “arraybuffer”,可能需要加在请求接口上
//以axios为例子:
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
},
responseType:'arraybuffer'
});
基本就这些,欢迎补充!没有人事先了解自己到底有多大的力量,直到他试过以后才知道。
更多推荐
所有评论(0)