项目中用到前端导入后生成一个表格,导出做的纯前端;
用到的是XLSX
安装 npm install xlsx
页面中引用 import * as XLSX from 'xlsx'
<el-button size="mini" style="margin-left:10px;" :loading="exportLoading"
@click="exportToExcel('发票',tableData1)" icon="el-icon-upload2" type="warning" plain>导出
</el-button>
exportToExcel(name, data) {
// 将 JSON 数据转成工作表
const ws = XLSX.utils.json_to_sheet(data);
// 设置列宽(动态计算)
const columnWidths = data[0] ? Object.keys(data[0]).map(key => ({
wpx: Math.max(...data.map(row => (row[key] || '').toString().length)) * 10
})) : [];
// 设置工作表列宽
ws['!cols'] = columnWidths;
// 创建一个新的工作簿
const wb = XLSX.utils.book_new();
// 将工作表添加到工作簿
XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
// 导出为 Excel 文件(xlsx 格式)
XLSX.writeFile(wb, `${name}.xlsx`);
},
要像这样设置列宽,不然导出来的文件列宽比较小不好看;