Vue 如何更新和添加样式到 Excel 模板文件

Vue 本身不支持对 Excel 模板文件进行更新和添加样式，但是可以借助第三方库来实现这个功能，比如 xlsx 和 file-saver。

首先，需要安装这两个库：

npm install xlsx file-saver --save

然后，在 Vue 组件中引入这两个库：

import XLSX from 'xlsx';
import FileSaver from 'file-saver';

接下来，可以使用 XLSX 来读取 Excel 模板文件，并对其进行修改和添加样式。例如，将 A1 单元格的文本设置为'Hello World'，并将其背景色设置为红色：

// 读取 Excel 模板文件
const workbook = XLSX.readFile('template.xlsx');

// 获取第一个工作表
const sheet = workbook.Sheets[workbook.SheetNames[0]];

// 修改单元格的值和样式
sheet.A1.v = 'Hello World';
sheet.A1.s = {
  fill: {
    fgColor: { rgb: "FF0000" }
  }
};

最后，可以使用 FileSaver 来将修改后的 Excel 文件保存到本地：

// 生成 Excel 文件
const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });

// 保存 Excel 文件
const blob = new Blob([excelBuffer], { type: 'application/octet-stream' });
FileSaver.saveAs(blob, 'output.xlsx');

完整的示例代码：

<template>
  <div>
    <button @click="updateExcel">Update Excel</button>
  </div>
</template>

<script>
import XLSX from 'xlsx';
import FileSaver from 'file-saver';

export default {
  methods: {
    updateExcel() {
      // 读取 Excel 模板文件
      const workbook = XLSX.readFile('template.xlsx');

      // 获取第一个工作表
      const sheet = workbook.Sheets[workbook.SheetNames[0]];

      // 修改单元格的值和样式
      sheet.A1.v = 'Hello World';
      sheet.A1.s = {
        fill: {
          fgColor: { rgb: "FF0000" }
        }
      };

      // 生成 Excel 文件
      const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });

      // 保存 Excel 文件
      const blob = new Blob([excelBuffer], { type: 'application/octet-stream' });
      FileSaver.saveAs(blob, 'output.xlsx');
    }
  }
};
</script>