vue项目中使用 SheetJS js-xlsx 导入文件

约 994 字大约 3 分钟

2025-08-01

效果对比

原表格样式：

导入效果：

步骤

安装

npm install xlsx

引入

在 App.vue 中引入 xlsx ：

import * as XLSX from 'xlsx'; // 数据导出导入所需要的依赖

代码解释

标签用于搜集用户信息

<input> 标签：根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
<input> 导入文件后返回一个 FileList 对象：https://www.mifengjc.com/api/FileList.html

event 使用方法介绍：

SheetJS 使用

提示

// 读取表格文件
readExcel(e) {
    let that = this;
    const files = e.target.files;
    console.log("files:", files);
    that.upload_file = files[0].name;
    console.log('that.upload_file:', that.upload_file);

    /**
     * https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader
     *
     * FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。
     * 其中File对象可以是来自用户在一个<input>元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的 DataTransfer对象,
     * 还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后返回结果。
     * 重要提示： FileReader仅用于以安全的方式从用户（远程）系统读取文件内容 它不能用于从文件系统中按路径名简单地读取文件。
     * 要在JavaScript中按路径名读取文件，应使用标准Ajax解决方案进行服务器端文件读取，如果读取跨域，则使用CORS权限。
     * */
    const fileReader = new FileReader();
    /**
     * https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader/onload
     *
     * FileReader.onload
     * 处理load (en-US)事件。该事件在读取操作完成时触发。
     * */
    fileReader.onload = function(event) {
        const data = event.target.result;
        const workbook = XLSX.read(data, {type: "array"}); //XLSX.read(data, read_opts) attempts to parse data
        const wsname = workbook.SheetNames[0]; //取第一张表
        const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); //生成json表格内容
        console.log(ws);
    }
    /* https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader/readAsArrayBuffer */
    fileReader.readAsArrayBuffer(files[0]);
}

全部代码

<template>
  <div>
    <div>
      {{ upload_file || "导入" }}
      <input type="file" accept=".xls,.xlsx" @change="readExcel($event)" />
    </div>
  </div>
</template>

<script>
import * as XLSX from "xlsx"; // 数据导出导入所需要的依赖
export default {
  name: "app",
  data() {
    return {
      upload_file: "",
    };
  },
  methods: {
    /**
     * https://docs.sheetjs.com/#parsing-options
     *         Parsing Workbooks
     *             Browser file upload form element (click to show)
     *
     * https://github.com/rockboom/SheetJS-docs-zh-CN#utilities
     * https://zhuanlan.zhihu.com/p/114607174
     * https://blog.csdn.net/a736755244/article/details/99568133
     * */
    readExcel(e) {
      // 读取表格文件
      let that = this;
      const files = e.target.files;
      console.log("files:", files);
      that.upload_file = files[0].name;
      console.log("that.upload_file:", that.upload_file);

      /**
       * https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader
       *
       * FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。
       * 其中File对象可以是来自用户在一个<input>元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的 DataTransfer对象,
       * 还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后返回结果。
       * 重要提示： FileReader仅用于以安全的方式从用户（远程）系统读取文件内容 它不能用于从文件系统中按路径名简单地读取文件。
       * 要在JavaScript中按路径名读取文件，应使用标准Ajax解决方案进行服务器端文件读取，如果读取跨域，则使用CORS权限。
       * */
      const fileReader = new FileReader();
      /**
       * https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader/onload
       *
       * FileReader.onload
       * 处理load (en-US)事件。该事件在读取操作完成时触发。
       * */
      fileReader.onload = function (event) {
        const data = event.target.result;
        const workbook = XLSX.read(data, { type: "array" }); //XLSX.read(data, read_opts) attempts to parse data
        const wsname = workbook.SheetNames[0]; //取第一张表
        const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); //生成json表格内容
        console.log(ws);
      };
      /* https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader/readAsArrayBuffer */
      fileReader.readAsArrayBuffer(files[0]);
    },
  },
};
</script>

<style></style>