方法一:Excel 在 前端命名
通过请求接口,发送请求。 基本像下面这个就可以导出实现了
exportExcel() {
this.$axios({
method: "",
url: "XXXXX",
data: {},
//下面这二个必须带上
headers: {
'Content-Type': "application/json;charset=UTF-8"
},
responseType: "blob"
}).then(res => {
console.log(res,'res')
const blob = new Blob([res.data]);
let url = window.URL.createObjectURL(blob);
const link = document.createElement("a");
link.href = url;
link.download = "填报情况统计列表" + this.timeFilter() + ".xlsx"; //命名Excel名字
link.click();
URL.revokeObjectURL(url);
}).catch((err) => {
this.$message({
message: err.message,
type: 'error',
})
})
},
方法二:
只导出当前所显示结果页面的表格进入excel,就用插件,比如vue-json-excel或者是Blob.js+Export2Excel.js来实现导出Excel功能。
但是有些需求因为数据量太大,成千上万条数据,所以是需要后端拼接,然后输出二进制流文件,然后前端直接下载,这次我们谈谈后者的做法。
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.ms-excel" });// 为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);
});
},
'responseType'表示的是服务器响应的数据类型,可以是'arrayBuffer'、'blob'、'document'、'json'、'txt'、'stream',默认为json。axios官方文档地址: https://www.kancloud.cn/yunye/axios/234845(axios请求配置章节)。
所以我们接收后台传给前端的二进制流之前需要先设置responseType为blob,否则默认会以json获取,下载下来的文件打开会提示文件已损坏。控制台输出的可以看到是个正确的Blob对象,这就说明我们的配置是对的。
后端最好也要配置response头的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
一般来说,这样就可以实现下载的功能了。