一文掌握 Vue 读取 Excel 文件的两种方法，轻松应对数据处理需求

前端

2023-12-20 00:13:44

如何在 Vue.js 中轻松读取 Excel 文件

阅读 Excel 文件的需求

在现实项目的开发中，我们时常需要处理 Excel 文件。Vue.js 作为一个前端开发框架，提供了多种途径来读取 Excel 文件。本篇博客将介绍两种常用的方法：使用 FileReader API 和使用第三方库。

使用 FileReader API

FileReader API 是浏览器自带的 API，可以读取本地文件。它提供了两种方法：readAsText() 和 readAsDataURL()。前者将文件读取为文本，后者将文件读取为 DataURL。

具体步骤

首先，使用 <input type="file"> 标签选择文件。
然后，使用 FileReader 对象读取文件。
最后，将读取到的文件数据解析为 JSON 格式，即可在 Vue 中使用。

示例代码

<input type="file" @change="handleFile">

handleFile(event) {
  const file = event.target.files[0];
  const reader = new FileReader();
  reader.onload = (e) => {
    const data = e.target.result;
    // 解析 JSON 数据
    const json = JSON.parse(data);
    // 在 Vue 中使用 JSON 数据
    this.data = json;
  };
  reader.readAsText(file);
}

使用第三方库

除了 FileReader API，我们还可以借助第三方库来读取 Excel 文件。常用的第三方库有 xlsx 和 sheetjs。

具体步骤

安装第三方库。
使用第三方库读取文件。
最后，将读取到的文件数据解析为 JSON 格式，即可在 Vue 中使用。

示例代码

使用 xlsx 库

// 安装 xlsx 库
import XLSX from 'xlsx';

// 读取文件
const workbook = XLSX.readFile('path/to/file.xlsx');

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

// 转换为 JSON 格式
const data = XLSX.utils.sheet_to_json(sheet);

// 在 Vue 中使用 JSON 数据
this.data = data;

使用 sheetjs 库

// 安装 sheetjs 库
import * as XLSX from 'sheetjs';

// 读取文件
const workbook = XLSX.readFile('path/to/file.xlsx');

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

// 转换为 JSON 格式
const data = XLSX.utils.sheet_to_json(sheet);

// 在 Vue 中使用 JSON 数据
this.data = data;