vue如何實現(xiàn)二進制流文件導出excel

更新時間：2022年06月02日 11:19:31 作者：甜仔是只貓

這篇文章主要介紹了vue如何實現(xiàn)二進制流文件導出excel，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue二進制流文件導出excel

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

我們公司是后端返回的二進制流文件，實現(xiàn)了一下，親測可以，沒有問題

前端代碼

<!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了，函數(shù)中已經(jīng)封裝了
                createExcel(res.data, name) //這里就直接這樣調(diào)用方法就行了
            });
        }
        // 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()
                //釋放內(nèi)存
                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",
    });
    // 異步讀取文件內(nèi)容  這里新建了一個test.xlsx的excel
    fs.readFile("test.xlsx", (err, data) => {
      // 返回二進制文件流
      res.end(data);
    });
  }
});
server.listen(3000, () => {
  console.log("好厲害，3000的服務器起來了");
});

關于二進制文件流導出Excel文件的一些坑

實現(xiàn)下載效果

<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, '返回數(shù)據(jù)列');
                    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屬性規(guī)定下載文件的名稱
                    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;
        },