Vue 3 来读取和创建 Excel 文件

在前端处理 Excel 文件（读取和创建）通常借助于一些第三方库，如 xlsx。以下是如何使用 xlsx 库在前端从 Excel 文件中读取数据以及创建并写入数据的详细步骤。

1.安装 xlsx 库并导入

npm install xlsx

import * as XLSX from 'xlsx';

2.创建并下载 Excel 文件

直接上代码

<button @click="createExcelFile">Download Excel</button> 

const createExcelFile = () => {
      // 创建一个新的工作簿
      const workbook = XLSX.utils.book_new();

      // 创建一些数据
      const data = [
        ['Name', 'Age', 'City'],
        ['John Doe', 29, 'New York'],
        ['Jane Smith', 34, 'San Francisco'],
        ['Sam Johnson', 23, 'Los Angeles']
      ];

      // 将数据转换为工作表
      const worksheet = XLSX.utils.aoa_to_sheet(data);

      // 将工作表添加到工作簿
      XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');

      // 生成 Excel 文件并触发下载
      const wbout = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });

      // 创建一个 Blob 对象
      const blob = new Blob([wbout], { type: 'application/octet-stream' });

      // 创建一个链接并触发下载
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = 'example.xlsx';
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    };

3.读取文件

   const handleFile = (event) => {
      const file = event.target.files[0];
      const reader = new FileReader();

      reader.onload = (e) => {
        const data = new Uint8Array(e.target.result);
        const workbook = XLSX.read(data, { type: 'array' });

        // 假设我们读取第一个工作表
        const sheetName = workbook.SheetNames[0];
        const worksheet = workbook.Sheets[sheetName];

        // 将工作表内容转换为 JSON 格式
        jsonData.value = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
      };

      reader.readAsArrayBuffer(file);
    };

总结

1. 读取 Excel 文件：

   • 使用 FileReader 读取文件内容。
   • 使用 XLSX.read 解析文件内容。
   • 将解析后的数据转换为 JSON 格式并显示。

2. 创建并下载 Excel 文件：

   • 使用 XLSX.utils.book_new 创建一个新的工作簿。
   • 使用 XLSX.utils.aoa_to_sheet 将数据转换为工作表。
   • 使用 XLSX.utils.book_append_sheet 将工作表添加到工作簿。
   • 使用 XLSX.write 生成 Excel 文件。
   • 使用 Blob 和 URL.createObjectURL 生成下载链接并触发下载。