|-转 如何使用JavaScript实现纯前端读取和导出excel文件
更正了原文中的
if(i == 0) sheet['!ref'] = 'A1:'+String.fromCharCode(65+row.length-1)+(csv.length-1);
改为
if(i == 0) sheet['!ref'] = 'A1:'+String.fromCharCode(65+row.length-1)+csv.length;
js-xlsx 介绍
由SheetJS出品的js-xlsx
是一款非常方便的只需要纯JS即可读取和导出excel的工具库,功能强大,支持格式众多,支持xls
、xlsx
、ods
(一种OpenOffice专有表格文件格式)等十几种格式。本文全部都是以xlsx
格式为例。
- 官方github:https://github.com/SheetJS/js-xlsx
- 本文配套demo在线演示地址:http://demo.haoji.me/2017/02/08-js-xlsx/
- 本文同步首发于我的个人博客和博客园。
1.1.兼容性
兼容性如下图:
1.2.如何使用
dist
目录下有很多个JS文件,一般情况下用xlsx.core.min.js
就够了,xlsx.full.min.js
则是包含了所有功能模块。
直接script
标签引入即可:
<script type="text/javascript" src="./js/xlsx.core.min.js"></script>
读取excel
读取excel主要是通过XLSX.read(data, {type: type});
方法来实现,返回一个叫WorkBook
的对象,type主要取值如下:
base64
: 以base64方式读取;binary
: BinaryString格式(byte n is data.charCodeAt(n))string
: UTF8编码的字符串;buffer
: nodejs Buffer;array
: Uint8Array,8位无符号数组;file
: 文件的路径(仅nodejs下支持);
2.1.获取workbook对象
2.1.1.读取本地文件
直接上代码:
// 读取本地excel文件
function readWorkbookFromLocalFile(file, callback) {
var reader = new FileReader();
reader.onload = function(e) {
var data = e.target.result;
var workbook = XLSX.read(data, {type: 'binary'});
if(callback) callback(workbook);
};
reader.readAsBinaryString(file);
}
2.1.2.读取网络文件
// 从网络上读取某个excel文件,url必须同域,否则报错
function readWorkbookFromRemoteFile(url, callback) {
var xhr = new XMLHttpRequest();
xhr.open('get', url, true);
xhr.responseType = 'arraybuffer';
xhr.onload = function(e) {
if(xhr.status == 200) {
var data = new Uint8Array(xhr.response)
var workbook = XLSX.read(data, {type: 'array'});
if(callback) callback(workbook);
}
};
xhr.send();
}
2.2.详解 workbook
2.2.1.Workbook Object
workbook
里面有什么东西呢,我们打印出来看一下:
可以看到,SheetNames
里面保存了所有的sheet名字,然后Sheets
则保存了每个sheet的具体内容(我们称之为Sheet Object
)。每一个sheet
是通过类似A1
这样的键值保存每个单元格的内容,我们称之为单元格对象(Cell Object
):
2.2.2.Sheet Object
每一个Sheet Object
表示一张表格,只要不是!
开头的都表示普通cell
,否则,表示一些特殊含义,具体如下:...
浏览更多内容请先登录。
立即注册
分享的网址网站均收集自搜索引擎以及互联网,非查问网运营,查问网并没有提供其服务,请勿利用其做侵权以及违规行为。
更新于:2020-04-15 23:41:38
相关内容
富文本编辑器
富文本编辑器Redactor在Yii2中的应用
WEB技术
WEB技术之前端技术
WEB技术之后端技术
WEB应用转手机APP,手机APP制作平台推荐
WEB应用与手机APP
Android相关
2017 年 Web 开发工程师技术发展路线图
session:手动删除客户端上的所有cookie,再次访问的时候为什么还是登录状态?
WEB技术之前端技术2
excel 列索引(数字)转列名-修正亲测版20200414
background:url(../images/list01.png) no-repeat 0 center;详解
推荐内容