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

本篇內容主要講解“vue后臺如何返回格式為二進制流進行文件的下載”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“vue后臺如何返回格式為二進制流進行文件的下載”吧!

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

結合項目中

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

即可實現下載二進制流文件。

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

方法調用

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

到此，相信大家對“vue后臺如何返回格式為二進制流進行文件的下載”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！