vue读取本机的excel文件的两种方式

SnowAnna

已于 2022-11-16 10:39:24 修改

阅读量515

点赞数

分类专栏：前端提升功能片段代码和功能块文章标签：纯前端导入excel

于 2022-11-16 10:37:04 首次发布

本文链接：https://blog.csdn.net/weixin_38289699/article/details/127880067

版权

本文介绍了在Vue项目中，纯前端实现读取本地Excel文件并转换为JSON的两种方法。第一种方法利用input标签，通过绑定事件处理文件读取；第二种方法结合Element UI的upload组件，在before-upload钩子中读取文件内容。文章还提供了代码示例和参考链接。

摘要由CSDN通过智能技术生成

最近工作需要，需要纯前端实现导入excel形成json

安装依赖

1 | npm install xlsx

引入

更新：2022-04-26
最新的xlsx依赖包引入方式改变，以前的直接引入失败了，切换成以下依赖方式：

import { read, utils } from 'xlsx'

template中加入input

<input type="file" ref="upload" accept=".xls,.xlsx" class="outputlist_upload">

data中声明变量

   data() {
   	    return {
   	        outputs: []
   	    }
   	},

mounted中绑定事件

 mounted() {
   this.$refs.upload.addEventListener('change', e => {//绑定监听表格导入事件
 	 this.readExcel(e);
   })
 },

调用主函数

   readExcel(e) {
       var that = this;
       const files = e.

关注

专栏目录