Xlsx

<el-tableref="report-table">....</el-table>import FileSaver from 'file-saver';import XLSXS from "xlsx-style";import * as XLSX from 'xlsx';export default { data() { return { // 表格 table: { loading: false, loadingText: '', data: [], total: 0, } }; }, created() { this.init(); }, methods: { /** 导出按钮操作 */ handleExport(excelName) { this.table.loading = true; this.table.loadingText = '导出中，请稍后....'; setTimeout(() => { try { const $e = this.$refs['report-table'].$el; let $table = $e.querySelector('.el-table__fixed'); if(!$table) { $table = $e; } let wb = XLSX.utils.table_to_book($table, {raw:true}); this.xlsxStyle(wb); var ws = XLSXS.write(wb, { type: "buffer", }); // const wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST:true, type: 'array'}); FileSaver.saveAs( new Blob([ws],{type: 'application/octet-stream'}), `${excelName}.xlsx`, ) } catch (e) { if (typeof console !== 'undefined') console.error(e); } this.table.loading = false; this.table.loadingText = ''; }, 1000); }, xlsxStyle(wb) { let ws = wb.Sheets["Sheet1"]; for (let key in ws) { // console.log(key, ws[key]) const num = key.slice(1, key.length); // 表头 if (num === '1' && ws[key].t !== 'z') { // 留神：border未开启，如果开启，在跨行、跨列的状况下会呈现少边框的问题。 ws[key].s = { font: { //字体相干款式 name: '宋体', //字体类型 sz: 11, //字体大小 color: { rgb: '' }, //字体色彩 bold: true, //是否加粗 }, // border: { // top: { // style: "thin", // color: { // auto: 1, // }, // }, // left: { // style: "thin", // color: { // auto: 1, // }, // }, // right: { // style: "thin", // color: { // auto: 1, // }, // }, // bottom: { // style: "thin", // color: { // auto: 1, // }, // }, // }, alignment: { /// 主动换行 wrapText: 1, // 居中 horizontal: "center", vertical: "center", indent: 0 } } } else { // 所有表格 if (key !== '!rows' && key !== '!cols' && key !== '!ref' && key !== '!fullref' && ws[key].t !== 'z') { ws[key].s = { font: { //字体相干款式 name: "宋体", //字体类型 sz: 11, //字体大小 color: { rgb: "" }, //字体色彩 }, // border: { // top: { // style: "thin", // color: { // auto: 1, // }, // }, // left: { // style: "thin", // color: { // auto: 1, // }, // }, // right: { // style: "thin", // color: { // auto: 1, // }, // }, // bottom: { // style: "thin", // color: { // auto: 1, // }, // }, // }, alignment: { /// 主动换行 wrapText: 1, // 居中 horizontal: "center", vertical: "center", indent: 0, }, }; } } } }, },};目前满足简单表格的需要，只有el-table能画进去的表格，导出格局都没问题。惟一的问题是，导出的表格，单元格字体款式批改未胜利。单元格款式可能批改，应用xlsx-style插件。 ...

Excelize 是 Go 语言编写的用于操作 Office Excel 文档类库，基于 ECMA-376 Office OpenXML 标准。可以使用它来读取、写入由 Microsoft Excel™ 2007 及以上版本创建的 XLSX 文档。相比较其他的开源类库，Excelize 支持写入原本带有图片(表)、透视表和切片器等复杂样式的文档，还支持向 Excel 文档中插入图片与图表，并且在保存后不会丢失文档原有样式，可以应用于各类报表系统中。 GitHub: github.com/360EntSecGroup-Skylar/excelize 2019年7月1日，社区正式发布了 2.0.1 版本，该版本包含了多项新增功能、错误修复和兼容性提升优化。下面是有关该版本更新内容的摘要，完整的更改列表可查看 change log。 Release Notes此版本中最显著的变化包括： 新增功能新增 SetHeaderFooter() 方法，支持设置页眉和页脚，相关 issue #394新增 SetColStyle() 方法，支持设置列样式，相关 issue #397新增 SetDefaultFont() 和 GetDefaultFont() 方法，支持设置工作簿默认字体，相关 issue #390新增 SetDocProps() 和 GetDocProps() 方法，支持设置和获取文档属性，相关 issue #415函数 AddChart() 新增加了 26 种图表的创建：簇状圆锥、堆积圆锥、百分比堆积圆锥、三维圆锥图、簇状水平圆锥图、堆积水平圆锥图、堆积百分比水平圆锥图、簇状棱锥图、堆积棱锥、百分比堆积棱锥、三维棱锥图、簇状水平棱锥图、堆积水平棱锥图、堆积百分比水平棱锥图、簇状柱形图 、堆积柱形图、百分比堆积柱形图、三维柱形图、簇状水平圆柱图、堆积水平圆柱图、堆积百分比水平圆柱图、三维曲面图、俯视框架曲面图、三维曲面框架图、气泡图与三维气泡图，不受支持的图表类型将返回错误提示新增 SetDefinedName() 和 GetDefinedName() 方法，支持设置和获取名称优化并明确了打开加密文件时的错误提示信息函数 AddPicture() 现在支持添加 TIF 和 TIFF 格式的图片问题修复修复当数据验证公式中存在双引号时产生的问题修复内部计数错误导致的部分情况下产生重复批注问题，相关 issue #373修复部分情况下因读取内部工作表 map 错误导致读取文件失败的问题，相关 issue #404提升了处理包含数据透视表的文档兼容性，相关 issue #413提升了字号与粗体样式的兼容性，相关 issue #411、#420 和 #425优化内部重算组件以修复部分情况下在工作表中删除或插入行造成文档损坏的问题，相关 issue #421 和 #424修复部分情况下隐藏工作表失效的问题，相关 issue #418修复内部主题颜色索引溢出导致部分情况下图表系列过多导致文档损坏的问题，相关 issue #422其他完善单元测试提升覆盖度，行覆盖度达到 96.05%代码优化，修复 golint 问题

最近在项目中对于后台的表格都要提供下载功能，这里基于 XLSX 和 file-saver 库实现一个表格保存为Excel文件的方法。 定义数据类型列数据interface Col { name: string; // 列名（表格的第一行） key: string; // 关键字}// 例如 { name: '姓名', key: 'name' }表格数据表格数据应该是根据列数据 key 值的一个数组，如果列数据为： [ { name: '姓名', key: 'name' }, { name: '年龄', key: 'age' }, { name: '性别', key: 'sex' },]则对应的表格数据应该为： [ { name: '张三', age: 24, sex: '男' }, { name: '李四', age: 25, sex: '女' }, { name: '王五', age: 26, sex: '男' },]import XLSX from 'xlsx';import { saveAs } from 'file-saver';interface Col { name: string; // 列名 key: string; // 关键字}/** * 格式化处理数据 * * @param {Col[]} cols 列数据 * @param {*[]} templateData 表格数据 * @returns {[string[], ...*[]]} 格式化处理后的数据 */function getTemplateData(cols: Col[], templateData: any[]): [string[], ...any[]] { const data: any[] = []; const names: string[] = []; cols.forEach((item) => { names.push(item.name); }, ); templateData.forEach((row) => { const newRow: any[] = []; cols.forEach((item) => { newRow.push(row[item.key]); }); data.push(newRow); }); return [names, ...data];}/** * 下载表格 * * @param {Col[]} cols 列数据 * @param {*[]} templateData 表格数据 * @param {String} fileName 保存的文件名 */function downloadExcel(cols: any[], templateData: any[], fileName = '示例.xlsx'): void { const workbook = XLSX.utils.book_new(); const workbookOptions: any = { bookType: 'xlsx', bookSST: false, type: 'array' }; const ws = XLSX.utils.aoa_to_sheet(getTemplateData(cols, templateData)); XLSX.utils.book_append_sheet(workbook, ws, 'Sheet1'); const workbookOut = XLSX.write(workbook, workbookOptions); saveAs(new Blob([workbookOut], { type: 'application/octet-stream' }), fileName);}export { downloadExcel, Col };