关于Vue项目中 table 表格导出 Excel 的几种方法
第一种
这种方法需要安装插件 FileSaver 和 XLSX
JS
Export(){ //导出Excel
let et = XLSX.utils.table_to_book(
document.getElementById("Table1")
); //此处传入table的DOM节点
let etout = XLSX.write(et, {
bookType: "xlsx",
bookSST: true,
type: "array"
});
try {
FileSaver.saveAs(
new Blob([etout], {
type: "application/octet-stream"
}),
"XX清单.xlsx"
); //trade-publish.xlsx 为导出的文件名
} catch (e) {
console.log(e, etout);
}
return etout;
},
第二种
这种方法需要先拿到数据，然后对需要导出的字段写出来。这种方法比较简单，但是不能共用。如果要导出的地方比较多，就需要写多次。
let th = [
"序号",
"名称",
"所需时间",
"状态",
"数量",
];
let value = [
1,
"Name",
"Time"
"State",
"Amount",
];
// 拿到要导出的数据
let data = this.listsAll.map((v) =>
value.map((k) => v[k])
);
data.forEach((el, index) => {
//对表格数据内容修改
el[0] = index + 1;
el[3] = this.$options.filters["State"](el[3]);
});
const [fileName, fileType, sheetName] = [
"XX清单",
"xlsx",
"XX清单",
];
this.$toExcel({
th,
data,
fileName,
fileType,
sheetName,
});
第三种
这种方法只需要定义表格的id,和name,就可以直接使用，可以写成一个公共方法。但是有时候表格里的数字比较长一些，这种方法会默认把表格里的字变成科学计数法。
Export(id, name) {
//获取表格
var exportFileContent = document.getElementById("" + id + "")
.outerHTML;
//设置格式为Excel，表格内容通过btoa转化为base64，此方法只在文件较小时使用(小于1M)
//exportFileContent=window.btoa(unescape(encodeURIComponent(exportFileContent)));
//var link = "data:"+MIMEType+";base64," + exportFileContent;
//使用Blob
console.log("blob:", exportFileContent);
var blob = new Blob([exportFileContent], {
type: "text/plain;charset=utf-8",
}); //解决中文乱码问题
blob = new Blob([String.fromCharCode(0xfeff), blob], {
type: blob.type,
});
//设置链接
var link = window.URL.createObjectURL(blob);
var a = document.createElement("a"); //创建a标签
a.download = name + ".xls"; //设置被下载的超链接目标（文件名）
a.href = link; //设置a标签的链接
document.body.appendChild(a); //a标签添加到页面
a.click(); //设置a标签触发单击事件
document.body.removeChild(a); //移除a标签
第四种
因为用第三种方法，有一次导出的数据在excel中变成了科学计数法，所以这种方法就很好的解决了 数字变成科学计数法的问题，把数据都转换成了文本形式。
Export(id,name){
var uri = "data:application/vnd.ms-excel;base64,",
template =
'<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>',
base64 = function (s) {
return window.btoa(unescape(encodeURIComponent(s)));
},
format = function (s, c) {
return s.replace(/{(\w+)}/g, function (m, p) {
return c[p];
});
};
var table = document.getElementById("tables");
//console打印出table.innerHTML出则是table的页面代码
//根据正则表达式，把style='mso-number-format:"\@"' 塞入td中,将数据转成String
table.innerHTML = table.innerHTML.replace(
/<td/g,
"<td STYLE='MSO-NUMBER-FORMAT:\\@'"
);
var ctx = {
worksheet: name || "Worksheet",
table: table.innerHTML,
}; //此时的innerHTML数据可以自己自定义 比如json转化 只要值要数据符合即可
var link = document.createElement("A");
link.href = uri + base64(format(template, ctx));
link.download = name + ".xls";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
目前自己用的就这几种方法，大家多多补充哦！