vue后臺返回格式為二進(jìn)制流進(jìn)行文件的下載方式
后臺返回格式為二進(jìn)制流進(jìn)行文件的下載
結(jié)合項目中
封裝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)存
}即可實現(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);
? ? }
})以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
element-UI?el-table樹形數(shù)據(jù)?修改小三角圖標(biāo)方式
這篇文章主要介紹了element-UI?el-table樹形數(shù)據(jù)?修改小三角圖標(biāo)方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-07-07
基于Vue組件化的日期聯(lián)動選擇器功能的實現(xiàn)代碼
這篇文章主要介紹了基于Vue組件化的日期聯(lián)動選擇器的實現(xiàn)代碼,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2018-11-11
Vue重要修飾符.sync對比v-model的區(qū)別及使用詳解
這篇文章主要為大家介紹了Vue中重要修飾符.sync與v-model的區(qū)別對比及使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07
警告[vue-router]?Duplicate?named?routes?definition簡單解決方法
這篇文章主要關(guān)于介紹了警告[vue-router]?Duplicate?named?routes?definition的解決方法,這個錯誤提示是因為在Vue Router中定義了重復(fù)的路由名稱,需要的朋友可以參考下2023-12-12

