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

目录
  • vue二进制流文件导出excel
    • 前端代码
    • 后端node
  • 关于二进制文件流导出Excel文件的一些坑
    • 实现下载效果
    • 踩坑

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出来的数据需要再走一层,而不是直接输出

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

(0)

相关推荐

  • 基于Vue实现Excel解析与导出功能详解

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

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

  • 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

    目录 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方式请求.

随机推荐