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与vbscript数据共享
Jan 09 Javascript
js调用activeX获取u盘序列号的代码
Nov 21 Javascript
禁止IE用右键的JS代码
Dec 30 Javascript
jQuery中unbind()方法用法实例
Jan 19 Javascript
JavaScript的String字符串对象常用操作总结
May 26 Javascript
AngularJS过滤器filter用法总结
Dec 13 Javascript
Node.js安装配置图文教程
May 10 Javascript
webpack打包后直接访问页面图片路径错误的解决方法
Jun 17 Javascript
浅谈react前后端同构渲染
Sep 20 Javascript
D3.js实现简洁实用的动态仪表盘的示例
Apr 04 Javascript
AngularJS发送异步Get/Post请求方法
Aug 13 Javascript
详解webpack打包第三方类库的正确姿势
Oct 20 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
ThinkPHP基本的增删查改操作实例教程
2014/08/22 PHP
php实现转换ubb代码的方法
2015/06/18 PHP
javascript 获取页面的高度及滚动条的位置的代码
2010/05/06 Javascript
如何确保JavaScript的执行顺序 之jQuery.html深度分析
2011/03/03 Javascript
用JQuery模仿淘宝的图片放大镜显示效果
2011/09/15 Javascript
javascript倒计时功能实现代码
2012/06/07 Javascript
从jquery的过滤器.filter()方法想到的
2013/09/29 Javascript
jquery选择checked在ie8普通模式下的问题
2014/02/12 Javascript
jQuery实现的超酷苹果风格图标滑出菜单效果代码
2015/09/16 Javascript
基于JS实现PHP的sprintf函数实例
2015/11/14 Javascript
jQuery 限制输入字符串长度
2016/06/20 Javascript
jquery siblings获取同辈元素用法实例分析
2016/07/25 Javascript
checkbox:click事件触发span元素内容改变的方法
2017/09/11 Javascript
浅谈mint-ui loadmore组件注意的问题
2017/11/08 Javascript
JavaScript基础之静态方法和实例方法分析
2018/12/26 Javascript
微信小程序封装自定义弹窗的实现代码
2019/05/08 Javascript
vue中keep-alive,include的缓存问题
2019/11/26 Javascript
jquery实现直播视频弹幕效果
2020/02/25 jQuery
微信小程序pinker组件使用实现自动相减日期
2020/05/07 Javascript
Vue切换div显示隐藏,多选,单选代码解析
2020/07/14 Javascript
Python爬虫框架Scrapy安装使用步骤
2014/04/01 Python
python获取list下标及其值的简单方法
2016/09/12 Python
Python在不同目录下导入模块的实现方法
2017/10/27 Python
使用Scrapy爬取动态数据
2018/10/21 Python
解决pycharm运行程序出现卡住scanning files to index索引的问题
2019/06/27 Python
Python实现栈和队列的简单操作方法示例
2019/11/29 Python
python pandas移动窗口函数rolling的用法
2020/02/29 Python
css3强大的动画效果animate使用说明及浏览器兼容介绍
2013/01/09 HTML / CSS
八年级英语教学反思
2014/01/09 职场文书
化学专业大学生职业生涯规划范文
2014/09/13 职场文书
合同权益转让协议书模板
2014/11/18 职场文书
外贸业务员岗位职责
2015/02/13 职场文书
父亲节感言
2015/08/03 职场文书
企业廉洁教育心得体会
2016/01/20 职场文书
《月球之谜》教学反思
2016/02/20 职场文书
导游词之山西祁县乔家大院
2019/10/14 职场文书