行列文居中对齐

要在 Vue3 中使用 `xlsx` 和 `xlsx-style` 导出 Excel 并实现单元格内容的行列居中对齐，需引入额外的支持库 `xlsx-style` 来处理样式问题。以下是具体实现方式： --- ### 设置单元格样式（行列居中） 为了使单元格中的内容能够居中对齐，需要为每个单元格添加特定的样式属性。以下是一个完整的示例代码展示如何完成这一目标。 ```vue <template> <div> <button @click="exportStyledExcel">导出带样式的 Excel</button> </div> </template> <script> import * as XLSX from 'xlsx'; import 'xlsx-style'; // 引入 xlsx-style 支持样式 export default { setup() { const exportStyledExcel = () => { // 数据源 const data = [ { id: 1, name: 'Alice', age: 25 }, { id: 2, name: 'Bob', age: 30 }, { id: 3, name: 'Charlie', age: 35 } ]; // 转换为二维数组形式 function convertToSheetData(data) { return data.map(item => [item.id, item.name, item.age]); } // 创建工作表 const worksheet = XLSX.utils.aoa_to_sheet(convertToSheetData(data)); // 添加列头 const headerRow = ['ID', '姓名', '年龄']; XLSX.utils.sheet_add_aoa(worksheet, [headerRow], { origin: 'A1' }); // 设置单元格样式 - 居中对齐 const cellStyle = { alignment: { horizontal: 'center', vertical: 'middle' } // 行列居中对齐 }; // 获取所有单元格范围 const range = XLSX.utils.decode_range(worksheet['!ref']); for (let row = range.s.r; row <= range.e.r; ++row) { for (let col = range.s.c; col <= range.e.c; ++col) { const cellAddress = XLSX.utils.encode_cell({ r: row, c: col }); if (!worksheet[cellAddress]) continue; // 应用样式 worksheet[cellAddress].s = Object.assign({}, worksheet[cellAddress].s || {}, cellStyle); } } // 创建工作簿 const workbook = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1'); // 导出文件 XLSX.write(workbook, { bookType: 'xlsx', type: 'array', cellStyles: true }); // 启用样式支持 const fileContent = XLSX.write(workbook, { bookType: 'xlsx', type: 'blob', cellStyles: true }); saveAs(fileContent, 'styled_example.xlsx'); // 使用 FileSaver.js 下载文件 }; return { exportStyledExcel, }; }, }; </script> <style scoped> /* 可选样式 */ </style> ``` --- ### 关键点解析 1. **启用样式支持** 在调用 `XLSX.write()` 方法时，必须传入 `{ cellStyles: true }` 参数以确保样式生效[^1]。 2. **设置单元格样式** 每个单元格的样式通过其 `.s` 属性定义。对于居中对齐，需要配置如下字段： ```javascript const cellStyle = { alignment: { horizontal: 'center', vertical: 'middle' } // 行列居中对齐 }; ``` 3. **遍历单元格应用样式** 需要手动获取工作表的所有单元格范围，并逐一为其赋值样式对象。这一步骤可通过解码工作表引用 (`decode_range`) 实现[^2]。 4. **下载文件** 推荐使用第三方工具如 `FileSaver.js` 提供更友好的文件保存体验。如果没有安装该库，也可以通过 `<a>` 标签模拟点击的方式替代[^3]。 --- ### 注意事项 - 如果未正确加载 `xlsx-style` 插件，可能导致样式无法正常渲染。 - 对于大规模数据集，逐一遍历单元格可能影响性能，建议优化循环逻辑或分批处理。 ---