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 相关文章推荐
JQuery+JS实现仿百度搜索结果中关键字变色效果
Aug 02 Javascript
jQuery-serialize()输出序列化form表单值的方法
Dec 26 Javascript
jQuery实现的一个tab切换效果内部还嵌有切换
Aug 10 Javascript
JavaScript实现点击文字切换登录窗口的方法
May 11 Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
Jan 27 Javascript
AngularJs验证重复密码的方法(两种)
Nov 25 Javascript
详解Angular的数据显示优化处理
Dec 26 Javascript
使用JavaScript实现alert的实例代码
Jul 06 Javascript
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
分析javascript中9 个常见错误阻碍你进步
Sep 18 Javascript
jQuery实现鼠标滑动切换图片
May 27 jQuery
Vue(定时器)解决mounted不能获取到data中的数据问题
Jul 30 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
php minixml详解
2008/07/19 PHP
PHP实现的数独求解问题示例
2017/04/18 PHP
PHP实现websocket通信的方法示例
2018/08/28 PHP
prototype 的说明 js类
2006/09/07 Javascript
JavaScript中的Location地址对象
2008/01/16 Javascript
js 编写规范
2010/03/03 Javascript
客户端 使用XML DOM加载json数据的方法
2010/09/28 Javascript
HTML DOM的nodeType值介绍
2011/03/31 Javascript
js中一维数组和二位数组中的几个问题示例说明
2014/07/17 Javascript
js实现的二级横向菜单条实例
2015/08/22 Javascript
jquery UI Datepicker时间控件的使用方法(加强版)
2015/11/07 Javascript
javascript基础知识讲解
2017/01/11 Javascript
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
2017/03/15 Javascript
vuex + axios 做登录验证 并且保存登录状态的实例
2018/09/16 Javascript
mpvue+vant app搭建微信小程序的方法步骤
2019/02/11 Javascript
Vue2(三)实现子菜单展开收缩,带动画效果实现方法
2019/04/28 Javascript
vue设置导航栏、侧边栏为公共页面的例子
2019/11/01 Javascript
Vue组件生命周期运行原理解析
2020/11/25 Vue.js
[29:10]Ti4 冒泡赛第二天 NEWBEE vs Titan 3
2014/07/15 DOTA
python处理中文编码和判断编码示例
2014/02/26 Python
使用SAE部署Python运行环境的教程
2015/05/05 Python
Python设计模式之桥接模式原理与用法实例分析
2019/01/10 Python
python opencv 读取本地视频文件 修改ffmpeg的方法
2019/01/26 Python
html5 canvas 简单画板实现代码
2012/01/05 HTML / CSS
澳大利亚墨尔本的在线时装店:LORETA
2018/09/14 全球购物
新闻记者个人求职的自我评价
2013/11/28 职场文书
公司董事长职责
2013/12/12 职场文书
大学生求职自荐信
2013/12/12 职场文书
电子商务个人自荐信
2013/12/12 职场文书
毕业生大学生活自我总结
2014/01/31 职场文书
事业单位分类改革实施方案
2014/03/21 职场文书
政协委员个人总结
2015/03/03 职场文书
乡镇司法所2015年度工作总结
2015/10/14 职场文书
使用nginx动态转换图片大小生成缩略图
2021/03/31 Servers
javascript数组includes、reduce的基本使用
2021/07/02 Javascript
sql通过日期判断年龄函数的示例代码
2021/07/16 SQL Server