html打开xls文件并显示其内容

表格内容：

html显示：

代码：

<!DOCTYPE html>
<html>
<head><title>test</title>
</head>
<body><input type="file" id="open-excel" ><div class="open"></div>
</body>
</html><script src="../jquery.js"></script>
<script src="https://cdn.bootcss.com/xlsx/0.11.9/xlsx.core.min.js"></script>
<script type="text/javascript">$(function(){$('#open-excel').change(function(e) {var files = e.target.files;var fileReader = new FileReader();fileReader.readAsBinaryString(files[0]); // 以二进制方式打开文件fileReader.onload = function(ev) {try {var data = ev.target.result,workbook = XLSX.read(data, {type: 'binary'}),values = []; // 存储获取到的数据} catch (e) {console.log('文件类型不正确');return;}// 遍历每张表读取for (var sheet in workbook.Sheets) {if (workbook.Sheets.hasOwnProperty(sheet)) {// 得到表数据并转成json格式values = values.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));var html = json2Html(values); // 把获取到的数据添加表格console.log('html',html)$('.open').html(html)break; // 如果只取第一张表，加上这行}}}});htmlKit = {_tags: [], html: [],_createAttrs: function (attrs) {var attrStr = [];for (var key in attrs) {if (!attrs.hasOwnProperty(key)) continue;attrStr.push(key + "=" + attrs[key] + "")}return attrStr.join(" ")},_createTag: function (tag, attrs, isStart) {if (isStart) {return "<" + tag + " " + this._createAttrs(attrs) + ">"} else {return "</" + tag + ">"}},start: function (tag, attrs) {this._tags.push(tag);this.html.push(this._createTag(tag, attrs, true))},end: function () {this.html.push(this._createTag(this._tags.pop(), null, false))},tag: function (tag, attr, text) {this.html.push(this._createTag(tag, attr, true) + text + this._createTag(tag, null, false))},create: function () {return this.html.join("")}};function json2Html(data) {console.log('data',data)var hk = htmlKit;hk.start("table", {"cellpadding": "10","cellspacing":"0", "border": "1"});hk.start("thead");hk.start("tr");hk.end();hk.end();hk.start("tbody");$.each(data,function (k, v) {if(k==0){hk.start("tr");$.each(v, function(key, val) {hk.tag("td", null, key)});hk.end()}hk.start("tr");$.each(v, function(key, val) {hk.tag("td", null, val)});hk.end()});hk.end();hk.end();return hk.create()}})</script>

参考示例：

1、JavaScript根据json生成html表格的示例代码
2、HTML选择Excel文件显示表格

html打开xls文件并显示其内容 demo相关推荐

计算机一级电子表格怎么打开,xls文件怎么打开？其实很简单
XLS 就是 Microsoft Excel 工作表,是一种非常常用的电子表格格式.我们在办公.学习中时常会用到.xls打开方式很多,其中最常用的就是用Microsoft Excel打开." ...
打开资源文件时显示说没有安装这个ActiveX控件 {648A5600-2C6E-101B-82B6-000000000014
mscomm32.ocx免费下载地址: http://www.rayfile.com/zh-cn/files/aa702b11-e11a-11e1-9c94-0015c55db73d/ 一.现象描述: ...
打开chm文件不能显示内容的解决办法
小知识: CHM 意为 Compiled HTML.以CHM为扩展名的文件图标通常为一个带问号的文档图标,表示帮助文档,是 Microsoft 自 Windows 98 以来提供的一种帮助文档格式的文 ...
C# Winform开发打开txt文件并显示在 RichTextBox中加上编辑后保存功能
添加一个openFileDialog组件,然后编写对应函数:这里事先定义了一个RichTextBox rtbInfo: private void OpenFromFile(){openFileDial ...
qaxwidget传递参数到html,记一次QT使用QAxWidget打开.html文件调用显示离线百度地图不能缩放，自定义图片不能显示解决方法...
主要问题: 一开始用的是在线的,都没有什么问题,自定义图片均可以显示,可是后面试了一下离线百度地图,在qt中运行打开.html文件和在电脑上面直接双击打开此文件显示是有差别的,在qt生成的程序中,地图 ...
使用XMind打开.mmap文件不显示问题
1.问题如下: 使用XMind直接打开.mmap文件时,不显示: 2.解决方式: 1.选择XMind左上方的'文件',然后选择'导入': 2.在弹出如下图页面选择Mindjet MindManager ...
如何打开sln文件并显示窗口_如何用VC 6.0 打开Sln的工程文件
http://blog.csdn.net/zhongjling/article/details/8442173 如何用VC 6.0 打开Sln的工程文件?在解答这一问题之前,要弄清楚 DSW 文件与 ...
如何打开sln文件并显示窗口_在.sln文件中设置Visual Studio默认启动项目的简单方法...
昨天在一台电脑上用git新签出一个项目进行build,却出现一堆编译错误,而在原先的开发机上build无任何错误.对比分析后发现,开发机上VS的启动项目(startup project)与这台电脑上的 ...
VB.NET 打开Excel文件，读取Excel内容，添加到DataGridView中并显示
'Excel添加:工程->参照追加→COM→Microsoft Excel *.* ObjectLibrary 'DataGridView 列枚举型定义 Private Enum ...

html打开xls文件并显示其内容 demo

html打开xls文件并显示其内容

表格内容：

html显示：

代码：

参考示例：

html打开xls文件并显示其内容 demo相关推荐

最新文章

热门文章