目录后台返回格式为二进制流进行文件的下载结合项目中具体文件使用Vue下载保存二进制文件方法封装:util.js请求接口方法调用后台返回格式为二进制流进行文件的下载 结合项目中 封装g
封装get请求携带token,进行接收二进制流
export function getHeader() {
const token = getToken();
if (token) {
return {
headers: {
"Authorization": "Bearer " + token,
}
}
}
return {
headers: {}
}
}
export function getHeader() {
const token = getToken();
if (token) {
return {
headers: {
"Authorization": "Bearer " + token,
}
}
}
return {
headers: {}
}
}
TaskManageServer.js文件:
export const dataExport2 = (vueObject, dataidList) => getDataRaw(vueObject,dataExport1(dataIdList))
export const dataExport1 = (dataIdList)=> {
var tmp ="";
for (let i = 0; i <dataIdList.length; i++) {
tmp+= dataIdList[i]+","
}
tmp = tmp.substr(0,tmp.length-1)
var url = getUrl('image/export/' + tmp);
return url;
}
对应html文件具体使用:
import {
dataExport1,
dataExport2
} from './TaskManageServer'
const response = await dataExport2(this, this.dataIdList);
let blob = new Blob([response.data], {
//下载的文件类型;
type: 'application/zip'
})
// let fileName = Date.parse(new Date()) + '.zip'(修改下载的文件名)
if (window.navigator.msSaveOrOpenBlob) {
// navigator.msSaveBlob(blob, fileName)
navigator.msSaveBlob(blob)
} else {
var link = document.createElement('a')
link.href = window.URL.createObjectURL(blob)
// link.download = fileName
link.click()
window.URL.revokeObjectURL(link.href) //释放内存
}
即可实现下载二进制流文件。
export 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"
export function demoapi(data) {
return Http({
url: "/path/export",
method: "post",
responseType: "arraybuffer",
data,
});
}
demoApi(data).then(res=>{
if(res.staus==200){
let fileName = "";
let contentDisposition = res.headers["content-disposition"];
if (contentDisposition) {
fileName = window.decodeURI(
res.headers["content-disposition"].split("=")[1],
"UTF-8"
);//取文件名
}
exportFile(res.data, fileName);
}
})
以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。
--结束END--
本文标题: vue后台返回格式为二进制流进行文件的下载方式
本文链接: https://lsjlt.com/news/150437.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0