vue前端接受后台返回流数据,并实现文件正常下载

Posted coderkey

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue前端接受后台返回流数据,并实现文件正常下载相关的知识,希望对你有一定的参考价值。

一,问题:

后台返回二进制文件流,前端实现下载excel文件;


二,新建一个js文件用来配置

export function exportExcel(data,filename) 
    const blob = new Blob([data],  type: 'application/vnd.ms-excel' )
    const link = document.createElement('a')
    link.download = filename + '.xlsx'
    link.href = window.URL.createObjectURL(blob)
    document.body.appendChild(link)
    link.click()
    //释放内存
    document.body.remove(link)
    window.URL.revokeObjectURL(link.href)


三,在需要用的页面引入js文件

<template>
  <div id="app">
    <div>
      <button @click="download">下载表格</button>
    </div>
    <router-view />
  </div>
</template>
<script>
import  exportExcel  from "./directive/excelConfig";
export default 
  data() 
    return ;
  ,
  methods: 
    download() 
     // 调用后端接口,数据从res.data返回(根据自己的后台接口来)
      xxxApi(params).then((res) => 
        exportExcel(res.data, "vue2导出的表格");
      );
    
  ,
;
</script>

注意:请求接口的响应类型是responseType: ‘blob’



以上是关于vue前端接受后台返回流数据,并实现文件正常下载的主要内容,如果未能解决你的问题,请参考以下文章

vue前端接受后台返回流数据,并实现文件正常下载

前端接受后端 blob 文件流 并进行展示和下载

vue项目-pdf预览和下载,后台返回文件流形式

#yyds干货盘点#前端如何下载文件流

vue 后台接口返回文件流地址的下载

前端如何下载文件流