js导出的xlsx无法打开_js文件操作之——导出Excel (js-xlsx)
前阵子跟server同学讨论一个Excel导出的需求,我说JS搞不定,需要server来做,被server同学强行打脸。
今天研究了下,尼玛,不光可以,还很强大了!
总结:经验是害人的,尤其是在发展迅速的前端圈儿,and,需要保持饥渴,保持对新技术的敏感度。
注:以下只探讨现代浏览器
1. 最简单的Excel导出
原理:js可以通过base64或者blob,把一个包含一个
var tableHtml='
only one |
';//base64 URL形式文件下载
var oa = document.createElement('a');
oa.href= 'data:application/vnd.ms-excel;base64,'+window.btoa(tableHtml);
oa.download= 'htmltable-base64.xls';//通过A标签 设置文件名
oa.click();
文件,在js中,除了可以是base64,也可以是一个blob。
- base64形式的文件描述,在js或者html中,就是一个很长的base4字符串
- blob形式的文件描述,在js或者html中,是一个URL形式的字符串,他指向的是浏览器内存中的一个文件片段,形如"blob:http://sheetjs.com/f999f57f-b79f-4293-a317-3bbf6ea58788"
blob形式的Excel导出,如下:
//blob URL形式文件下载
var tableHtml='
only one |
';var excelBlob = new Blob([tableHtml], {type: 'application/vnd.ms-excel'});var oa = document.createElement('a');
oa.href=URL.createObjectURL(excelBlob);
oa.download= 'htmltable-blob.xls';
document.body.appendChild(oa);
oa.click();
毛病:
- 这是个假的excel文件,只有xls格式可以在Excel中打开,xlsx不行。
2. 真正的Excel导出
是的,这里有一个真正的二进制Excel文件导出。
他就是一万多star的js-xlsx,地址:https://github.com/SheetJS/js-xlsx
我花了两个多小时,追了好一阵子他的https://github.com/SheetJS/js-xlsx/blob/master/xlsx.js,终于,我搞明白他是什么原理了。
以下拿他的官方demo举例,http://sheetjs.com/demos/table.html。
从网页的table DOM到Excel文件的演化过程如下:
2.1 网页上的table
This
is
a
Test
வணக்கம்
สวัสดี
你好
가지마
1
2
3
4
Click
to
edit
cells
2.2 sheet JSON
这里,他用一个json来描述了Excel表格中的A1,B1,C1等各个单元格。
{"Sheet JS":{"A1":{"t":"s","v":"This"},"B1":{"t":"s","v":"is"},"C1":{"t":"s","v":"a"},"D1":{"t":"s","v":"Test"},"A2":{"t":"s","v":"வணக்கம்"},"B2":{"t":"s","v":"สวัสดี"},"C2":{"t":"s","v":"你好"},"D2":{"t":"s","v":"가지마"},"A3":{"t":"n","v":1},"B3":{"t":"n","v":2},"C3":{"t":"n","v":3},"D3":{"t":"n","v":4},"A4":{"t":"s","v":"Click"},"B4":{"t":"s","v":"to"},"C4":{"t":"s","v":"edit"},"D4":{"t":"s","v":"cells"},"!ref":"A1:D4"}}
2.3 未压缩的zip文件
源码中的“write_zip_type”方法,它按照标准的电子表格格式协议,把上述JSON转成了下面的样子。
如下,很明显,这里面包含了一些乱码和一些xml描述。
(这里本着不求甚解的精神,我咨询了一下我们部门的资深技术专家,他搭眼一看,说这是一个未压缩的zip。我也懒得输出一下zip来验证这个了,他说是,那就是了)
PK
ÃæLÖ|ZZdocProps/core.xml<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
PK
ÃæLþù«44docProps/app.xml<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
SheetJSWorksheets1Sheet JSPK
ÃæLTÄ8ããxl/worksheets/sheet1.xml<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
ThisisaTestவணà®à¯à®à®®à¯à¸ªà¸§à¸±à¸ªà¸à¸µä½ 好ê°ì§ë§1234ClicktoeditcellsPK
ÃæLÜè¯ÏDDxl/workbook.xml<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
PK
ÃæL0kÞÞxl/theme/theme1.xml<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
PK
ÃæLUôZZ
xl/styles.xml<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
PK
ÃæL÷Â00[Content_Types].xml<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
PK
ÃæLJjùLL_rels/.rels<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
PK
ÃæLÐ?dÝ--xl/_rels/workbook.xml.rels<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
PK
ÃæLÖ|ZZdocProps/core.xmlPK
ÃæLþù«44docProps/app.xmlPK
ÃæLTÄ8ããëxl/worksheets/sheet1.xmlPK
ÃæLÜè¯ÏDDxl/workbook.xmlPK
ÃæL0kÞÞu xl/theme/theme1.xmlPK
ÃæLUôZZ
'xl/styles.xmlPK
ÃæL÷Â00 ,[Content_Types].xmlPK
ÃæLJjùLLj3_rels/.relsPK
ÃæLÐ?dÝ--ß5xl/_rels/workbook.xml.relsPK >D8
2.4 Blob URL
其实,我最感兴趣的是这儿。2.3中的一大坨字符串,通过 Uint8Array转成了无符号数组,并通过new Blob方法,转成了二进制文件片段,关键代码如下:
functionblobify(strData) {var buf = new ArrayBuffer(strData.length), view = newUint8Array(buf);for (var i=0; i!=strData.length; ++i) view[i] = strData.charCodeAt(i) & 0xFF;returnbuf;
}var excelBlob = new Blob([blobify(data)], {type:"application/octet-stream"});var blobURL=URL.createObjectURL(excelBlob);
最后,通过URL.createObjectURL方法,把blob转成了,肉眼可见的js和HTML中可以看到的,Blob URL,如下:
blob:http://sheetjs.com/f999f57f-b79f-4293-a317-3bbf6ea58788
尼玛,一个html转Excel的库js,有20170行代码,恩,不错,开源万岁。
3. 总结
看起来,先不说性能如何,上面这些关键API利用一下,js应该是可以导出很多种格式的文件了。
- 文本类的,txt html js css xml
- 特定协议的文档,pdf Excel cvs(看起来word ppt 应该也可以了,懒得去查了)
- 其他各类二进制文件,zip png jpg gif (不晓得是不是可以导出音视频...)
js导出的xlsx无法打开_js文件操作之——导出Excel (js-xlsx)相关推荐
- node js批量导出PDF 导出压缩为zip 拆分设计 文件压缩 批量导出设计
node导出pdf网上有不少介绍的文章,之前我也有过这方面的需求,总结一下遇到的问题,给大家点参考建议. 导出PDF大概会遇到以下几个阶段: 1.导出单个PDF文件 2.导出多个PDF文件 下面着重说 ...
- arcgis导出access数据库能打开的文件
arcgis有两种数据库 1.个人地理数据库(.mdb)(Access数据库可以打开查看属性) 2.文件地理数据库(.gdb) 其中个人地理数据库 (.mdb)可以用Access数据库打开 在文件中显 ...
- 无法打开物理文件 操作系统错误 5:拒绝访问 SQL Sever
今天分离附加数据库,分离出去然后再附加,没有问题.但是一把.mdf文件拷到其它文件夹下就出错,错误如下: 无法打开物理文件 "E:\db\homework.mdf".操作系统错误 ...
- jsbox 导入_js文件操作——导出导入
文章来源:小青年原创 发布时间:2016-08-16 关键词:blob,File,FileReader,DataURI,URL 写在前面 这段时间一直有朋友在问文件上传下载的事,搜一下论坛发现相关的问 ...
- C# 打开指定文件夹下的excel
先弹出一个对话框 if (MessageBox.Show("EXCEL will open", "Sure", MessageBoxButtons.YesNo) ...
- 关于Visio的vba操作,遍历目录,对所有vsd文件操作,导入excel文件
1.vba遍历要添加引用,runtime 2.不能打开单独的application,因为在获取到shape的picture属性时候,新打开的application不能够获取到.提示自动化错误. 3.定 ...
- phpMyAdmin将数据表中数据导出为csv文件,用微软excel打开时,中文乱码的原因以及解决办法
中文乱码的原因:用户使用phpMyAdmin可以将数据表中数据导出为csv文件,而使用Excel工具打开该文件时,可能出现中文乱码的情况.这是因为phpMyAdmin导出的csv文件使用了UTF-8编 ...
- excel打开大文件很卡
excel表格文件数据太大打不开怎么解决方案呢?今天就教大家如何操作excel打开大文件方法. excel打开大文件很卡解决方案 excel打开大文件很卡解决方案1.如图可以看到,excel打开大文件 ...
- html打开 选择您,教您Win10怎么打开html文件
近来,一些用户在Windows10系统遇到一个的问题,电脑中的某个应用导致html文件默认应用设置出现故障,因此它已重置为Edge.也就是说用户此时打开Htm或Html文件会默认使用Edge.不过,他 ...
最新文章
- 为什么机器学习模型在生产中会退化?
- python define graph_Python数据结构与算法之图结构(Graph)实例分析
- 【数据结构-图】1.图的构造和遍历(基本理论+代码)
- 在asp.net中控制回车键
- The 2018 ACM-ICPC Chinese Collegiate Programming Contest B. Rolling The Polygon
- Python 随机森林分类
- JAVA应用开发MQ实战最佳实践——Series2:消息队列RocketMQ性能测试案例
- DXOMark公布最新相机综合评分:华为P30 Pro不再是唯一王者
- 使用TensorFlow.js的AI聊天机器人五:创建电影对话聊天机器人
- before和after怎么区分_深入理解::before/:before和::after/:after的使用
- utilities——比较与排序规则(C++)
- mysql nb3 备份_Navicat mysql 数据库备份和使用,备份以后是nb3文件-Go语言中文社区...
- Linux学习笔记 --网络配置及进程管理
- ubuntu mysql5.5编码_Ubuntu下MySQL5.5编码设置
- 太厉害了,终于有人能把Ansible讲的明明白白了,建议收藏
- 修改openwrt或者LEDE默认wifi名称以及默认开启wifi
- NTP时间戳和UTC时间戳互转及其原理
- 1222222222
- PS设计漂亮网站主页图片的实例教程
- Vue +Element UI (饿了么UI) +Echarts 实现图表自适应配置
热门文章
- c语言数码管加法程序怎么写,拜托大神写数码管与矩阵键盘结合设计简易计算器C语言的程序...
- javascript date php date,JavaScript Date 知识浅析
- 商品详情页html,天天生鲜商品详情页HTML+css
- backupexec mysql_MySQL备份可能遇到的坑
- 计算机应用技术专业全国排名,计算机应用技术专业全国排名
- java安全(五)java反序列化
- 安装php独立环境,0507-php独立环境的安装与配置 Web程序 - 贪吃蛇学院-专业IT技术平台...
- python计算执行时间的函数_[python] 统计函数运行时间
- python爬取微博内容_请问该如何通过python调用新浪微博的API来爬取数据?
- 常用命令_GIT常用命令大全