vue 怎么接收后端傳過來的 excel文件流

vue 怎么接收后端傳過來的 excel文件流

1.首先需要修改接口的的發送方式

 'responseType': "arraybuffer" 

 

2.在公共js里新建一個方法

import {  parseTime} from './index';  // 這是是一個格式化時間的方法。可以刪除
export function export_excel_file(export_data, list_name) {
  let link = document.createElement("a");
  //    type就是blob的type,是MIME類型的，可以自己查看MIME類型都有哪些
  let blogw = new Blob([export_data], {
    type: "application/vnd.ms-excel;charset=utf-8"
  })
  let objectUrl = window.URL.createObjectURL(blogw); //創建一個新的url對象
  link.href = objectUrl;
  let file_name = `${parseTime(new Date())}的${list_name}列表.xlsx`; // 文件名的輸出方式，隨意就好
  link.download = file_name; //  下載的時候自定義的文件名
  link.click();
  window.URL.revokeObjectURL(objectUrl); //為了更好地性能和內存使用狀況，應該在適當的時候釋放url.

}

 

3.調用接口時，直接把文檔流數據放到方法 里

 import { export_excel_file } from '@/utils/export'; 

　　　　

// 導出按鈕
    exportBtn() {if (this.multipleSelection.length) {
        importTrace({
          list: this.multipleSelection, // 傳入數組
        })
          .then((res) => {
            export_excel_file(res, '文件名 ');
            this.$message.success('導出成功');
          })
          .catch(() => {this.$message.error('導出失敗，請稍后再試');
          });
      } else {
        this.$message.warning('請選擇需要導出數據');
      }
    },

 

如有響應攔截器的情況：

后端是用流的形式，所以返回前端沒有 code ，會被響應攔截器攔截。能不能給這個接口設置白名單呢？（能不能放行這個響應呢？）

 

查看上面的圖1，由於我們修改了接口的接口方式，我們發送的方式就會方式改變。

 

 

我們可以看到 response 的 config 里有不一樣的發送方式，我們只要判斷這個響應方式即可。

 

 

以上是全部內容。