js Export2Excel 导出的表格宽度怎么设置

### JavaScript 导出 Excel 并设置列宽 为了实现通过 JavaScript 将数据导出到 Excel 文件并调整列宽的功能，可以采用多种方法和技术栈。以下是几种常见的解决方案： #### 使用 SheetJS (xlsx) SheetJS 是一个功能强大的库，支持读取和写入各种电子表格文件格式。它允许开发者轻松创建带有特定样式的 Excel 文档。 ```javascript const XLSX = require('xlsx'); // 创建工作簿对象 let wb = XLSX.utils.book_new(); // 构建表头数组 var ws_name = "Sheet1"; var data = [ ["姓名", "年龄"], ["张三", 20], ["李四", 22] ]; // 添加数据至工作表 var ws = XLSX.utils.aoa_to_sheet(data); // 定义列宽属性 ws['!cols'] = [{wch: 20}, {wch: 8}]; // wch 表示字符宽度单位 // 插入工作表到工作簿中 XLSX.utils.book_append_sheet(wb, ws, ws_name); // 输出为二进制流形式保存成 .xlsx 文件 XLSX.writeFile(wb, 'example.xlsx'); ``` 此代码片段展示了如何利用 `sheetjs` 来构建简单的二维数组作为表格内容，并指定每列表格的宽度[^1]。 #### 使用 FileSaver.js 和 TableExport.js 结合 HTML 表格操作 如果项目已经存在现成的 HTML `<table>` 元素，则可以通过组合使用这两个插件来简化流程。TableExport 可以直接作用于 DOM 中定义好的表格结构之上；而 FileSaver 则负责处理最终生成文件的实际下载逻辑。 ```html <!-- 假设页面中有如下表格 --> <table id="my-table"> <tr><th>Header</th></tr> <tr><td>Data Row</td></tr> ... </table> <script src="https://cdnjs.cloudflare.com/ajax/libs/tableexport/5.3.9/js/tableexport.min.js"></script> <script type="text/javascript"> document.getElementById('export-btn').addEventListener('click', function () { var table = document.querySelector('#my-table'); new TableExport(table,{ formats: ['xls'], fileName: 'test', bootstrap: false, ignoreColumns: [], headers: true, columnsHidden: true, preserveCellData: true, worksheetName: '', rowDelimiter: '' }).saveAsExcel(); }); </script> ``` 这种方法适用于那些希望快速集成现有网页布局而不必重构大量前端代码的情况。不过需要注意的是，默认情况下这些工具可能不会提供详细的样式控制选项，比如精确设定每一列的具体宽度[^2]。 对于更复杂的场景需求，如动态计算最优列宽或是应用更多高级格式化规则，建议考虑引入额外的支持类库或框架扩展能力。

### 使用 `export2Excel` 导出 Excel 并设置单元格内容居中 为了实现通过 JavaScript 的 `export2Excel` 插件导出带有特定样式的 Excel 文件，可以采用如下方式来确保单元格中的文本能够居中显示。 #### 安装依赖库 首先需要安装必要的 npm 包以支持样式操作： ```bash npm install --save file-saver xlsx xlsx-style ``` 由于存在兼容性问题，在某些情况下可能会遇到模块找不到的情况[^2]。如果发生这种情况，建议尝试更新项目中的 Node 版本或调整包管理器配置解决路径解析问题。 #### 编写 Vue 组件逻辑 下面是一个简单的例子展示如何创建一个按钮触发事件用于下载带格式化的 Excel 表格，并使其中的数据居中排列。 ```javascript import XLSX from 'xlsx'; import XLSXStyle from 'xlsx-style'; methods: { exportToExcel() { const wscols = [ {wch: 20}, // 列宽设定 ]; let data = [ ["姓名", "年龄"], ["张三", 28], ["李四", 30] ]; var wb = XLSX.utils.book_new(); var ws = XLSX.utils.aoa_to_sheet(data); // 应用列宽度 ws['!cols'] = wscols; // 添加自定义样式到工作表内所有单元格 (function addStyles(ws){ Object.keys(ws).forEach(function(key){ if(!key.startsWith('!')){ // 跳过特殊键值对 ws[key].s = { alignment :{ horizontal:"center", vertical:"center" } }; } }); })(ws); /* Add worksheet to workbook */ XLSX.utils.book_append_sheet(wb, ws, "Sheet1"); /* Write and generate an XLSX file */ XLSX.writeFile(wb,"人员信息.xlsx"); } } ``` 此代码片段展示了怎样利用循环遍历每一个非元数据项并为其分配一个新的属性`s`,该属性包含了我们想要应用给这些单元格的具体格式化选项——在这里就是水平和垂直方向上的中心对齐[^1]。 值得注意的是，虽然上述方法适用于大多数场景下的简单需求，但对于更复杂的样式定制（比如边框、背景颜色等），可能还需要进一步探索其他高级功能或是考虑使用像 `exceljs` 这样的替代方案[^3]。