Vue 解析 Public 目录下的 Excel 模板并导出 - 带样式

Vue 解析 Public 目录下的 Excel 模板并导出 - 带样式

本文将介绍如何在 Vue 项目中加载并解析 public 目录下的 Excel 模板文件，对解析后的数据添加样式，并最终导出为 Excel 文件。

1. 安装依赖

首先，我们需要安装以下两个依赖包：

• xlsx: 用于解析 Excel 文件。
• file-saver: 用于将数据保存为文件。

npm install xlsx file-saver --save

2. 编写解析方法

在你的 Vue 组件中，引入这两个依赖包，并创建以下方法：

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

export default {
  methods: {
    downloadTemplate() {
      const templatePath = '/excel/template.xlsx';
      const xhr = new XMLHttpRequest();
      xhr.open('GET', templatePath, true);
      xhr.responseType = 'arraybuffer';

      xhr.onload = () => {
        if (xhr.readyState === 4 && xhr.status === 200) {
          const data = new Uint8Array(xhr.response);
          const workbook = XLSX.read(data, { type: 'array' });
          const sheetName = workbook.SheetNames[0];

          // 在这里对解析出来的数据进行处理，比如添加样式
          // ...

          const outputWorkbook = XLSX.utils.book_new();
          XLSX.utils.book_append_sheet(outputWorkbook, workbook.Sheets[sheetName], sheetName);

          const now = new Date();
          const fileName = 'template-' + now.getFullYear() + '-' + (now.getMonth() + 1) + '-' + now.getDate() + '.xlsx';

          // 导出excel文件
          XLSX.writeFile(outputWorkbook, fileName, { bookType: 'xlsx', type: 'array' });
        }
      };

      xhr.send();
    }
  }
}

在这个方法中：

1. 我们使用 XMLHttpRequest 获取 public 目录下的 Excel 模板文件 template.xlsx。
2. 使用 XLSX.read 解析文件数据，获取工作簿 workbook 和第一个工作表名称 sheetName。
3. 在 // ... 处添加你需要的样式处理逻辑。
4. 使用 XLSX.writeFile 将处理后的数据导出为 xlsx 格式的 Excel 文件，并命名为 template-YYYY-MM-DD.xlsx。

3. 模板中添加按钮

最后，在你的 Vue 组件模板中添加一个按钮或链接，并绑定 downloadTemplate 方法：

<template>
  <div>
    <a href='javascript:void(0)' @click='downloadTemplate()'>下载模板</a>
  </div>
</template>

现在，当你点击按钮时，就会加载并解析 Excel 模板，并在添加样式后导出为新的 Excel 文件。