Vue使用xlsx模块实现读写Excel文档内容

 更新时间:2024年03月01日 14:12:21   作者:东方红杉  
在前端项目开发中,读写Excel文件的需求变得越来越常见,本文将详细介绍如何在Vue项目中利用FileReader对象和xlsx模块来读取Excel文件的内容,需要的可以参考下

前言

在前端项目开发中,读写Excel文件的需求变得越来越常见。以往,这些任务通常由后端处理,但随着前端技术的发展和浏览器功能的提升,JavaScript为我们提供了更多处理本地文件的能力。其中,FileReader对象是一个强大的工具,允许浏览器对用户本地文件进行操作。此外,一些技术大佬们贡献的工具类库如xlsx模块,进一步简化了在前端读取和解析Excel文件的过程。

在本文中,将详细介绍如何在Vue项目中利用FileReader对象和xlsx模块来读取Excel文件的内容。我将提供一系列步骤和示例代码,帮助大家了解如何在现代浏览器中处理Excel文件的读写操作。

首先,本文将简要介绍FileReader对象的基本概念和用法,说明如何使用它来读取用户选择的Excel文件。然后,我们将详细介绍xlsx模块的功能和用法,展示如何将读取到的Excel数据转换为可用的数据结构,以便在Vue项目中进行进一步的处理和展示。

不尽之处,欢迎评论区交流。

安装

FileReader 对象

FileReader对象是JavaScript中的内置对象,用于在Web应用程序中读取文件内容。它提供了一种异步方式来读取文件,而不需要将整个文件加载到内存中。

FileReader对象提供了几种方法和事件用于读取文件内容。下面是一些常用的方法和事件:

  • readAsText(file[, encoding]):以文本格式读取文件内容。可选参数encoding指定文件编码,默认为UTF-8。
  • readAsArrayBuffer(file):以二进制数据(ArrayBuffer)格式读取文件内容。
  • readAsDataURL(file):以DataURL格式读取文件内容,返回一个包含文件数据的URL。
  • abort():取消文件读取操作。
  • onload:文件读取成功时触发的事件。
  • onerror:文件读取错误时触发的事件。

