Vue3 实现 Excel 文件导入导出功能

在Vue 3中实现Excel文件的导入和导出功能，你可以使用一些流行的JavaScript库，如SheetJS（也称为xlsx）来处理Excel文件。以下是实现这一功能的基本步骤：

1. 安装SheetJS

首先，你需要安装xlsx库。在你的Vue项目中，可以通过npm或yarn来安装：

复制代码

npm install xlsx
# 或者
yarn add xlsx

2. 导入和导出Excel文件

导入Excel文件

你可以使用一个文件输入（<input type="file">）来让用户选择文件，然后读取文件内容。

复制代码

<template>
  <div>
    <input type="file" @change="handleFileUpload" />
    <button @click="exportExcel">导出Excel</button>
  </div>
</template>
 
<script setup>
import * as XLSX from 'xlsx';
import { ref } from 'vue';
 
const data = ref([]); // 存储Excel数据
 
const handleFileUpload = (event) => {
  const files = event.target.files;
  if (files.length === 0) return;
  const file = files[0];
  const reader = new FileReader();
  reader.onload = (e) => {
    const data = new Uint8Array(e.target.result);
    const workbook = XLSX.read(data, { type: 'array' });
    const firstSheetName = workbook.SheetNames[0];
    const worksheet = workbook.Sheets[firstSheetName];
    const jsonData = XLSX.utils.sheet_to_json(worksheet);
    data.value = jsonData; // 更新data为导入的Excel数据
  };
  reader.readAsArrayBuffer(file);
};
</script>

导出Excel文件

要导出数据到Excel文件，你可以使用XLSX.utils.book_new()创建一个新的工作簿，然后添加一个工作表并写入数据。最后，将工作簿转换为二进制数据，并使用URL.createObjectURL()创建一个下载链接。

复制代码

<script setup>
import * as XLSX from 'xlsx';
import { ref } from 'vue';
 
const data = ref([ /* 示例数据 */ ]); // 示例数据，实际应用中应从用户导入的数据中获取或从其他来源获取
 
const exportExcel = () => {
  const ws = XLSX.utils.json_to_sheet(data.value); // 将数据转换为工作表对象
  const wb = XLSX.utils.book_new(); // 创建新的工作簿对象
  XLSX.utils.book_append_sheet(wb, ws, "Sheet1"); // 将工作表添加到工作簿中，命名为"Sheet1"
  const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'array' }); // 将工作簿转换为二进制数据
  function s2ab(s) { return new Uint8Array(s); } // 辅助函数，将字符串转换为ArrayBuffer对象
  saveAs(new Blob([s2ab(wbout)],{type:"application/octet-stream"}), "export.xlsx"); // 使用FileSaver.js保存文件（需要额外安装）
};
</script>

3. 使用FileSaver库来保存文件（可选）

如果你需要创建一个下载链接并触发下载，可以使用FileSaver库。首先安装它：

复制代码

npm install file-saver
# 或者
yarn add file-saver

然后在你的代码中引入并使用它：

复制代码

import { saveAs } from 'file-saver'; // 从file-saver导入saveAs函数

确保在导出函数中使用saveAs来触发下载：

复制代码

saveAs(new Blob([s2ab(wbout)],{type:"application/octet-stream"}), "export.xlsx"); // 使用FileSaver.js保存文件（需要额外安装）

这样，用户就可以通过点击按钮来导出Excel文件了。通过上述步骤，你可以在Vue 3应用中实现Excel文件的导入和导出功能。