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

要导出 xlsx 表格并设置表头、表格宽度，可以使用 js-xlsx 库和 file-saver 库。

首先，安装这两个库：

npm install xlsx file-saver

然后，在 Vue 组件中使用以下代码：

import { saveAs } from 'file-saver';
import XLSX from 'xlsx';

export default {
  data() {
    return {
      tableData: [
        { id: 1, name: '张三', age: 20 },
        { id: 2, name: '李四', age: 25 },
        { id: 3, name: '王五', age: 30 },
      ],
      headers: ['编号', '姓名', '年龄'],
      widths: [10, 20, 10],
    };
  },
  methods: {
    exportExcel() {
      const worksheet = XLSX.utils.json_to_sheet(this.tableData);
      worksheet['!cols'] = this.widths.map((w) => ({ w }));
      const workbook = XLSX.utils.book_new();
      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, 'table.xlsx');
    },
  },
};

在上述代码中，我们使用了 XLSX 库的 `utils.json_to_sheet` 方法将数组转换为工作表，然后设置了表格的列宽，使用 `utils.book_new` 方法创建工作簿，使用 `utils.book_append_sheet` 方法将工作表添加到工作簿中，最后使用 file-saver 库的 `saveAs` 方法下载生成的 xlsx 文件。

在模板中，我们可以使用以下代码触发导出操作：

<el-button type="primary" @click="exportExcel">导出表格</el-button>

注意：以上代码中使用了 Element UI 的 el-button 组件，需要先安装并注册 Element UI。