依存関係をインストールする
npm install ファイルセーバー xlsx -S
次に、必要なページに依存パッケージを導入します
「ファイルセーバー」から FileSaver をインポートします。 XLSX を「xlsx」からインポートします。
方法 1:
// 导出
handle_export() {
var xlsxParam = {
raw: true
}; //转换成excel时,使用原始的格式,这样导出的时候数字过长不会变成科学计数法
let workbook = XLSX.utils.book_new();
let ws1 = XLSX.utils.table_to_sheet(document.querySelector('#table1'), xlsxParam);
// 这里可以添加多个sheet页
XLSX.utils.book_append_sheet(workbook, ws1, 'table1');
let ws2 = XLSX.utils.table_to_sheet(document.querySelector('#table2'), xlsxParam);
XLSX.utils.book_append_sheet(workbook, ws2, 'table2');
let ws3 = XLSX.utils.table_to_sheet(document.querySelector('#table3'), xlsxParam);
XLSX.utils.book_append_sheet(workbook, ws3, 'table3');
let wbout = XLSX.write(workbook, {
bookType: 'xlsx',
bookSST: true,
type: 'array'
});
try {
FileSaver.saveAs(
new Blob([wbout], {
type: 'application/octet-stream;charset=utf-8"'
}), '多sheet演示.xlsx');
} catch (e) {
if (typeof console !== 'undefined') console.log(e, wbOut);
}
return wbout;
}
方法 2:
mydncxd(){
let table = document.getElementById("mydncxd");
let table1 = document.getElementById("bgxxkx");
var xlsxParam = { raw: true } //设置excel为文本格式解决数值导出后自动转换为科学计数法
let worksheet = XLSX.utils.table_to_sheet(table,xlsxParam);
let worksheet1 = XLSX.utils.table_to_sheet(table1,xlsxParam);
let workbook = XLSX.utils.book_new();
let wscols = [ // table每列不同宽度px
{ wch: 20 },
{ wch: 50 },
{ wch: 20 },
{ wch: 50 },
];
// workbook.SheetNames[0]获取到到是文件里的到第一个表格
worksheet["!cols"] = wscols;
let wsrows = [{ hpx: 20 }]; // 每行固定高度px
for (let i = 0; i <= this.total; i++) { // total 列表条数
wsrows.push({ hpx: 20 });
}
worksheet["!rows"] = wsrows;
let wscols1 = [ // table1每列不同宽度px
{ wch: 20 },
{ wch: 20 },
{ wch: 50 },
{ wch: 50 },
];
worksheet1["!cols"] = wscols1;
worksheet1["!rows"] = wsrows;
// 这里可以添加多个sheet页
XLSX.utils.book_append_sheet(workbook, worksheet, '企业基本信息');
XLSX.utils.book_append_sheet(workbook, worksheet1, '变更信息');
try {
XLSX.writeFile(workbook, '变更通知书.xlsx'); // time_date 所选日期
} catch (e) {
console.log(e, workbook);
}
},
レンダリング: