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

2024-09-28 07:05:02

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;
        },

踩坑

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

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

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

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

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

Vue请求后端接口导出excel表格方式

目录 vue请求后端接口导出excel 调用后端接口导出excel无效果,直接访问后端url可以 controller层代码 serviceImpl代码导出模板路径工具箱代码 vue前端写法 vue请求后端接口导出excel 项目中遇到一个需求,用户下载文件,会从后端那里请求接口获得数据并下载导出excel表格后端小哥给我返回的是二进制数据流,需要前端自己去处理这些数据如下图,请求接口返回的数据都是乱码这里我们可以在axios的请求里添加,这样返回的二进制数据就会被读取为Blob的数据
vue中导出Excel表格的实现代码

项目中我们可能会碰到导出Excel文件的需求,一般后台管理系统中居多,将table中展示的数据导出保存到本地.当然我们也可以通过一些处理来修改要导出的数据格式,具体需求具体对待. 1.首先我们需要安装3个依赖,file-saver.xlsx和script-loader. 使用npm安装: npm install file-saver xlsx -S npm install script-loader -D 使用yarn安装: yarn add file-saver xlsx -S yarn ad
Vue前端导出Excel文件的详细实现方案

目录一.技术选型二.技术实现使用 vue-json-excel 插件实现 1.安装 vue-json-excel 依赖 2.注册插件到 vue 实例 3.使用方式基于 sheetJS-xlsx 解析器的 xlsx-style 实现(推荐) 1.安装依赖 2.使用方法三.参考资料总结一.技术选型 1.使用 vue-json-excel 插件实现优点:简单便捷,易上手,开箱即用: 缺点:不支持 excel 表格样式设置,且支持功能比较单一: 2.基于 sheetJS-xlsx 解析器
基于Vue实现Excel解析与导出功能详解

目录前言基本介绍代码实现基本结构上传解析 Excel的导出基本结构导出Excel 总结前言最近在整理日常开发中长涉及到的业务需求,正好想到了excel的解析与上传方面的事情,在开发中还是比较常见的,趁着周末做一下整理学习吧基本介绍主要基于Vue+element实现文件的解析与导出,用的的插件是 xlsx,里面的具体方法,感兴趣的去研究一下,基本的样式,配置就不赘述了,也比较简单,我们直接上主食代码实现基本结构用户点击文件上传,将excel的表格已json的格式显示在页
vue如何实现二进制流文件导出excel

目录 vue二进制流文件导出excel 前端代码后端node 关于二进制文件流导出Excel文件的一些坑实现下载效果踩坑 vue二进制流文件导出excel 问了一下其他的后端,他们公司前端是a标签,后端是给了一个地址,a标签或者window.open()都可以实现. 我们公司是后端返回的二进制流文件,实现了一下,亲测可以,没有问题前端代码 <!DOCTYPE html> <html lang="en"> <head> <meta cha
vue使用axios接收流文件的实现

在工作中遇到使用axios接收流文件,遇到了一些问题,整理如下: 在调用接口成功后如图所示: 现在需要调试下axios.js文件统一拦截 // 导出 const headers = response.headers //console.log(headers['content-type']) 将打印的值,也将后台返回的相应头设置成相同的,我的就是'application/octet-stream;charset=UTF-8',然后返回response if (headers['content-t
微信小程序预览二进制流文件的方法

微信小程序将后端接口返回的二进制流PDF 文件在线预览,供大家参考,具体内容如下一.微信小程序的文件系统微信小程序文件系统参考官方文档:微信小程序文档我们主要是把后端接口获取到的pdf二进制流,下载保存到微信的本地用户文件,下载后预览再删掉,因为本地用户文件每个用户只有200M,所以预览后删掉. 二.小程序实现文件预览代码如下(示例): //使用登记牌扫码查询 usequercode() { uni.scanCode({
vue后台返回格式为二进制流进行文件的下载方式

目录后台返回格式为二进制流进行文件的下载结合项目中具体文件使用 vue下载保存二进制文件方法封装:util.js 请求接口方法调用后台返回格式为二进制流进行文件的下载结合项目中封装get请求携带token,进行接收二进制流 export function getHeader() { const token = getToken(); if (token) { return { headers: {
Vue通过Blob对象实现导出Excel功能示例代码

不同的项目有不同的导出需求,有些只导出当前所显示结果页面的表格进入excel,这个时候就有很多插件,比如vue-json-excel或者是Blob.js+Export2Excel.js来实现导出Excel功能.但是有些需求因为数据量太大,成千上万条数据,所以是需要后端拼接,然后输出二进制流文件,然后前端直接下载,这次我们谈谈后者的做法. Blob对象表示一个不可变.原始数据的类文件对象,通常我也叫它二进制流对象.我们可以通过Blob对象实现导出Excel功能,先放上代码: <el-button
Angular利用HTTP POST下载流文件的步骤记录

Angular / Vue HTTP POST下载流文件 HTTP POST 请求流文件转成excel 在使用Angular开发项目时,通常会有下载文件的功能项.一般是后台返回下载地址,通过 <a> 标题或者使用 window 打开下载地址新窗口,浏览器则会识别出流文件进行文件下载. 但是,有时候进行http异步请求,后台返回的并不是下载地址,而是直接返回一个文件流,这时如何使用http请求回来的文件流转换成文件下载? 其实并非Angular框架存地这样的情况,其他PWA如Vue,React甚
Vue项目利用axios请求接口下载excel

本文实例为大家分享了Vue项目利用axios请求接口下载excel的具体代码,供大家参考,具体内容如下据我了解的前端的下载方式有三种,第一种是通过a标签来进行下载,第二种时候通过window.location来下载,第三种是通过请求后台的接口来下载,今天就来记录一下这三种下载方式. 方法一:通过a标签 // href为文件的存储路径或者地址,download为问文件名 <a href="/images/logo.jpg" rel="external nofollow&
vue导出excel文件流中文乱码问题及解决

目录导出excel文件流中文乱码导出excel乱码(锟斤拷唷?锟?:锟斤拷) 导出excel文件流中文乱码解决此方法很多网上的差不多都可以.一下提供简单的方法 loads(){ let data={ userWord:this.dataList.userWord, examId:this.$route.query.id, exportType:this.active, } api.exportUserResult(data).then((res) => { const blob = new
Vue+axios+WebApi+NPOI导出Excel文件实例方法

一.前言项目中前端采用的Element UI 框架, 远程数据请求,使用的是axios,后端接口框架采用的asp.net webapi,数据导出成Excel采用NPOI组件.其业务场景,主要是列表页(如会员信息,订单信息等)表格数据导出,如表格数据进行了条件筛选,则需要将条件传至后端api,筛选数据后,导出成Excel. 思考过前端导出的3种方案: 1.使用location.href 打开接口地址.缺点: 不能传token至后端api, 无法保证接口的安全性校验,并且接口只能是get方式请求.