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

最新推荐文章于 2022-09-19 16:41:06 发布

这是提莫大人

最新推荐文章于 2022-09-19 16:41:06 发布

阅读量573

点赞数 1

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_44700978/article/details/119722871

版权

vue 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

问了一下其他的后端，他们公司前端是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的服务器起来了");
});

这是提莫大人

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
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">
复制链接

扫一扫