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

vue二进制流文件导出excel

问了一下其他的后端,他们公司前端是a标签,后端是给了一个地址,a标签或者window.open()都可以实现。

我们公司是后端返回的二进制流文件,实现了一下,亲测可以,没有问题

vue如何实现二进制流文件导出excel_第1张图片

前端代码




    
    
    
    Document


    
    
    
    

后端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文件的一些坑

实现下载效果

vue如何实现二进制流文件导出excel_第2张图片

导出
 //下载操作
        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;
        },

踩坑

1、刚开始看网上说需要axios原生才能请求,然后就引入了axios之后但是一直报错,导致download的then代码无法执行,直接走catch,输出错误

研究了半天才发现是blob返回没有code,也没有message,而我在拦截器中直接设置了code的判断拦截,所以导致请求一直报错

vue如何实现二进制流文件导出excel_第3张图片

2、在发送请求时必须要加上responseType: ‘blob’,不然导出的文件是乱码格式的

3、在then里面定义的blob new出来的数据需要再走一层,而不是直接输出

vue如何实现二进制流文件导出excel_第4张图片

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

你可能感兴趣的:(vue如何实现二进制流文件导出excel)