vue实现二进制流文件导出excel

缺乏、安全感 2022-09-05 00:15 229阅读 0赞

问了一下其他的后端，他们公司前端是a标签，后端是给了一个地址，a标签或者window.open()都可以实现。  
我们公司是后端返回的二进制流文件，实现了一下，亲测可以，没有问题  
![请添加图片描述][41210beca9694b85aeb8039bdbfb088b.gif]  
前端代码：

<!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>
        
        <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

[41210beca9694b85aeb8039bdbfb088b.gif]: /images/20220829/44f6b4b39f4c4c858584fab8f72d76e6.png