前端根據后端返回的數據流導出excel

首先在utils.js里面聲明exportMethod函數，該函數的作用是通過發axios post請求后端導出接口，請求成功后：

1. 在成功函數里面先新建一個a標簽：

const link = document.createElement('a');

2. 然后new一個Blob對象（是一個可以存儲二進制文件的容器)

let blob = new Blob([res.data], {type: 'application/x-excel'});

let blob = new Blob(arr[optional], options[optional]) 

第一個參數為一個數據序列，可以是任意格式的值
第二個參數用於指定將要放入Blob中的數據的類型，比如：type: 'application/x-excel' 或 type: 'text/plain'

3. 通過URL.createObjectURL()方法通過傳入的參數(參數：用於創建url的file對象，Blob對象或者MediaSource對象)，創建一個指向該參數對象的URL，綁定到創建a標簽的href屬性上，

link.style.display = 'none';
link.href = URL.createObjectURL(blob);
link.download = data.fileName;

　　

4. 然后往body上面append這個a標簽，並執行a標簽的點擊事件，進行文件的導出，最后導出成功后，要記得把a標簽從body上面移除。

document.body.appendChild(link);
link.click();
document.body.removeChild(link);

 

整個的實現代碼如下：
utils.js中添加exportMethod函數：

請求方式為post

exportMethod(data) {
        axios({
            method: data.method,
            url: data.url,
            data: data.params,
            responseType: 'blob'
        }).then((res) => {
            const link = document.createElement('a');
            let blob = new Blob([res.data], {type: 'application/x-excel'});
            link.style.display = 'none';
            link.href = URL.createObjectURL(blob);
            link.download = data.fileName;
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }).catch(error => {
            this.$Notice.error({
                title: '錯誤',
                desc: '網絡連接錯誤'
            });
        });
    }

在調用的組件中引入utils.js文件：

import utils from 'utils/utils.js';

<div class="statement-detail-exportbtn">
    <button class="veui-button"
            @click="exportExcel">
        <span>導出</span>
    </button>
</div>

exportExcel() {
    let data = {
        method: 'post',
        url: this.exportUrl,
        fileName: this.id+' 結算單詳情.xlsx',
        params: {
            settlementId: this.id
        }
    };
    utils.exportMethod(data);
}

 

 

請求方式為get

在utils中新建一個導出excel文件
import axios from 'axios'

// 導出Excel公用方法
export function exportMethod(data) {
  axios({
    method: data.method,
    url: `${data.url}${data.params ? '?' + data.params : ''}`,
    responseType: 'blob'
  }).then((res) => {
    const link = document.createElement('a')
    let blob = new Blob([res.data], {type: 'application/vnd.ms-excel'})
    link.style.display = 'none'
  link.href = URL.createObjectURL(blob)

  // link.download = res.headers['content-disposition'] //下載后文件名
  link.download = data.fileName //下載的文件名
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}).catch(error => {
    this.$Notice.error({
    title: '錯誤',
    desc: '網絡連接錯誤'
  })
  console.log(error)
})
}

在調用的組件中引入utils.js文件：
exportDepReceRank() {
  let myObj = {
    method: 'get',
    url: "http://zhlw.dev.internal.virtueit.net/v1/video/image/exportImgCheckResult",
    fileName: '圖片質量檢測結果',
    params: `orgId=2`
  }
  exportMethod(myObj)
}