1,首先用到了xlsx这个包,在项目中引入这个包。
npm i xlsx
//在项目中引入
import * as XLSX from "xlsx";
2,接下来是函数的封装。
// 将一个sheet转成最终的excel文件的blob对象,然后利用URL.createObjectURL下载
function sheet2blob(sheets, sheetName) {
sheetName = sheetName || "sheet1";
// const workbook:XLSX.WorkBook = { Sheets: {'矩阵': worksheet1, '列表': worksheet2}, SheetNames: ['矩阵', '列表']}
let workbook = {
SheetNames: sheetName,
Sheets: sheets,
};
// workbook.Sheets[sheetName] = sheet;
// 生成excel的配置项
let wopts = {
bookType: "xlsx", // 要生成的文件类型
bookSST: false, // 是否生成Shared String Table
type: "binary",
};
let wbout = XLSX.write(workbook, <any>wopts);
let blob = new Blob([s2ab(wbout)], { type: "application/octet-stream" });
// 字符串转ArrayBuffer
function s2ab(s) {
let buf = new ArrayBuffer(s.length);
let view = new Uint8Array(buf);
for (let i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
return buf;
}
return blob;
}
/**
* @param url 下载地址,也可以是一个blob对象,必选
* @param saveName 保存文件名,可选
*/
function openDownloadDialog(url:string, saveName:string) {
if (typeof url == "object" && url instanceof Blob) {
url = URL.createObjectURL(url); // 创建blob地址
}
let aLink = document.createElement("a");
aLink.href = url;
aLink.download = saveName || ""; // HTML5新增的属性,指定保存文件名,可以不要后缀,注意,file:///模式下不会生效
let 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);
}
/**
* @param csv key:表名 value:表内容
* @param fileName 文件名
*/
function exportFile(csv: { [key: string]: (number|string|null|undefined|boolean|symbol)[][] }, fileName: string) {
let sheetNames = [];
let sheets = {};
for (let sheetName in csv) {
sheetNames.push(sheetName);
sheets[sheetName] = XLSX.utils.aoa_to_sheet(csv[sheetName]);
}
openDownloadDialog(
sheet2blob(sheets, sheetNames),
`${fileName}.xlsx`
);
}
结尾(作者说会废话,可不看):简简单单,不懂的可以看看文档,本人也是看的文档。