excel导出携带样式vue

### 实现带样式的Excel导出 为了在 Vue.js 项目中实现带有样式的 Excel 导出功能，可以采用 `xlsx` 和 `xlsx-style` 库来处理数据并应用样式。以下是具体的解决方案。 #### 准备工作 首先，在项目的 src 目录下创建一个新的文件夹命名为 `Excel`，并将必要的 JavaScript 文件如 `Blob.js` 放置其中[^2]。接着安装所需的 npm 包： ```bash npm install xlsx xlsx-style file-saver script-loader --save ``` 这些包提供了基本的数据操作能力以及保存文件的功能。 #### 创建导出函数 定义一个名为 `exportStyledExcel` 的方法用于生成和下载包含样式的 Excel 文件。此方法内部使用了 `xlsx` 来构建工作表，并通过 `xlsx-style` 添加自定义样式[^3]。 ```javascript import * as XLSX from 'xlsx'; import 'xlsx-style'; // 加载支持样式的模块 import FileSaver from 'file-saver'; function exportStyledExcel(data, styles) { const ws = XLSX.utils.json_to_sheet(data); Object.keys(styles).forEach((key) => { let cellAddress = key; let styleObj = styles[key]; if (ws[cellAddress]) { ws[cellAddress].s = styleObj; // 给指定单元格设置样式对象 } }); const wb = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(wb, ws, "Sheet1"); /* generate an OOXML format (.xlsx) data */ var wbout = XLSX.write(wb, { bookType:'xlsx', type:'array'}); function s2ab(s) { var buf = new ArrayBuffer(s.length); var view = new Uint8Array(buf); for (var i=0; i<s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF; return buf; } saveAs(new Blob([s2ab(wbout)],{type:"application/octet-stream"}), 'styled-export.xlsx'); } ``` 这段代码展示了如何将 JSON 数据转换成 Excel 工作簿的工作表，并为特定的单元格位置分配样式属性。最后调用了 `FileSaver.saveAs()` 方法以二进制流的形式保存文件。 #### 使用示例 假设有一个简单的表格结构作为要导出的数据源，并且想要给某些列加上背景颜色或其他视觉效果，则可以在组件内这样调用上述方法: ```vue <template> <!-- ... --> </template> <script> // ... methods: { handleExport() { const testData = [ {"姓名": "张三", "年龄": 25}, {"姓名": "李四", "年龄": 30} ]; const testStyles = { A1: { fill: { fgColor: { rgb: "FFCC00" }}}, // 姓名标题黄色填充 B1: { font: { bold: true }, alignment:{ horizontal: 'center' }} }; this.exportStyledExcel(testData, testStyles); }, exportStyledExcel, } </script> ``` 这种方法允许开发者灵活地控制每一个单元格的具体外观，从而满足不同业务场景下的需求。