Vue3 setup语法糖 excel导出 怎么设置导出的字体大小

在Vue3中使用`xlsx`库进行Excel导出时，你可以通过设置`csv-writer`模块的样式对象来自定义导出表格的字体大小。`setup`函数提供了一种简洁的方式来处理组件的初始化，包括数据和方法。

首先，你需要安装`xlsx`和`csv-writer`库：

npm install xlsx csv-writer

然后，在`setup`函数中，导入并配置字体大小：

<script setup>
import { createWriter } from 'csv-writer';
import XLSX from 'xlsx';

const fontSize = 12; // 自定义字体大小，单位通常是像素

// ...

function exportToExcel(data) {
  const workbook = XLSX.utils.book_new();
  const worksheet = XLSX.utils.json_to_sheet(data);

  // 创建CSV writer实例，并设置样式
  const csvWriter = createWriter({
    filename: 'output.xlsx',
    sheetName: 'Sheet1',
    header: true,
    delimiter: ',',
    newline: '\n',
    cellStyle: {
      align: 'center',
      fontSize: fontSize, // 设置单元格字体大小
    },
  });

  // 写入数据到Excel文件
  csvWriter.write(worksheet, function(err) {
    if (err) {
      console.error(err);
    }
    // 下载文件
    const blob = XLSX.writeFile(workbook, 'output.xlsx');
    // 使用a标签下载
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = 'output.xlsx';
    link.click();
  });
}
</script>

在上面的代码中，`fontSize`变量用于控制导出Excel时的字体大小。当你需要改变字体大小时，只需更新这个变量的值即可。