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


Posted in Javascript onJuly 31, 2020

不同的项目有不同的导出需求,有些只导出当前所显示结果页面的表格进入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所示。

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

图1 控制台输出的Blob对象

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

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

图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所示:

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

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

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

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

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

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

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

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

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

总结

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

Javascript 相关文章推荐
深入理解JavaScript作用域和作用域链
Oct 21 Javascript
jquery插件unobtrusive实现片段式加载
Jun 15 Javascript
JavaScript计算某一天是星期几的方法
Aug 05 Javascript
浅析JSONP技术原理及实现
Jun 08 Javascript
jQuery中$.ajax()方法参数解析
Oct 22 Javascript
Angular2 组件间通过@Input @Output通讯示例
Aug 24 Javascript
EasyUI实现下拉框多选功能
Nov 07 Javascript
JS使用setInterval实现的简单计时器功能示例
Apr 19 Javascript
angular 实现下拉列表组件的示例代码
Mar 09 Javascript
浅谈Webpack多页应用HMR卡住问题
Apr 24 Javascript
webpack + vue 打包生成公共配置文件(域名) 方便动态修改
Aug 29 Javascript
layui table 表格上添加日期控件的两种方法
Sep 28 Javascript
Vue.js中使用Vuex实现组件数据共享案例
Jul 31 #Javascript
原生JS实现记忆翻牌游戏
Jul 31 #Javascript
js实现跳一跳小游戏
Jul 31 #Javascript
js实现翻牌小游戏
Jul 31 #Javascript
Vue 请求传公共参数的操作
Jul 31 #Javascript
vue2.0 解决抽取公用js的问题
Jul 31 #Javascript
vue实现公共方法抽离
Jul 31 #Javascript
You might like
IIS环境下快速安装、配置和调试PHP5.2.0
2006/12/17 PHP
php curl 上传文件代码实例
2015/04/27 PHP
PHP读MYSQL中文乱码的快速解决方法
2016/10/01 PHP
浅谈PHP安全防护之Web攻击
2017/01/03 PHP
Laravel中的Auth模块详解
2017/08/17 PHP
PHP使用PhpSpreadsheet操作Excel实例详解
2020/03/26 PHP
JavaScript经典效果集锦
2010/07/06 Javascript
jQuery取得设置清空select选择的文本与值
2014/07/08 Javascript
使用js dom和jquery分别实现简单增删改
2014/09/11 Javascript
js中跨域方法原理详解
2015/07/19 Javascript
JS密码生成与强度检测完整实例(附demo源码下载)
2016/04/06 Javascript
浅谈JavaScript的内置对象和浏览器对象
2016/06/03 Javascript
在html中引入外部js文件,并调用带参函数的方法
2016/10/31 Javascript
最常见和最有用的字符串相关的方法详解
2017/02/06 Javascript
详解webpack-dev-server的简单使用
2018/04/02 Javascript
详解Vue实战指南之依赖注入(provide/inject)
2018/11/13 Javascript
微信小程序生成海报分享朋友圈的实现方法
2019/05/06 Javascript
layui 数据表格 根据值(1=业务,2=机构)显示中文名称示例
2019/10/26 Javascript
vue组件实现移动端九宫格转盘抽奖
2020/10/16 Javascript
[54:17]DOTA2-DPC中国联赛定级赛 RNG vs iG BO3第二场 1月10日
2021/03/11 DOTA
python实现根据图标提取分类应用程序实例
2014/09/28 Python
python实现文件快照加密保护的方法
2015/06/30 Python
编写Python爬虫抓取豆瓣电影TOP100及用户头像的方法
2016/01/20 Python
Python发送form-data请求及拼接form-data内容的方法
2016/03/05 Python
tensorflow获取变量维度信息
2018/03/10 Python
django 使用 request 获取浏览器发送的参数示例代码
2018/06/11 Python
python中plt.imshow与cv2.imshow显示颜色问题
2020/07/16 Python
如何使用python-opencv批量生成带噪点噪线的数字验证码
2020/12/21 Python
python用700行代码实现http客户端
2021/01/14 Python
Fossil德国官网:化石手表、手袋、珠宝及配件
2019/12/07 全球购物
台湾专柜女包:KINAZ
2019/12/26 全球购物
CAD制图设计师自荐信
2014/01/29 职场文书
《英英学古诗》教学反思
2014/04/11 职场文书
科长竞争上岗演讲稿
2014/05/12 职场文书
2015年第十五个全民国防教育日宣传活动方案
2015/05/06 职场文书
英语投诉信范文
2015/07/03 职场文书