返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue后台返回格式为二进制流进行文件的下载方式
  • 886
分享到

vue后台返回格式为二进制流进行文件的下载方式

2024-04-02 19:04:59 886人浏览 薄情痞子
摘要

目录后台返回格式为二进制流进行文件的下载结合项目中具体文件使用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) //释放内存
}

即可实现下载二进制流文件。

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

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。 

--结束END--

本文标题: vue后台返回格式为二进制流进行文件的下载方式

本文链接: https://lsjlt.com/news/150437.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作