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

 更新时间:2022年06月02日 11:08:21   作者:阿然然然  
这篇文章主要介绍了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);
    }
})

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。 

相关文章

  • el-table 选中行与复选框相互联动的实现步骤

    el-table 选中行与复选框相互联动的实现步骤

    这篇文章主要介绍了el-table 选中行与复选框相互联动,分为两步,第一步点击行时触发复选框的选择或取消,第二步点击复选框时触发相应行的变化,本文通过实例代码给大家详细讲解,需要的朋友可以参考下
    2022-10-10
  • 解决vue-router 切换tab标签关闭时缓存问题

    解决vue-router 切换tab标签关闭时缓存问题

    这篇文章主要介绍了解决vue-router 切换tab标签关闭时缓存问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • antd upload上传组件如何获取服务端返回数据

    antd upload上传组件如何获取服务端返回数据

    这篇文章主要介绍了antd upload上传组件如何获取服务端返回数据问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-02-02
  • 详解Vue如何监测数组的变化

    详解Vue如何监测数组的变化

    在 Vue 中,如果直接对数组进行操作,比如使用下标直接修改元素,数组长度不变时, Vue 是无法监测到这种变化的,导致无法触发视图更新。针对该问题本文为大家整理了一些方法,需要的可以参考一下
    2023-01-01
  • Vue获取表单数据的多种方式

    Vue获取表单数据的多种方式

    这篇文章主要给大家介绍了关于Vue获取表单数据的多种方式,在Vue中我们通常使用v-model命令绑定表单的属性值(通常是value),获取到的属性值就是表单数据,需要的朋友可以参考下
    2023-09-09
  • 浅谈Vue-cli 命令行工具分析

    浅谈Vue-cli 命令行工具分析

    本篇文章主要介绍了浅谈Vue-cli 命令行工具分析,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • Vue监听数组变化源码解析

    Vue监听数组变化源码解析

    这篇文章主要为大家详细解析了Vue监听数组变化的源码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • ant design vue 清空upload组件图片缓存的问题

    ant design vue 清空upload组件图片缓存的问题

    这篇文章主要介绍了ant design vue 清空upload组件图片缓存的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • vue中修改浏览器图标和名字的几种方式

    vue中修改浏览器图标和名字的几种方式

    当针对不同客户需要提供不同的图标时,页面其他图标好替换,但是网页图标就不太一样了,下面这篇文章主要给大家介绍了关于vue中修改浏览器图标和名字的几种方式,需要的朋友可以参考下
    2022-10-10
  • vue单行文本溢出会出现title提示自定义指令

    vue单行文本溢出会出现title提示自定义指令

    这篇文章主要为大家介绍了vue单行文本溢出会出现title提示自定义指令,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01

最新评论