欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue后臺返回格式為二進制流進行文件的下載方式

 更新時間:2022年06月02日 11:08:21   作者:阿然然然  
這篇文章主要介紹了vue后臺返回格式為二進制流進行文件的下載方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教

后臺返回格式為二進制流進行文件的下載

結(jié)合項目中

封裝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) //釋放內(nèi)存
}

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

vue下載保存二進制文件

方法封裝:util.js

/**
?* 把二進制文件保存到本地
?*/
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)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。 

相關文章

  • vue封裝實現(xiàn)自動循環(huán)滾動的列表

    vue封裝實現(xiàn)自動循環(huán)滾動的列表

    在做數(shù)據(jù)大屏開發(fā)的過程中,經(jīng)常出現(xiàn)需要對列表進行自動滾動的需求,所以本文就來為大家介紹一下如何利用vue封裝一個自動循環(huán)滾動的列表吧
    2023-09-09
  • 解決Vue.js Devtools未檢測到Vue實例的問題

    解決Vue.js Devtools未檢測到Vue實例的問題

    在開發(fā)Vue.js應用時,Vue.js Devtools是一個不可或缺的調(diào)試工具,然而,有時我們可能會遇到“Vue.js not detected”的提示,這意味著Vue.js Devtools未能成功識別和連接到我們的Vue應用,本文將詳細解析這個問題,并提供相應的解決步驟與代碼示例,需要的朋友可以參考下
    2024-01-01
  • 安裝VUE-CLI一直失敗的排錯過程及解決方案

    安裝VUE-CLI一直失敗的排錯過程及解決方案

    這篇文章主要介紹了安裝VUE-CLI一直失敗的排錯過程及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • 詳解基于Vue/React項目的移動端適配方案

    詳解基于Vue/React項目的移動端適配方案

    這篇文章主要介紹了詳解基于Vue/React項目的移動端適配方案,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-08-08
  • 解決vue 中 echart 在子組件中只顯示一次的問題

    解決vue 中 echart 在子組件中只顯示一次的問題

    vue推薦組件化開發(fā),所以就把每個圖表封裝成子組件,然后在需要用到該圖表的父組件中直接使用。接下來給大家介紹vue 中 echart 在子組件中只顯示一次的問題,需要的朋友參考下吧
    2018-08-08
  • element-UI?el-table樹形數(shù)據(jù)?修改小三角圖標方式

    element-UI?el-table樹形數(shù)據(jù)?修改小三角圖標方式

    這篇文章主要介紹了element-UI?el-table樹形數(shù)據(jù)?修改小三角圖標方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-07-07
  • 基于Vue組件化的日期聯(lián)動選擇器功能的實現(xiàn)代碼

    基于Vue組件化的日期聯(lián)動選擇器功能的實現(xiàn)代碼

    這篇文章主要介紹了基于Vue組件化的日期聯(lián)動選擇器的實現(xiàn)代碼,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下
    2018-11-11
  • Vue重要修飾符.sync對比v-model的區(qū)別及使用詳解

    Vue重要修飾符.sync對比v-model的區(qū)別及使用詳解

    這篇文章主要為大家介紹了Vue中重要修飾符.sync與v-model的區(qū)別對比及使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-07-07
  • 警告[vue-router]?Duplicate?named?routes?definition簡單解決方法

    警告[vue-router]?Duplicate?named?routes?definition簡單解決方法

    這篇文章主要關于介紹了警告[vue-router]?Duplicate?named?routes?definition的解決方法,這個錯誤提示是因為在Vue Router中定義了重復的路由名稱,需要的朋友可以參考下
    2023-12-12
  • Vuex的實戰(zhàn)使用詳解

    Vuex的實戰(zhàn)使用詳解

    這篇文章主要介紹了Vuex的實戰(zhàn)使用詳解,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-10-10

最新評論