Exportar tabela ElementUI para o Excel
- adicionar dependência
npm install --save xlsx file-saver
// html代码
<el-button @click="exportExcel">点击导出</el-button>
<el-table :data="tableData" style="width: 100%" id="outTable">
<el-table-column label="序号" type="index" width="50"></el-table-column>
<el-table-column prop="id" label="ID"></el-table-column>
</el-table>
- dependências de importação
import FileSaver from "file-saver";
import XLSX from "xlsx";";
exportExcel() {
var wb = XLSX.utils.table_to_book(document.querySelector("#outTable"));
var wbout = XLSX.write(wb, {
bookType: "xlsx",
bookSST: true,
type: "array"
});
try {
FileSaver.saveAs(
new Blob([wbout], {
type: "application/octet-stream" }),
"SystemLog.xlsx"
);
} catch (e) {
if (typeof console !== "undefined") console.log(e, wbout);
}
return wbout;
},
Envie a string para o arquivo xls percorrendo o json para emenda de string
<html>
<head>
<button onclick='tableToExcel()'>导出</button>
</head>
<body>
<script>
const tableToExcel = () => {
const jsonData = [
{
id:'01',
time:'2023-5-12',
data:'0100'
},
{
id:'02',
time:'2023-5-12',
data:'0100'
},
{
id:'03',
time:'2023-5-12',
data:'0100'
},
{
id:'04',
time:'2023-5-12',
data:'0100'
},
];
let str = `ID,时间,数据\n`;
for(let i = 0 ; i < jsonData.length ; i++ ){
for(let item in jsonData[i]){
str+=`${
jsonData[i][item] + '\t'},`;
}
str+='\n';
}
let uri = 'data:application/vnd.ms-excel;charset=utf-8,\ufeff' + encodeURIComponent(str);
const link = document.createElement("a");
link.href = uri;
link.download = "系统日志.xls";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
</script>
</body>
</html>