纯前端解析excel文件

for_weber

于 2018-08-21 15:01:57 发布

阅读量1.2w

点赞数 6

CC 4.0 BY-SA版权

分类专栏： javascript Vue相关

本文链接：https://blog.youkuaiyun.com/for_weber/article/details/81903875

这篇博客分享了在Vue项目中纯前端解析Excel文件的方法。首先通过npm安装xlsx库，然后在组件中引入。使用原生input输入框接收文件，通过监听change事件进行解析。文中展示了关键的数据输出，包括resultJson、resultFormulae、tableHeader和importInfo，重点讲解xlsx库的使用，适合不同框架和库的开发者参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目需要，前端解析简单的excel文件，查找了网上的文章资料，加上按实际需要修改，写出来供大家参考。

项目是vue的，先安装xlsx，这个不用多说，npm install xlsx就完事了。

然后需要在组件中引入一下。

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

我项目中的这个导入用的是原生input输入框。简洁明了。如果觉得样式丑，可以搞个div用定位写在同样的位置，把input设个透明就好了。jquery的更简单，trigger简直不要太好用。

下面是重点，拿到导入的文件，然后解析。为了让大家看的清楚，我把他们都写在input的change事件中了。

            getUploadFile (e) {
                //拿到所导入文件的名字
                let fileName = e.target.files[0]
                //定义reader，存放文件读取方法
                let reader = new FileReader()
                //启动函数
                reader.readAsBinaryString(fileName)
                //onload在文件被读取时自动触发