最近在一个项目中遇到了要前端来对表格数据进行导入和导出相关的操作。然后第一印象就是要到网上找个比较靠谱而且使用多的npm插件来用用。找了许久,发现了几款不错的插件以及一些原生的方式,现在记录下来。
关于js原生导出功能
在常规的开发中我们一旦遇到相关的功能实现首先第一个印象就是去找个对应的插件来实现这个功能,但这样往往会让我们失去了解这个功能原理的机会,因此如果有必要还是可以去了解了解相关的原生实现方式。这里推荐几篇文章。
1、https://blog.youkuaiyun.com/hhzzcc_/article/details/80419396
2、https://blog.youkuaiyun.com/aa122273328/article/details/50388673
3、https://www.cnblogs.com/SRH151219/p/11076290.html
推荐插件
第一款
exceljs:https://github.com/exceljs/exceljs
这款插件通常用于后端基于nodeJs开发的服务上,其内容也更适用后台,网上找的文章基本都是后台相关的使用方式。但是通常来讲这种npm能在nodejs中使用在前端也应该能使用的,但我觉得这个插件在前端使用起来麻烦,因此不去详细了解了,仅找了几篇使用文章了解了下。如果有需要可以去git上查看中文文档使用。
1、https://www.jianshu.com/p/0f6a338c54f4
2、https://blog.youkuaiyun.com/m0_38060839/article/details/86469404
第二款
vue-json-excel:https://github.com/jecovier/vue-json-excel
这款看名字就知道是以vue的语法写的,但是其知名度以及相关的接口说明不是特别的友好,但是参考网上的网友门的文档倒是非常的不错。如果内容比较简单,可以尝试使用这个
1、https://blog.youkuaiyun.com/qq_42313028/article/details/103069876
2、https://www.cnblogs.com/gggggggxin/p/11982436.html
3、https://blog.youkuaiyun.com/weixin_44990295/article/details/109633036
第三款(推荐)
sheetjs(又叫xlsx或者jsxlsx):https://github.com/SheetJS/sheetjs
这款是比较常用的前端导入导出插件,也是一款比较成熟的插件,有好几种版本,但是其普通的免费版本就已经足够前端使用了。(虽然文档是英文的)
首先来个优秀的使用文章。
https://www.cnblogs.com/liuxianan/p/js-excel.html
文章讲述的功能基本满足前端导入导出功能所需了,但如果需要更复杂的功能,可以尝试去git上找找相关api内容,然后拿过来使用。
参考阅读文章:
1、https://blog.youkuaiyun.com/tian_i/article/details/84327329
2、https://www.jianshu.com/p/c41730e48c31
补充:
1、xlsx的引用
npm 之后在node_modules中找到xlsx文件并在dist文件中找到xlsx.full.min.js然后复制出来放在public中,并且在index.html中使用script引用
2、三个方法的代码以及json_to_sheet的使用,即[{a:x1},{a:x2}]这种数据格式的导出方式
handleExport() {
// saveCheckList就是一个需要导出的数据的数组对象类似于[{a:x1},{a:x2}]
// 导出的内容,即第二行开始的所有数据
let aoa = this.saveCheckList.map((item) => {
return {
产品编号: item.ebIds,
产品名称: item.ebName,
产品型号: item.ebModelName,
批次: item.ebBatch,
配置传感器: item.ebmSensor,
是否激活: item.ebActivated,
是否过期: item.ebValid
};
});
// 导出的标题,即第一行数据
let aoaHeader = [
"产品编号",
"产品名称",
"产品型号",
"批次",
"配置传感器",
"是否激活",
"是否过期",
];
// index.html引入了文件XLSX就能找到,更多接口查看官方文档
var sheet = XLSX.utils.json_to_sheet(aoa, { header: aoaHeader });
this.openDownloadDialog(this.sheet2blob(sheet), "应急包数据.xlsx");
},
/**
* 通用的打开下载对话框方法,没有测试过具体兼容性
* @param url 下载地址,也可以是一个blob对象,必选
* @param saveName 保存文件名,可选
*/
openDownloadDialog(url, saveName) {
if (typeof url == "object" && url instanceof Blob) {
url = URL.createObjectURL(url); // 创建blob地址
}
var aLink = document.createElement("a");
aLink.href = url;
aLink.download = saveName || ""; // HTML5新增的属性,指定保存文件名,可以不要后缀,注意,file:///模式下不会生效
var event;
if (window.MouseEvent) event = new MouseEvent("click");
else {
event = document.createEvent("MouseEvents");
event.initMouseEvent(
"click",
true,
false,
window,
0,
0,
0,
0,
0,
false,
false,
false,
false,
0,
null
);
}
aLink.dispatchEvent(event);
},
// 将一个sheet转成最终的excel文件的blob对象,然后利用URL.createObjectURL下载
sheet2blob(sheet, sheetName) {
sheetName = sheetName || "sheet1";
var workbook = {
SheetNames: [sheetName],
Sheets: {},
};
workbook.Sheets[sheetName] = sheet;
// 生成excel的配置项
var wopts = {
bookType: "xlsx", // 要生成的文件类型
bookSST: false, // 是否生成Shared String Table,官方解释是,如果开启生成速度会下降,但在低版本IOS设备上有更好的兼容性
type: "binary",
};
var wbout = XLSX.write(workbook, wopts);
var blob = new Blob([s2ab(wbout)], { type: "application/octet-stream" });
// 字符串转ArrayBuffer
function s2ab(s) {
var buf = new ArrayBuffer(s.length);
var view = new Uint8Array(buf);
for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
return buf;
}
return blob;
},