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

你可以使用 `xlsx` 库和 `file-saver` 库来导出 xlsx 表格。具体步骤如下：

1. 安装 `xlsx` 和 `file-saver` 库

npm install xlsx file-saver --save

2. 在组件中引入 `xlsx` 和 `file-saver` 库

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

3. 定义表格数据和表头

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. 定义导出函数

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. 在组件中调用导出函数

<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>