vue后臺返回格式為二進(jìn)制流進(jìn)行文件的下載方式

更新時(shí)間：2022年06月02日 11:08:21 作者：阿然然然

這篇文章主要介紹了vue后臺返回格式為二進(jìn)制流進(jìn)行文件的下載方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

后臺返回格式為二進(jìn)制流進(jìn)行文件的下載

結(jié)合項(xiàng)目中

封裝get請求攜帶token，進(jìn)行接收二進(jìn)制流

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;
}

對應(yīng)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) //釋放內(nèi)存
}

即可實(shí)現(xiàn)下載二進(jìn)制流文件。

vue下載保存二進(jìn)制文件

方法封裝：util.js

/**
?* 把二進(jìn)制文件保存到本地
?*/
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,
? });
}

方法調(diào)用

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);
? ? }
})

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: