不是用第三方插件,用JS 解析 excel 文件
参考:https://juejin.cn/post/7154395040507232264
excel 表格文件到底是什么
首先要解析 excel
文件,得先了解他是如何存储数据的,经过我百般搜索,终于在 GG
中找到了答案:excel
文件其实是一个 zip
包!于是我赶紧新建了一个 xlsx
文件,在其中新建了两个 sheet
表,两个 sheet
表数据如下:
然后使用 zip
进行解压:
unzip test.xlsx -d test
然后通过 tree
我们就拿到这样一个目录结构:
test
├── [Content_Types].xml
├── _rels
├── docProps
│ ├── app.xml
│ ├── core.xml
│ └── custom.xml
└── xl
├── _rels
│ └── workbook.xml.rels
├── sharedStrings.xml
├── styles.xml
├── theme
│ └── theme1.xml
├── workbook.xml
└── worksheets
├── sheet1.xml
└── sheet2.xml
我们在打开 xml
一探究竟,可以看出有几个文件很显眼,就是 worksheets
下的 sheet1.xml
和 sheet2.xml
,还有 workbook.xml
,其他的 styles
、theme
一看就是和样式有关系,_rels
感觉就是什么内部引用,我们先看看两个 sheet
的 xml
文件,看看猜测是否正确,贴下 sheet1.xml
:
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<worksheet xmlns="http://schemas.openxmlformats.org/spreadsheetml/2006/main"
xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships"
xmlns:xdr="http://schemas.openxmlformats.org/drawingml/2006/spreadsheetDrawing"
xmlns:x14="http://schemas.microsoft.com/office/spreadsheetml/2009/9/main"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:etc="http://www.wps.cn/officeDocument/2017/etCustomData">
<sheetPr/>
<dimension ref="A1:C7"/>
<sheetViews>
<sheetView workbookViewId="0">
<selection activeCell="D5" sqref="A3:D5"/>
</sheetView>
</sheetViews>
<sheetFormatPr defaultColWidth="9.23076923076923" defaultRowHeight="16.8" outlineLevelRow="6" outlineLevelCol="2"/>
<sheetData>
<row r="1" spans="1:3">
<c r="A1">
<v>1</v>
</c>
<c r="C1">
<v>2</v>
</c>
</row>
<row r="2" spans="1:3">
<c r="A2">
<v>1</v>
</c>
<c r="C2">
<v>2</v>
</c>
</row>
<row r="6" spans="1:3">
<c r="A6">
<v>1</v>
</c>
<c r="C6">
<v>2</v>
</c>
</row>
<row r="7" spans="1:3">
<c r="A7">
<v>1</v>
</c>
<c r="C7">
<v>2</v>
</c>
</row>
</sheetData>
<pageMargins left="0.75" right="0.75" top="1" bottom="1" header="0.5" footer="0.5"/>
<headerFooter/>
</worksheet>
相信大家已经看出来了,sheetData
就是 excel
表格中的数据了,<row>
代表行,其中的 r
则是行数索引,row
中的 <c>
应该是 cell
了,其中的 <v>
对应着 cell
中的值,而 r
则是 cell
的位置,如 A7
代表着在 A
列 7 行。
此外还有几个很明显的属性如 dimension
可以看出是表格的大小范围,从 A1 cell
到 C7 cell
形成一个框。<sheetViews>
中存储的应该是页面中的信息,<selection>
代表的应该就是被选中的表格内容了。
而 workbook
中存储的则是 sheet
的信息:
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<workbook xmlns="http://schemas.openxmlformats.org/spreadsheetml/2006/main"
xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships">
<fileVersion appName="xl" lastEdited="3" lowestEdited="5" rupBuild="9302"/>
<workbookPr/>
<bookViews>
<workbookView windowHeight="16360" activeTab="1"/>
</bookViews>
<sheets>
<sheet name="Sheet1" sheetId="1" r:id="rId1"/>
<sheet name="Sheet2" sheetId="2" r:id="rId2"/>
</sheets>
<calcPr calcId="144525"/>
</workbook>
剩下的几个 xml
,大概看了一眼,存储的信息还算很清楚,比如:
app
中存储了文件程序的信息,好像还有文件名core
中保存了作者的信息和创建、修改时间rels
文件也是xml
格式,存储了一些其它xml
的引用theme
里存储了表格中定义的颜色、字体[Content_Types]
里则是所有文件的引用,猜测估计为解析的入口文件
JS 实现步骤
知道了 excel
文件是如何存储数据的,那我们如何用 js
来解析它就很清楚了,主要分三步:
- 使用
js
解压缩excel
文件 - 获取到其中的
sheet
文件内容,然后将xml
数据解析出来 - 将数据转换成我们想要的形状
说干就干,那我们来实操一下:
ZIP 解压
关于 JS
如何实现 ZIP
解压的,上一篇文章也有提到,这里我们就不细说,直接使用 jszip
搞定:
document.querySelector('#file').addEventListener('change', async e => {
const file = e.target.files[0];
if (!file) return;
const zip = await JSZip.loadAsync(file);
const sheetXML = await zip.files['xl/worksheets/sheet1.xml'].async('string');
});
快速搞定,现在 sheetXML
就是我们刚刚看到的 sheet1.xml
中的数据了。
XML 解析
然后我们即可解析 XML
内容将其中数据取出,xml
解析原理很简单,和 html parse
一样,了解原理咱就直接随便搞个开源库帮忙搞定:
import convert from 'xml-js';
const result = convert.xml2json(sheetXML, { compact: true, spaces: 4 });
然后我们就得到了这样一串 JSON
(删除了部分内容):
{
"_declaration": {
"_attributes": {}
},
"worksheet": {
"_attributes": {},
"sheetPr": {},
"dimension": {
"_attributes": {
"ref": "A1:C7"
}
},
"sheetData": {
"row": [
{
"_attributes": {
"r": "1",
"spans": "1:3"
},
"c": [
{
"_attributes": {
"r": "A1"
},
"v": {
"_text": "1"
}
},
{
"_attributes": {
"r": "C1"
},
"v": {
"_text": "2"
}
}
]
},
{
"_attributes": {
"r": "7",
"spans": "1:3"
},
"c": [
{
"_attributes": {
"r": "A7"
},
"v": {
"_text": "1"
}
},
{
"_attributes": {
"r": "C7"
},
"v": {
"_text": "2"
}
}
]
}
]
}
}
}
接下来,我们只需要将 sheetData
中的数据取出,然后按照内部的属性生成自己想要的数据格式即可。
excel
文件本质就是一个 zip
包,我们只需要通过 zip
解压、xml
解析、数据处理这三个步骤,即可使用 JS
读取到其中的数据,当然其中的细节还是很多的,不过如果只是简单的 excel
模版,不妨自己尝试一下。
不是用第三方插件,用JS 解析 excel 文件的更多相关文章
- JS解析XML文件和XML字符串
JS解析XML文件 <script type='text/javascript'> loadXML = function(xmlFile){ var xmlDoc=null; //判断浏览 ...
- js前端解析excel文件
使用纯Javascript解析excel文件. 使用的是开源的解析excel的js库:sheetjs.github地址:https://github.com/SheetJS/js-xlsx 首先引用J ...
- AngularJS之前端解析excel文件
之前发现一款比较强大的js解析excel插件SheetJS js-xlsx,一直未投入到生产中使用.最近有批量导入的需求,大致看了下文档,使用比较方便快捷,容易上手,现在以AngularJS为例,介绍 ...
- node.js之excel文件读取
金天:学习一个新东西,就要持有拥抱的心态,如果固守在自己先前的概念体系,就会有举步维艰的感觉.node.js解析excel, 读取记录. 业务需求,从excel (xlsx, xls)导入数据. 备选 ...
- Java:JXL解析Excel文件
项目中,有需求要使用JXL解析Excel文件. 解析Excel文件 我们先要将文件转化为数据流inputStream. 当inputStream很大的时候 会造成Java虚拟器内存不够 抛出内存溢出 ...
- c++ 读取并解析excel文件方法
用Cocos开发模型特效工具编辑器,跨Mac和windows,当中有个需求是读取并解析excel文件,但网上的查找的例子几乎都只能是在windows下面使用,再或者是命令行脚本之类的.于是,自己写了一 ...
- nodejs 解析excel文件
app.js: var FileUpload = require('express-fileupload') app.use(FileUpload()); service.js: npm instal ...
- 自动化测试如何解析excel文件?
前言 自动化测试中我们存放数据无非是使用文件或者数据库,那么文件可以是csv,xlsx,xml,甚至是txt文件,通常excel文件往往是我们的首选,无论是编写测试用例还是存放测试数据,excel都是 ...
- 解析Excel文件并把数据存入数据库
前段时间做一个小项目,为了同时存储多条数据,其中有一个功能是解析Excel并把其中的数据存入对应数据库中.花了两天时间,不过一天多是因为用了"upload"关键字作为URL从而导致 ...
- Java通过jxl解析Excel文件入库,及日期格式处理方式 (附源代码)
JAVA可以利用jxl简单快速的读取文件的内容,但是由于版本限制,只能读取97-03 xls格式的Excel. 本文是项目中用到的一个实例,先通过上传xls文件(包含日期),再通过jxl进行读取上传 ...
随机推荐
- C语言写的 史上最公平的投票系统
#include<stdio.h> #include<string.h> #define MMM 4 struct student { char name[10]; int c ...
- MornHus--一个野生蒟蒻的生成
野生蒟蒻一个. 蒟蒻的洛谷首页:MornHus 蒟蒻已经遗弃的CSDN首页:MornHus 写博的内容: 主要就是平时写写算法的笔记,有的时候写点数学题,有的时候还会搞一些奇怪的东西[doge] 大蒟 ...
- Angularjs的重要概念
AngularJS的重要概念 MVC模式 AngularJS最早按照MVC模式设计,在这种设计模式下,AngularJS组件可以分为: M: Model,即模型,是应用程序中用于处理应用程序数据逻辑的 ...
- Python第三方库arrow
Python第三方库arrow https://pypi.org/project/arrow/ 简介 处理时间日期的一个第三方库 Arrow is a Python library that offe ...
- LeetCode_单周赛_327
目录 6283. 正整数和负整数的最大计数 代码 6285. 执行 K 次操作后的最大分数 代码 6284. 使字符串总不同字符的数目相等 代码 6283. 正整数和负整数的最大计数 代码 直接遍历统 ...
- sqlserver数据库批量新增修改类
MSSql Server 数据库批量操作 需要引用的命名空间 using System; using System.Collections.Generic; using System.Data; us ...
- C#IIS上传文件大小设置问题:maxRequestLength、maxAllowedContentLength
system.web节点下的 maxRequestLength属性来指定最大上传文件的size,默认值是4M <system.web> <httpRuntime maxRequest ...
- YouCompleteMe用法总结
1.将.ycm_extra_conf.py拷贝到工程目录,然后打开,将自己的include目录添加进去
- ransac拟合
链接:https://zhuanlan.zhihu.com/p/62238520 RANSAC简介 RANSAC(Random Sample Consensus,随机采样一致)算法是从一组含有&quo ...
- html+css+js实现一个简易日历
0.效果预览 只实现了日历最基础的功能,当前日期红色显示,可通过上方的左右按钮查看上一月或下一月的日期. 1.HTML部分 1 <body> 2 <div id="cldF ...