xlsx to html c,js-xlsx使用
1.js-xlsx 介绍
由SheetJS出品的js-xlsx是一款非常方便的只需要纯JS即可读取和导出excel的工具库,功能强大,支持格式众多,支持xls、xlsx、ods(一种OpenOffice专有表格文件格式)等十几种格式。本文全部都是以xlsx格式为例。
本文同步首发于我的个人博客和博客园。
1.1. 兼容性
兼容性如下图:
1.2. 如何使用
dist目录下有很多个JS文件,一般情况下用xlsx.core.min.js就够了,xlsx.full.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文件functionreadWorkbookFromLocalFile(file, callback){varreader =newFileReader(); reader.onload =function(e){vardata = e.target.result;varworkbook = XLSX.read(data, {type:'binary'});if(callback) callback(workbook); }; reader.readAsBinaryString(file);}
2.1.2. 读取网络文件
// 从网络上读取某个excel文件,url必须同域,否则报错functionreadWorkbookFromRemoteFile(url, callback){varxhr =newXMLHttpRequest(); xhr.open('get', url,true); xhr.responseType ='arraybuffer'; xhr.onload =function(e){if(xhr.status ==200) {vardata =newUint8Array(xhr.response)varworkbook = 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,否则,表示一些特殊含义,具体如下:
sheet['!ref']:表示所有单元格的范围,例如从A1到F8则记录为A1:F8;
sheet[!merges]:存放一些单元格合并信息,是一个数组,每个数组由包含s和e构成的对象组成,s表示开始,e表示结束,r表示行,c表示列;
等等;
关于单元格合并,看懂下面这张图基本上就没问题了:
结果如下:
2.2.3. 单元格对象
每一个单元格是一个对象(Cell Object),主要有t、v、r、h、w等字段(详见这里):
t:表示内容类型,s表示string类型,n表示number类型,b表示boolean类型,d表示date类型,等等
v:表示原始值;
f:表示公式,如B2+B3;
h:HTML内容
w:格式化后的内容
r:富文本内容rich text
等等
2.2.4. 读取workbook
普通方法:
// 读取 excel文件functionoutputWorkbook(workbook){varsheetNames = workbook.SheetNames;// 工作表名称集合sheetNames.forEach(name=>{varworksheet = workbook.Sheets[name];// 只能通过工作表名称来获取指定工作表for(varkeyinworksheet) {// v是读取单元格的原始值console.log(key, key[0] ==='!'? worksheet[key] : worksheet[key].v); } });}
根据!ref确定excel的范围,再根据!merges确定单元格合并(如果有),最后输出整个table,比较麻烦,幸运的是,插件自身已经写好工具类XLSX.utils给我们直接使用,无需我们自己遍历,工具类输出主要包括如下:
有些不常用,常用的主要是:
XLSX.utils.sheet_to_csv:生成CSV格式
XLSX.utils.sheet_to_txt:生成纯文本格式
XLSX.utils.sheet_to_html:生成HTML格式
XLSX.utils.sheet_to_json:输出JSON格式
常用的主要是sheet_to_csv或者sheet_to_html,转csv的话会忽略格式、单元格合并等信息,所以复杂表格可能不适用。转html的话会保留单元格合并,但是生成的是代码,而不是
,需要对表格进行一些定制时不太方便,所以具体还是要视情况来采用合适的工具类。
这里写一个采用转csv方式输出结果的简单示例,可点击这里查看在线DEMO:
functionreadWorkbook(workbook){varsheetNames = workbook.SheetNames;// 工作表名称集合varworksheet = workbook.Sheets[sheetNames[0]];// 这里我们只读取第一张sheetvarcsv = XLSX.utils.sheet_to_csv(worksheet);document.getElementById('result').innerHTML = csv2table(csv);}// 将csv转换成简单的表格,会忽略单元格合并,在第一行和第一列追加类似excel的索引functioncsv2table(csv){varhtml ='
导出excel
导出分为2种,一种是基于现有excel修改,一种是全新生成,前者比较简单,我们这里着重讲后者。
3.1. 自己手写代码生成
导出excel文件,主要是如何生成一个sheet,我们这里写一个最简单的csv转excel示例:
// csv转sheet对象functioncsv2sheet(csv){varsheet = {};// 将要生成的sheetcsv = csv.split('\n'); csv.forEach(function(row, i){ row = row.split(',');if(i ==0) sheet['!ref'] ='A1:'+String.fromCharCode(65+row.length-1)+(csv.length-1); row.forEach(function(col, j){ sheet[String.fromCharCode(65+j)+(i+1)] = {v: col}; }); });returnsheet;}// 将一个sheet转成最终的excel文件的blob对象,然后利用URL.createObjectURL下载functionsheet2blob(sheet, sheetName){ sheetName = sheetName ||'sheet1';varworkbook = {SheetNames: [sheetName],Sheets: {} }; workbook.Sheets[sheetName] = sheet;// 生成excel的配置项varwopts = {bookType:'xlsx',// 要生成的文件类型bookSST:false,// 是否生成Shared String Table,官方解释是,如果开启生成速度会下降,但在低版本IOS设备上有更好的兼容性type:'binary'};varwbout = XLSX.write(workbook, wopts);varblob =newBlob([s2ab(wbout)], {type:"application/octet-stream"});// 字符串转ArrayBufferfunctions2ab(s){varbuf =newArrayBuffer(s.length);varview =newUint8Array(buf);for(vari=0; i!=s.length; ++i) view[i] = s.charCodeAt(i) &0xFF;returnbuf; }returnblob;}
拿到上面的blob对象就可以直接下载了,参考我之前在JS弹出下载对话框里面封装好的openDownloadDialog方法:
/**
* 通用的打开下载对话框方法,没有测试过具体兼容性
* @param url 下载地址,也可以是一个blob对象,必选
* @param saveName 保存文件名,可选
*/functionopenDownloadDialog(url, saveName){if(typeofurl =='object'&& urlinstanceofBlob) { url = URL.createObjectURL(url);// 创建blob地址}varaLink =document.createElement('a'); aLink.href = url; aLink.download = saveName ||'';// HTML5新增的属性,指定保存文件名,可以不要后缀,注意,file:///模式下不会生效varevent;if(window.MouseEvent) event =newMouseEvent('click');else{ event =document.createEvent('MouseEvents'); event.initMouseEvent('click',true,false,window,0,0,0,0,0,false,false,false,false,0,null); } aLink.dispatchEvent(event);}
所以,最终下载实现如下:
// 传入csv,执行后就会弹出下载框functionexportExcel(csv){varsheet = csv2sheet(csv);varblob = sheet2blob(sheet); openDownloadDialog(blob,'导出.xlsx');}
3.2. 利用官方工具类生成
其实上面这些代码都不需要我们手写,官方已经提供好了现成的工具类给我们使用,主要包括:
aoa_to_sheet: 这个工具类最强大也最实用了,将一个二维数组转成sheet,会自动处理number、string、boolean、date等类型数据;
table_to_sheet: 将一个table dom直接转成sheet,会自动识别colspan和rowspan并将其转成对应的单元格合并;
json_to_sheet: 将一个由对象组成的数组转成sheet;
aoa_to_sheet示例:
varaoa = [ ['姓名','性别','年龄','注册时间'], ['张三','男',18,newDate()], ['李四','女',22,newDate()]];varsheet = XLSX.utils.aoa_to_sheet(aoa);openDownloadDialog(sheet2blob(sheet),'导出.xlsx');
table_to_sheet就更简单了,直接XLSX.utils.table_to_sheet($('table')[0])即可;
3.3. 处理单元格合并
一般来说,前端生成excel而不是csv最主要目的都是为了解决csv不能实现单元格合并的问题,要不然直接导出csv文件就好了,何必引入几百kb的插件。
假设我们要生成如下格式的excel文件,其中A1-C1进行单元格合并:
代码如下:
varaoa = [ ['主要信息',null,null,'其它信息'],// 特别注意合并的地方后面预留2个null['姓名','性别','年龄','注册时间'], ['张三','男',18,newDate()], ['李四','女',22,newDate()]];varsheet = XLSX.utils.aoa_to_sheet(aoa);sheet['!merges'] = [// 设置A1-C1的单元格合并{s: {r:0,c:0},e: {r:0,c:2}}];openDownloadDialog(sheet2blob(sheet),'单元格合并示例.xlsx');
需要注意的地方就是被合并的单元格要用null预留出位置,否则后面的内容(本例中是第四列其它信息)会被覆盖。
3.4. 自定义样式
普通版本不支持定义字体、颜色、背景色等,有这个功能需要的可以使用pro版,好像是要收费的,因为官网没看到下载地址。
xlsx to html c,js-xlsx使用相关推荐
- vue 使用js XLSX读取 excel 转换日期格式
前言 大家好! 今天遇到了vue 使用js XLSX读取 excel 转换日期格式的问题,做个记录 问题 今天写excel文件上传时,遇到了时间格式没有正确转换的问题 解决方式 借用了 项目中读取 e ...
- python读取xlsx文件pandas_pandas dataframe 读取 xlsx 文件
refer to: dframe = pd.read_excel("file_name.xlsx") dframe = pd.read_excel("file_name. ...
- 跳过密码打开excel表格xlsx,忘记excel表格xlsx密码如何找回?
excel表格xlsx解密,excel表格xlsx权限限制如何解除?[解密神器]excel表格xlsx软件解密工具,我一直在用「密码帝」 超级好用,百度搜索密码帝就可以了!非常简单手机电脑都可以用,一 ...
- js xlsx自定义样式导出
使用的技术 xlsx 用于解析和编写各种电子表格.比如excel.csv.html文件 xlsx-style 为xlsx库添加样式,比如字体颜色,大小,行宽等.但是只支持xlsx.xlsm.xlsb格 ...
- JS+xlsx.js实现录入excel表格数据随机点名
娱乐小项目,做教学上课随机抽人用,因为班级较多,所以不想用数组的方式来进行存储,将excel表格的数据直接转换为JSON对象格式,再循环存入数组,通过数组下标随机数的方式,实现这样的一个效果. HTM ...
- vue js xlsx 读取 本地 excel
最近在写一个人力资源管理系统,主要目的是将本地的excel文件读取解析,将有效数据传到后台. 下文介绍流程,文末附有参考文章. 1.安装npm包xlsx yarn add xlsx 2.结合上传组件和 ...
- js xlsx获取表头
getHeaderRow(sheet) {const headers = []/* sheet['!ref']表示所有单元格的范围,例如从A1到F8则记录为 A1:F8*/const range = ...
- Vue项目安装XLSX成功后,生成项目报错:“export ‘default‘ (imported as ‘XLSX‘) was not found in ‘xlsx‘
在网上查了一下,主要是因为安装的xlsx版本不兼容问题到导致的于是安装了低版本的xlsx,版本为0.16.0,项目可成功运行,如下: 又试了一下0.17.0版本的,也可以运行.
- 下载xlsx表格 和 上传xlsx表格 方法 适用于vue react
exportXlsx函数下载xlsx, 安装 npm i downxlsxdog -S 引入 import { exportXlsx } from 'downxlsxdog' 调用格式 exportX ...
- html访问xlsx文件,【html】xlsx文件实现预览,浏览器实现xlsx文件的预览,前端实现xlsx文件的预览...
===================================================== 实现xlsx文件预览的快速的解决方案,使用微软提供的接口地址,直接拼接自己文件的url即可 ...
最新文章
- [异常处理]class kafka.common.UnknownTopicOrPartitionException (kafka.server.ReplicaFetcherThread)
- 搞懂了这几点,你就学会了Web编程
- 关于MVC框架和spring
- 关于性能测试的通俗解释
- Loading页的实现代码
- 样本分布不平衡,机器学习准确率高又有什么用?
- 从JVM的角度看JAVA代码1
- Oracle的order by关键字
- 在svn中发布多个工程
- 如何在Ruby中编写switch语句
- 使用 Jenkins + GitHub + Nginx + HTTPS 搭建静态网站
- 计算机定时开机命令,定时开关机
- Modbus转Profinet网关连接英威腾Goodrive200A配置案例
- moment.js时间格式转换
- 申论指导:申论作答的角度
- 图扑 Web 可视化引擎在仿真分析领域的应用
- 小知识:什么是HotFix?HotFix安装步骤及注意事项
- pe修改服务器2003密码,一文教你3分钟搞定忘记的windows密码
- HighCharts一个基于JavaScript的图表插件
- 基于STC单片机串口扩展网络通信的应用