WEB技术之前端技术

如何使用JavaScript实现纯前端读取和导出excel文件

PHPer 2020-04-14 1909 0 0
更正了原文中的 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的工具库,功能强大,支持格式众多,支持xlsxlsxods(一种OpenOffice专有表格文件格式)等十几种格式。本文全部都是以xlsx格式为例。

1.1.兼容性

兼容性如下图:

91f9ac9eb9_normal.png

1.2.如何使用

dist目录下有很多个JS文件,一般情况下用xlsx.core.min.js就够了,xlsx.full.min.js则是包含了所有功能模块。

d5c65ff531_normal.png

直接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里面有什么东西呢,我们打印出来看一下:

1a863db484_normal.png

可以看到,SheetNames里面保存了所有的sheet名字,然后Sheets则保存了每个sheet的具体内容(我们称之为Sheet Object)。每一个sheet是通过类似A1这样的键值保存每个单元格的内容,我们称之为单元格对象(Cell Object):

ba18243faf_normal.png

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 开发工程师技术发展路线图

    excel 列索引(数字)转列名-修正亲测版20200414

    background:url(../images/list01.png) no-repeat 0 center;详解

    推荐内容

    分享几个好用的bt搜索bt资源下载网址网站

    影视电影剧集动漫综艺bt资源在线播放网址网站推荐分享

    全网最新bt磁力搜索引擎bt资源bt网站网址分享

    怎样使用V2Ray代理和SSTap玩如魔兽世界/绝地求生/LOL台服/战地3/黑色沙漠/彩...

    sstap游戏代理教程 从此玩如魔兽世界/绝地求生/LOL台服/战地3/黑色沙漠/彩虹六...

    使用V2Ray的mKCP协议加速游戏

    v2rayN已停止工作