Vue3.0导出数据为自定义样式Excel

在Vue 3.0中，要导出数据为自定义样式的Excel，可以使用第三方库如xlsx来创建Excel文件，并使用file-saver来保存文件。以下是一个简单的例子：

1. 安装所需依赖：

npm install xlsx file-saver

2. 在Vue组件中使用这些库导出Excel：

import { ref } from 'vue';
import { saveAs } from 'file-saver';
import * as XLSX from 'xlsx';
 
export default {
  setup() {
    const data = ref([
      { name: 'Alice', email: 'alice@example.com' },
      { name: 'Bob', email: 'bob@example.com' }
    ]);
 
    const exportToExcel = () => {
      const ws = XLSX.utils.json_to_sheet(data.value);
      const wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
 
      // 自定义样式
      const ws_style = {
        // 例如，设置第一行为加粗样式
        "A1": { font: { bold: true } }
      };
      // 应用样式
      XLSX.utils.format_cells(ws, ws_style);
 
      const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'binary' });
      function s2ab(s) {
        const buf = new ArrayBuffer(s.length);
        const view = new Uint8Array(buf);
        for (let i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
        return buf;
      }
      saveAs(new Blob([s2ab(wbout)], { type: 'application/octet-stream' }), 'customStyles.xlsx');
    };
 
    return {
      data,
      exportToExcel
    };
  }
};

在上面的代码中，data是一个响应式引用，包含要导出的数据。exportToExcel函数负责创建Excel文件，应用自定义样式，并使用saveAs函数保存文件。

请注意，XLSX.utils.format_cells函数可以用来设置特定单元格的样式，例如字体、颜色、背景等。自定义样式需要遵循xlsx库支持的格式。

在模板部分，你可以添加一个按钮来触发导出操作：

<template>
  <button @click="exportToExcel">导出Excel</button>
</template>

这样，用户点击按钮时，将会导出一个带有自定义样式的Excel文件。