WEB技术之前端技术

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

PHPer 2020-04-14 1015次浏览 0条评论 0 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
    您需要登录后才可以评论。 登录 | 立即注册
    相关内容

    网站如何知道浏览器的用户在使用什么语言

    http://www.360doc.com/content/15/1110/21/3884271_512215449.shtml我们会看到很多支持多语言的网站,有些

    前端优化之lazy-load Chris__Liu

    https://www.jianshu.com/p/55bee3a7b8372019.03.05 21:44:21字数 196阅读 2,705页面加载性能问题最近我的BOSS

    关于编程时遇到意想不到的错误如何解决

    比如当你写的一个php脚本执行出现问题,如果你的脚本里自己带了对错误的处理,可能会显示那里出错...

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

    网上的代码有些坑,这里做了修正 function index2ColName($columnNumber) { var $dividend = $columnNum...

    如何查看链接的网络服务器例如游戏服务器的IP地址

    这个很简单,不需要安装专门软件就可以查看。第一步:运行你要查看的游戏第二步:打开任务管理器...
    推荐内容

    怎样使用V2Ray代理和SSTap玩如魔兽世界/绝地求生/LOL台...

    在网上找的ss+SSTap的方式都不能通过SSTap的链接测试。最后找到了v2ray+SSTap的方式。 注意事项,首先单独有v2ray看能不能正常上网。另外加速时要v2ray和SST...

    使用V2Ray的mKCP协议加速游戏

    当前脚本已发布新版本,地址: https://github.com/kuoruan/shell-scripts/raw/master/kcptun/kcptun.sh 旧仓库已废...

    v2rayN已停止工作

    要安装.NET Framework 4.6 或者更高版本

    解决'nmake' 不是内部或外部命令,也不是可运行的程序

    在用gifsicle时,需要在其src目录下使用 nmake -f Makefile.w32 命令,报错 'nmake' 不是内部或外部命令,也不是可运行的程序 或批处理文件。 于是网...

    超省心游戏加速:Wireguard+udp加速(CentOS版)--(

    Wireguard+udpspeeder+udp2raw游戏加速方案 ---------------------------------------错误报告及解决-----------...

    wireguard+udpspeeder+udp2raw多用户配置

    Wireguard+udpspeeder+udp2raw游戏加速方案改进版-实测有效