vue3+ts如何导出xlsx表格并设置表头和表格宽度

你可以使用 `xlsx` 库和 `file-saver` 库来导出 xlsx 表格。具体步骤如下： 1. 安装 `xlsx` 和 `file-saver` 库 ``` npm install xlsx file-saver --save ``` 2. 在组件中引入 `xlsx` 和 `file-saver` 库 ```typescript import * as XLSX from 'xlsx'; import { saveAs } from 'file-saver'; ``` 3. 定义表格数据和表头 ```typescript const data = [ { name: 'John', age: 25, gender: 'male' }, { name: 'Mary', age: 30, gender: 'female' }, { name: 'Tom', age: 35, gender: 'male' }, ]; const header = ['Name', 'Age', 'Gender']; ``` 4. 定义导出函数 ```typescript export const exportExcel = () => { // 创建工作簿 const workbook = XLSX.utils.book_new(); // 创建工作表 const worksheet = XLSX.utils.json_to_sheet(data); // 设置表头 const headerRange = XLSX.utils.decode_range(worksheet['!ref']); headerRange.s.r = 1; XLSX.utils.sheet_set_range_style(worksheet, XLSX.utils.encode_range(headerRange), { font: { bold: true }, fill: { fgColor: { rgb: 'cccccc' } }, }); XLSX.utils.sheet_add_aoa(worksheet, [header], { origin: 'A1' }); // 设置表格宽度 const colWidth = header.map((item) => ({ wch: item.length + 5, })); worksheet['!cols'] = colWidth; // 添加工作表到工作簿 XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1'); // 导出表格 const buffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' }); const blob = new Blob([buffer], { type: 'application/octet-stream' }); saveAs(blob, 'example.xlsx'); }; ``` 5. 在组件中调用导出函数 ```html <template> <button @click="exportExcel">导出表格</button> </template> <script lang="ts"> import * as XLSX from 'xlsx'; import { saveAs } from 'file-saver'; const data = [ { name: 'John', age: 25, gender: 'male' }, { name: 'Mary', age: 30, gender: 'female' }, { name: 'Tom', age: 35, gender: 'male' }, ]; const header = ['Name', 'Age', 'Gender']; export default { methods: { exportExcel() { const workbook = XLSX.utils.book_new(); const worksheet = XLSX.utils.json_to_sheet(data); const headerRange = XLSX.utils.decode_range(worksheet['!ref']); headerRange.s.r = 1; XLSX.utils.sheet_set_range_style(worksheet, XLSX.utils.encode_range(headerRange), { font: { bold: true }, fill: { fgColor: { rgb: 'cccccc' } }, }); XLSX.utils.sheet_add_aoa(worksheet, [header], { origin: 'A1' }); const colWidth = header.map((item) => ({ wch: item.length + 5, })); worksheet['!cols'] = colWidth; XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1'); const buffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' }); const blob = new Blob([buffer], { type: 'application/octet-stream' }); saveAs(blob, 'example.xlsx'); }, }, }; </script> ```