使用FileReader对象读取文件的一般步骤如下:

  • 创建一个新的FileReader对象:const reader = new FileReader();
  • onload事件绑定一个处理函数,以在文件读取成功时执行操作:reader.onload = function(event) { // 处理文件内容 }
  • 使用合适的方法(如readAsText()readAsArrayBuffer()readAsDataURL())读取文件内容:reader.readAsText(file)
  • onload事件处理函数中,可以通过event.target.result来获取读取到的文件内容。

FileReader对象为处理文件上传、图像预览、文件解析等场景提供了方便的功能,并且与其他Web API(如File API和XHR)结合使用,可以实现更多复杂的文件操作。

更多内容请查阅:FileReader MDN 官方文档

读取实例

下面是一个使用 xlsx 模块在Vue项目中读取本地Excel文件的综合实例。例子在页面上提供了一个文件选择表单来选择Excel文件,程序会使用FileReader对象和xlsx 模块对Excel内容进行读取和处理,并最终以表格的形式显示到页面上。

<template>
  <div>
    <input type="file" @change="handleFileSelect" accept=".xlsx, .xls" />
    <table>
      <thead>
        <tr>
          <th v-for="header in headers" :key="header">{{ header }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="row in rows" :key="row.index">
          <td v-for="cell in row.cells" :key="cell.column">{{ cell.value }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import { read, utils } from 'xlsx';

export default {
  data() {
    return {
      headers: [],
      rows: [],
    };
  },
  methods: {
	// 选择文件
    handleFileSelect(event) {
      const file = event.target.files[0];
      const reader = new FileReader();
      // 处理文件内容
      reader.onload = (e) => {
        const data = new Uint8Array(e.target.result);
        const workbook = read(data, { type: 'array' });

        const worksheet = workbook.Sheets[workbook.SheetNames[0]];
        const jsonData = utils.sheet_to_json(worksheet, { header: 1 });
		
		// 提前文件内容
        this.headers = jsonData[0];
        this.rows = jsonData.slice(1).map((row, index) => ({
          index: index + 1,
          cells: row.map((cell, column) => ({
            column: column + 1,
            value: cell,
          })),
        }));
      };
	  // 读取文件内容
      reader.readAsArrayBuffer(file);
    },
  },
};
</script>

写入实例

下面的代码是使用 xlsx 模块在Excel中写入数据并导出Excel文件到本地的用例。第一步获取用户输入,第二步使用 xlsx 模块的 writeFile 方法写入内容并下载到本地。

<template>
  <div>
    <form @submit.prevent="saveExcel">
      <label for="name">姓名:</label>
      <input type="text" id="name" v-model="name" required>
      <br>
      <label for="sex">性别:</label>
      <input type="text" id="sex" v-model="sex" required>
      <br>
      <label for="age">年龄:</label>
      <input type="number" id="age" v-model="age" required>
      <br>
      <label for="dept">职位:</label>
      <input type="text" id="dept" v-model="dept" required>
      <br>
      <button type="submit">Save to Excel</button>
    </form>
  </div>
</template>

<script>
import { utils, writeFile } from 'xlsx';

export default {
  data() {
    return {
      name: '',
      age: null,
      sex: '',
      dept: '',
    };
  },
  methods: {
	// 保存excel
    saveExcel() {
      let data = []
      data.push(['姓名', '性别', '年龄', '职位'])
      data.push([this.name, this.sex, this.age, this.dept])
      // for (let i=0; i<10; i++) {
      //   data.push([(i + 1) + '', '学校A'])
      // }
      let WorkSheet = utils.aoa_to_sheet(data)
      let new_workbook = utils.book_new()
      utils.book_append_sheet(new_workbook, WorkSheet, '测试数据')
      writeFile(new_workbook, `测试数据.xlsx`)
    },
  },
};
</script>

<style scoped>
form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 20px;
}
input {
  margin-bottom: 10px;
}
button {
  margin-top: 10px;
}
</style>

总结

本文介绍了如何在前端项目中利用FileReader对象和xlsx模块读取Excel文件的内容。首先,FileReader对象是一个内置对象,可以异步读取文件内容,并提供了几种方法和事件用于文件操作。然后,介绍了xlsx模块的功能和用法,展示了如何将读取到的Excel数据转换为可用的数据结构以及如何写入Excel内容并下载到本地。最后,给出了一个实例代码,演示了在Vue项目中如何读取本地Excel文件并展示到页面上。

通过本文的介绍和示例代码,大家可以了解到如何使用FileReader对象和xlsx模块来处理前端读取Excel文件的需求。这对于前端开发中处理Excel文件的场景非常有帮助,可以提升用户体验并简化开发流程。

以上就是Vue使用xlsx模块实现读写Excel文档内容的详细内容,更多关于Vue xlsx读写Excel文档的资料请关注脚本之家其它相关文章!

相关文章

  • 使用github部署前端vue项目

    使用github部署前端vue项目

    这篇文章主要为大家介绍了使用github部署前端vue项目过程示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-06-06
  • Vite打包分割代码的详细过程记录

    Vite打包分割代码的详细过程记录

    项目创建Vite是一个web开发构建工具,由于其原生ES模块导入方法,它允许快速提供代码,下面这篇文章主要给大家介绍了关于Vite打包分割代码的相关资料,需要的朋友可以参考下
    2022-09-09
  • vue+xlsx实现表格的导入导出功能

    vue+xlsx实现表格的导入导出功能

    这篇文章主要介绍了vue+xlsx实现表格的导入导出功能,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2023-11-11
  • VUE中使用滚动组件-vueSeamlessScroll

    VUE中使用滚动组件-vueSeamlessScroll

    这篇文章主要介绍了VUE中使用滚动组件-vueSeamlessScroll,需要的朋友可以参考下
    2023-10-10
  • Vue mixins混入使用解析

    Vue mixins混入使用解析

    如果我们在每个组件中去重复定义这些属性和方法会使得项目出现代码冗余并提高了维护难度,针对这种情况官方提供了Mixins特性,这时使用Vue mixins混入有很大好处,下面就介绍下Vue mixins混入使用方法,需要的朋友参考下吧
    2023-02-02
  • 详解vue beforeEach 死循环问题解决方法

    详解vue beforeEach 死循环问题解决方法

    这篇文章主要介绍了vue beforeEach 死循环问题解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • Vue 如何import服务器上的js配置文件

    Vue 如何import服务器上的js配置文件

    这篇文章主要介绍了Vue 如何import服务器上的js配置文件,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下
    2021-04-04
  • vue v-for循环重复数据无法添加问题解决方法【加track-by=''索引''】

    vue v-for循环重复数据无法添加问题解决方法【加track-by=''索引''】

    这篇文章主要介绍了vue v-for循环重复数据无法添加问题解决方法,结合实例形式分析了vue.js通过在v-for循环中添加track-by='索引'解决重复数据无法添加问题相关操作技巧,需要的朋友可以参考下
    2019-03-03
  • vue中如何动态绑定图片,vue中通过data返回图片路径的方法

    vue中如何动态绑定图片,vue中通过data返回图片路径的方法

    下面小编就为大家分享一篇vue中如何动态绑定图片,vue中通过data返回图片路径的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • vue实现底部菜单功能

    vue实现底部菜单功能

    本文通过实例代码给大家介绍了vue实现底部菜单功能,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
    2018-07-07

最新评论