Vue通过Blob对象实现导出Excel功能示例代码

  不同的项目有不同的导出需求,有些只导出当前所显示结果页面的表格进入excel,这个时候就有很多插件,比如vue-json-excel或者是Blob.js+Export2Excel.js来实现导出Excel功能。但是有些需求因为数据量太大,成千上万条数据,所以是需要后端拼接,然后输出二进制流文件,然后前端直接下载,这次我们谈谈后者的做法。

  Blob对象表示一个不可变、原始数据的类文件对象,通常我也叫它二进制流对象。我们可以通过Blob对象实现导出Excel功能,先放上代码:

<el-button @click="exportExcel()">导出</el-button>

<script>
methods: {
 exportExcel(){
  var params={
  XX:xx//额外需要携带的请求体
  }
  this.$axios.get('/XX/XX',{
  params: params,
  responseType: 'blob' //首先设置responseType字段格式为 blob
  }).then(res => {
  console.log(res);
  let blob = new Blob([res], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8"}); // 为blob设置文件类型,这里以.xlsx为例
  let url = window.URL.createObjectURL(blob); // 创建一个临时的url指向blob对象
  let a = document.createElement("a");
  a.href = url;
  a.click();
  // 释放这个临时的对象url
  window.URL.revokeObjectURL(url);
  });
 },
 }
</script>

  'responseType'表示的是服务器响应的数据类型,可以是'arrayBuffer'、'blob'、'document'、'json'、'txt'、'stream',默认为json。axios官方文档地址:https://www.kancloud.cn/yunye/axios/234845(axios请求配置章节)。

  所以我们接收后台传给前端的二进制流之前需要先设置responseType为blob,否则默认会以json获取,下载下来的文件打开会提示文件已损坏。控制台输出的可以看到是个正确的Blob对象,这就说明我们的配置是对的,如图1所示。

图1 控制台输出的Blob对象

  后端最好也要配置response头的content-type为对应的类型,所图2所示。

图2 后端设置了响应头相对应的content-type

  然后,需要给这个Blob对象设置一个type,这个type表明改Blob对象所包含数据的MIME类型。如果类型未知,则该值为空字符串。这里给出几个常用文件格式的MIME类型:(详细的可参考WebAPI官方文档:https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types

扩展名----------MIME类型

  .csv--------------text/csv

  .jpeg/.jpg-------image/jpeg

  .png-------------image/png

  .rar--------------application/x-rar-compressed

  .doc-------------application/msword

  .docx-----------application/vnd.openxmlformats-officedocument.wordprocessingml.document

  .xls--------------application/vnd.ms-excel

.xlsx------------application/vnd.openxmlformats-officedocument.spreadsheetml.sheet

  .zip--------------application/zip

  在正常的导出请求之后可以看到又发了一个新的blob请求,其本质是到这个地址下载文件,如图3所示:

图3 创建一个临时的url指向blob对象

  一般来说,这样就可以实现下载的功能了。

  这里提点题外话,谷歌浏览器下载设置默认为浏览器下载默认路径,也就不会弹出文件框,谷歌浏览器下载文件框如图4所示,也就没有了所谓的自定义保存路径和自定义文件名,如图5所示,在浏览器底部会有下载提示。

图4谷歌浏览器下载文件框

图5 谷歌浏览器下载会在屏幕底部显示

如果想要有下载文件框,请在设置->高级->下载内容->下载前询问每个文件的保存位置中设置为启用。

总结

到此这篇关于Vue通过Blob对象实现导出Excel功能的文章就介绍到这了,更多相关vue 通过blob对象导出excel内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2020-07-31

Vue2.0实现将页面中表格数据导出excel的实例

这两天学习了Vue.js 感觉知识点挺多的,所以,今天添加一点小笔记. 项目中将后台返回的数据v-for到表格中,然后需要将这个表格导出为EXCEL 只说怎么做. 一.需要安装三个依赖: npm install -S file-saver xlsx npm install -D script-loader 二.项目中新建一个文件夹:(vendor---名字任取) 里面放置两个文件Blob.js和 Export2Excel.js. Blob.js和 Export2Excel.js文件下载地址:E

Vue实现导出excel表格功能

引言: 最近使用vue在做一个后台系统,技术栈 vue + iView ,在页面中生成表格后, iView可以实现表格的导出,不过只能导出csv格式的,并不适合项目需求. 如果想要导出Excel 在src目录下创建一个文件(vendor)进入 Blob.js 和 Export2Excel.js npm install -S file-saver 用来生成文件的web应用程序 npm install -S xlsx 电子表格格式的解析器 npm install -D script-loader 将

Vue利用Blob下载原生二进制数组文件

本文实例为大家分享了Vue利用Blob下载原生二进制数组文件的具体代码,供大家参考,具体内容如下 在服务端推送过来的二进制数组(JSON格式),在前端要处理成JS原生数组以后才能做成Blob,有两个地方要注意(详细注释),代码如下: Vue.prototype.$downloadFile = (filename, data) => { if (!data) return; let arr8 = Uint8Array.from(data); //!!!注意1:应根据数据的类型选择适当的JS原生数组

Vue结合后台导入导出Excel问题详解

最近Vue项目中用到了导入导出功能,在网上搜索了一番之后,决定采用Blob方式,这也是大家推荐的一种的方式,特此做下记录. 导出Excel功能 这里不谈别人怎么实现的,我是从后台生成了Excel流文件返回给前端的. 下面具体看一下后台的代码: /** * 批量导出用户 * @param condition * @param response */ @PostMapping("/exportUser") public void exportUser(@RequestBody UserQu

Vue导出json数据到Excel电子表格的示例

网上看了很多文档感觉都不全,这里写一篇完整的详细教程. 一.安装依赖(前面基本一样) npm install file-saver --save npm install xlsx --save npm install script-loader --save-dev 二.下载两个所需要的js文件Blob.js和 Export2Excel.js. 这里贴下下载地址: Export2Exce_jb51.rar 三.src目录下新建vendor文件夹,将Blob.js和 Export2Excel.js

vue2.0 + element UI 中 el-table 数据导出Excel的方法

1.安装相关依赖 主要是两个依赖 npm install --save xlsx file-saver 如果想详细看着两个插件使用,请移步github. https://github.com/SheetJS/js-xlsx https://github.com/eligrey/FileSaver.js 2.组件里头引入 import FileSaver from 'file-saver' import XLSX from 'xlsx' 3.组件methods里写一个方法 exportExcel

详解vue2.0的Element UI的表格table列时间戳格式化

这两天学习了vue2.0的Element UI的表格table列时间戳格式化,所以,今天添加一点小笔记. 表格属性 <el-table :data="tableData" v-loading.body="loading" border @selection-change="selectionChange" style="width: 100%"> <el-table-column prop="cre

vue2.0父子组件及非父子组件之间的通信方法

1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg"></child>//这里必须要用 - 代替驼峰 </parent> data(){ return { msg: [1,2,3] }; } 子组件通过props来接收数据: 方式1: props: ['childMsg'] 方式2 : props: { childMsg: Arr

PHP将数据导出Excel表中的实例(投机型)

1.简介 如何利用最简单粗糙暴力的方法将数据写入Excel文件中呢? 因为ms word和excel的文档都支持html文本格式,因此我们可以基于这个原理采用html文本格式进行数据的输出. 在html中,我们只需要将数据照着所想要的顺序放进相应的html表格中即可. 我们采用PHP进行数据获取整理以及构造相应的html文本,最后通过字节流输出下载到用户本地. 2.代码 直接上代码,这是一个很简单的程序,里面都带有注释了. ExportExcel.class.php文件 <?php class

element ui 表格动态列显示空白bug 修复方法

在使用element ui框架进行项目开发的时候,表格的列是根据后台数据动态生成的,但是发现在列刷新的视乎,会出现表格完全空白,没有显示的情况,经过自己编写demo发现,在增加列的情况下表格正常,但是一旦表格列减少时就会出问题,对element底层代码进行调试发现,在node_modules/element-ui/lib/elementui.common.js 中的一个函数. removeColumn: function removeColumn(states, column) { var _c

python pandas中DataFrame类型数据操作函数的方法

python数据分析工具pandas中DataFrame和Series作为主要的数据结构. 本文主要是介绍如何对DataFrame数据进行操作并结合一个实例测试操作函数. 1)查看DataFrame数据及属性 df_obj = DataFrame() #创建DataFrame对象 df_obj.dtypes #查看各行的数据格式 df_obj['列名'].astype(int)#转换某列的数据类型 df_obj.head() #查看前几行的数据,默认前5行 df_obj.tail() #查看后几

使用pandas中的DataFrame数据绘制柱状图的方法

折线图是数据分析的一种手段,但是有时候我们也需要柱状图进行不同数据的可视化量化对比.使用pandas的DataFrame方法进行柱状图的绘制也是比较方便的. 把之前的折线图绘制代码修改一下如下: from pandas import Series,DataFrame from numpy.random import randn import numpy as np import matplotlib.pyplot as plt df = DataFrame(abs(randn(10,5)),co

Yii2.0 Basic代码中路由链接被转义的处理方法

按照惯例,说下运行环境和各版本编号 OS:Windows10 Apache:2.4 MySQL:5.7.15 PHP:7.0.11 问题描述:按照官网的提示,下载了basic版本的代码,配置了虚拟域名,打开浏览器可以访问了(具体过程略). 但是,在点击链接地址时会发现,链接地址被转义了,"/"变成了"%2F". 查找代码,一步一步找. 找到最后yii-v2.0.9-basic\vendor\yiisoft\yii2\web\UrlManager.php 第371行,

element ui里dialog关闭后清除验证条件方法

关闭dialog触发事件 //vue <!--添加用户dialog begin--> <el-dialog title="编辑用户" :visible.sync="dialogFormVisible" custom-class="editDialog" :close-on-click-modal="false" :before-close = "cleanContent" :show-cl

element UI upload组件上传附件格式限制方法

如下所示: <el-upload :action="uploadUrl" ref="upload" :multiple="false" :on-change="fileChange" :before-upload="beforeUpload" :on-success="handleAvatarSuccess" :on-preview="file_click" c