前端（vue）文件流下载
1.首先进行封装在utils中，直接复制即可
export function dataToFile (params) {
let type = params.type;
let fileName = params.fileName;
let data = params.data;
// 兼容 IE
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
window.navigator.msSaveOrOpenBlob(new Blob([data]), fileName);
} else {
// 非IE 浏览器
const url = window.URL.createObjectURL(new Blob([data], { type }));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', `${fileName}`);
document.body.appendChild(link);
link.click();
window.URL.revokeObjectURL(url); // 释放内存
}
}
2.接口，其中可以看到给接口添加了responseType，用来指定后台返回响应数据的类型，其中’arraybuffer‘返回的是包含二进制数据的JavaScriptArraybuffer。
getAttachmentByNameList: (fileName, filePath) => axios.get('getAttachmentByName?fileName=' + fileName + '&filePath=' + filePath, {
responseType: 'arraybuffer'
})
3.一般下载都得首先去触发点击，点击后下载。点击时候去拿到下载文件的下载文件名，下载数据流，下载的类型，请求content-type 要设置为 application/octet-stream（二进制流数据），这样我们的的参数就全齐了
getAttachmentByName (row) {
let fileName = row.fullName;
let filePath = row.fullPath;
API.getAttachmentByNameList(fileName,fullPath).then((res) => {
let params = {
data: res.data,
fileName: fileName,
type: 'application/octet-stream;'
};
dataToFile(params);
});
},
4.拓展 ，在http请求中，一般接口相应得是200，数据类型还都是json格式，这个数据类型返回的是’ArrayBuffer’，这时候需要去判断数据类型，从而去根据类型不去抛出错误 ，不去提示。
这里用到了对象原型链判断方法。不推荐使用 typeof 和 instanceof 去判断数据类型。如果数据类型是‘ArrayBuffer’，那么直接返回数据即可，不去抛出错误即可。文章来源：https://www.toymoban.com/news/detail-652764.html
axios.interceptors.response.use(
res => {
let json = res.data;
if (Object.prototype.toString.call(json) === '[object ArrayBuffer]') {
return res;
} //判断是否是ArrayBuffer数据类型
if (json && json.status !== '200' && json.status !== '10004') {
APP.$message({
message: json.err,
type: 'error'
});
}
return res;
},
error => {
APP.$message({
message: '请求异常',
type: 'error'
});
return Promise.reject(error);
}
);
————————————————文章来源地址https://www.toymoban.com/news/detail-652764.html
到了这里，关于前端（vue）文件流下载的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
