js 导出excel文件(含json格式的失败数据处理)
一般来说,导出有2种实现方式:
- 直接放
a
标签里,通过href
属性向后端发送请求导出
<a href="url">导出</a>
很明显的缺点:文件名不正确,是一串字符串。所以需要使用第二种方法。
- 需要进行数据处理的情况:手动
coding
发送请求的代码,将返回的 blob 对象导出。
问题来了:如何导出呢?好像没有思路-_-
好好思考:- 由方法一知:
a
标签可以直接导出。
那么js
应该可以模拟一个a
标签。 -
url
哪里来呢?
createObjectURL可以将blob
对象转换为url
,可以像普通的url
一样使用。 - 最后一个问题:如何导出
excel
格式呢?
MDN
告诉我:用Blob 构造函数声明MIME类型就好。
- 由方法一知:
思路整理好了,一步步实现呗:
this.$axios.get("XXX", {
params,
responseType: "blob",
})
.then((res) => {
let blob = new Blob([res.data], {
type: "application/vnd.ms-excel",
});
let fileName = "导出.xls";
let link = document.createElement("a");
link.href = window.URL.createObjectURL(blob);
link.download = fileName;
link.click();
// 移除url
window.URL.revokeObjectURL(link.href);
//移除标签
document.body.removeChild(link)
})
ps:一个编码好习惯:及时清除已执行完的变量,释放内存。
试了下,可以正确导出了。
正暗自欢喜已解决导出问题时,打开导出的excel
一看:
这啥???401
?这不是接口给的登录提示信息么?而且是json
类型呀?o~o,忘记错误处理了。。。
看了下此刻接口的返回情况:
type
已然变为json
类型,但是data
还是blob
类型,怎么从blob
中提取json
数据呢?
MDN
给了答案:使用FileReader。
那就试一下,完善下上面的代码:
this.$axios.get("XXX", {
params,
responseType: "blob",
}).then((res) => {
if (res.data.type === "application/json") {
// 返回的格式是json类型,转换为json
const reader = new FileReader();
const self = this;
// 读取操作完成时触发
reader.onload = function () {
const resData = this.result && JSON.parse(this.result);
self.$message.error({
showClose: true,
message: (resData && resData.msg) || "导出失败"
});
};
reader.onerror = (event) => {
self.$message.error({
showClose: true,
message: reader.error
});
};
reader.readAsText(res.data); //a text string
} else {
let blob = new Blob([res.data], {
type: "application/vnd.ms-excel",
});
let fileName = "导出.xls";
let link = document.createElement("a");
link.href = window.URL.createObjectURL(blob);
link.download = fileName;
link.click();
// 移除url
window.URL.revokeObjectURL(link.href);
//移除标签
document.body.removeChild(link);
}
});
完美收官!
总结
-
coding
难的是思路,也需要过硬的知识储备。多数时候官网是最佳的学习渠道,多多学习呀! -
coding
不能忘记异常的处理,要多做总结和记录。
发表评论 (审核通过后显示评论):