vue 导出excel自定义样式

### Vue 项目中导出 Excel 并应用自定义样式 在 Vue 项目中实现带有自定义样式的 Excel 文件导出功能，通常涉及安装必要的依赖库并编写相应的逻辑来处理数据格式化和样式设置。 #### 安装所需依赖 为了支持 Excel 文件的操作以及保存文件的功能，需先通过 npm 安装 `xlsx` 和 `file-saver` 库： ```bash npm install --save xlsx file-saver ``` 对于更复杂的样式需求，则还需要额外引入 `xlsx-style` 来增强对单元格样式的控制能力[^2]。 #### 封装导出函数 下面是一个简化版的用于创建带样式的 Excel 表格的方法示例。此方法允许指定特定的工作表名称、列宽以及其他属性如字体大小等。 ```javascript import XLSX from 'xlsx'; import { saveAs } from 'file-saver'; function exportToExcel(data, sheetName = "Sheet1", fileName = "exported-data") { const ws = XLSX.utils.json_to_sheet(data); // 设置工作表的一些基本参数 let cols = [ { wch: 20 }, // 列A宽度设为20字符单位 { wch: 30 }, // 列B... ... ]; // 添加更多样式配置 data.forEach((row, rowIndex) => { row.forEach((cellValue, colIndex) => { if (ws[XLSX.utils.encode_cell({ r: rowIndex + 1, c: colIndex })]) { Object.assign(ws[XLSX.utils.encode_cell({ r: rowIndex + 1, c: colIndex })].s, { font: { bold: true }, fill: { fgColor: { rgb: "FFCCFFCC" } } }); } }); }); ws['!cols'] = cols; const wb = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(wb, ws, sheetName); const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'array' }); try { FileSaver.saveAs(new Blob([wbout], {type:"application/octet-stream"}), `${fileName}.xlsx`); } catch(e){ console.log(e); } } ``` 这段代码展示了如何利用 JavaScript 对象表示的数据构建一个 Excel 工作簿，并为其添加一些基础样式，比如调整各列的显示宽度和修改某些单元格的文字加粗效果及背景颜色[^4]。