vue如何實現二進位制流檔案匯出excel

2022-06-02 14:00:23

vue二進位制流檔案匯出excel

問了一下其他的後端，他們公司前端是a標籤，後端是給了一個地址，a標籤或者window.open()都可以實現。

我們公司是後端返回的二進位制流檔案，實現了一下，親測可以，沒有問題

前端程式碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">下載</button>
    <!-- yarn add axios -->
    <script src="node_modules/axios/dist/axios.min.js"></script>
    <script>
        const btn = document.getElementById("btn");
        btn.onclick = function () {
            axios({
                method: "post",
                url: "http://localhost:3000/download",
                data: {
                    // test: "test data",
                },
                responseType: 'blob' //返回型別
            }).then((res) => {
                let name = '合格率' //注意這裡不可以再加.xlsx了，函數中已經封裝了
                createExcel(res.data, name) //這裡就直接這樣呼叫方法就行了
            });
        }
        // vue中可以寫方法 然後再暴露出去
        function createExcel(res, name) {
            let blob = new Blob([res], {
                type: 'application/vnd.ms-excel'
            })
            let fileName = name + '.xlsx'
            // 允許使用者在使用者端上儲存檔案
            if (window.navigator.msSaveOrOpenBlob) { 
                navigator.msSaveBlob(blob, fileName)
            } else {
                var link = document.createElement('a')
                link.href = window.URL.createObjectURL(blob)
                link.download = fileName
                link.click()
                //釋放記憶體
                window.URL.revokeObjectURL(link.href)
            }
        }
        // 1.msSaveBlob：只提供一個儲存按鈕
        //window.navigator.msSaveBlob(blobObject, 'msSaveBlob_testFile.txt');
        // 2.msSaveOrOpenBlob：提供儲存和開啟按鈕
        // window.navigator.msSaveOrOpenBlob(blobObject, 'msSaveBlobOrOpenBlob_testFile.txt');
    </script>
</html>

後端node

const http = require("http");
const fs = require("fs");
const server = http.createServer((req, res) => {
  if (req.url === "/download") {
    res.writeHead(200, {
      "Content-type": "application/vnd.ms-excel", // 返回 excel
      // 跨域設定
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Headers": "content-type",
    });
    // 非同步讀取檔案內容  這裡新建了一個test.xlsx的excel
    fs.readFile("test.xlsx", (err, data) => {
      // 返回二進位制檔案流
      res.end(data);
    });
  }
});
server.listen(3000, () => {
  console.log("好厲害，3000的伺服器起來了");
});

關於二進位制檔案流匯出Excel檔案的一些坑

實現下載效果

<el-button type="warning" icon="el-icon-download" size="mini" @click="download()">匯出</el-button>

 //下載操作
        download() {
            return axios({
                url: '/download/sms',
                method: 'post',
                data: this.queryForm,
                responseType: 'blob',
                headers: {
                    'Content-Type': 'application/json'
                }
            })
                .then(res => {
                    console.log(res, '返回資料列');
                    const blob = new Blob([res.data], {
                        type: 'application/vnd.ms-excel'
                    });
                    console.log(blob, '----------0990');
                    const fileName = '簡訊列表.xls';
                    const linkNode = document.createElement('a');
                    linkNode.download = fileName; //a標籤的download屬性規定下載檔案的名稱
                    linkNode.style.display = 'none';
                    linkNode.href = URL.createObjectURL(blob); //生成一個Blob URL
                    document.body.appendChild(linkNode);
                    linkNode.click(); //模擬在按鈕上的一次滑鼠單擊
                    URL.revokeObjectURL(linkNode.href); // 釋放URL 物件
                    document.body.removeChild(linkNode);
                })
                .catch((err) => {
                    console.log(err);
                });
                return res;
        },