Vue如何通过团对象实现导出Excel功能 - 行业资讯 - 肥雀云

　　介绍

这篇文章主要讲解了Vue如何通过团对象实现导出Excel功能,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。

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

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

& lt; el-button @click=癳xportExcel()“在导出& lt;/el-button> 　　　　& lt; script> 　　方法:{ 　　exportExcel () { 　　var params={ 　　XX: XX//额外需要携带的请求体　　} 　　美元。axios.get (& # 39;/XX/XX # 39;, { 　　参数:参数, 　　responseType: & # 39;团# 39;//首先设置responseType字段格式为blob 　　})。然后(res=比;{ 　　console.log (res); 　　让blob=new blob ((res),{类型:“应用程序/vnd.openxmlformats-officedocument.spreadsheetml.sheet; charset=UTF-8"});//为blob设置文件类型,这里以.xlsx为例　　让url=window.URL.createObjectURL (blob);//创建一个临时的url指向团对象　　让一个=document.createElement (“a"); 　　一个。href=https://www.yisu.com/zixun/url; 　　a.click ();//释放这个临时的对象的url 　　window.URL.revokeObjectURL (url); 　　}）; 　　}，　　} 　　

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

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

Vue如何通过团对象实现导出Excel功能

图1控制台输出的团对象

后端最好也要配置的响应头的内容类型为对应的类型,所图2所示。

Vue如何通过团对象实现导出Excel功能

图2后端设置了响应头相对应的内容类型

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

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

. csv - - - - - - - - - - - - - - - -文本/csv

jpeg/jpg - - - - - -图像/jpeg

. png - - - - - - - - - - - -图像/png

. rar - - - - - - - - - - - - - - - -应用程序/x-rar-compressed

. doc - - - - - - - - - - - -而且还/msword

docx - - - - - - - - - - -而且还/vnd.openxmlformats-officedocument.wordprocessingml。文档

xls - - - - - - - - - - - - - - - -应用程序/vnd.ms-excel

.xlsx - - - - - - - - - - - -应用程序/vnd.openxmlformats-officedocument.spreadsheetml。表

. zip - - - - - - - - - - - - - - - -应用程序/zip

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

Vue如何通过团对象实现导出Excel功能