新普京网站-澳门新普京 > 新普京网站 > IO案例分享_javascript技巧_脚本之家

IO案例分享_javascript技巧_脚本之家

2019/12/30 03:51

在一些要求不是很高的小项目中,可以使用一些虽不是通用且不是新技术但是确实可以很好实现功能的技术来实现这些功能。这样系统不是显示的很复杂,且可以方便维护。新建一个exportPrint.html页面,里面的代码如下所示,就可以实现导出到Excel和打印网页。

公司最近要为某国企做一个**统计和管理系统,

复制代码 代码如下:

具体要求包含•Excel导入导出•根据导入的数据进行展示报表•图表展示,而且还要求要有动画效果,扁平化风格•Excel导出,并要提供客户端来管理Excel 文件•...

IE浏览器使用JS技术导出到Excel和打印

现在总算是完成了,于是将我的经验分析出来。

用户信息


姓名

在整个项目架构中,首先就要解决Excel导入的问题。

张三

由于公司没有自己的框架做Excel IO,就只有通过其他渠道了。

嗯,我在github上找到了一个开源库xlsx,通过npm方式来安装。npm install xlsx --save 之后,在自己的html文件里面添加对js文件的引用

通过FileReader对象将数据以二进制字符串的方式加载到内存中,

target.addEventListener { e.preventDefault(); handleDrop(e.dataTransfer.files[0]);});handleDrop = function(){ var reader = new FileReader(); reader.onload = function  { var data = e.target.result; ... ... }; reader.readAsBinaryString;} 

然后我们下来的操作就是要利用库对data数据进行操作了。

它暴露了一个对象XLSX,通过XLSX的read() 方法就可以将数据读为JSON对象了。

var workbook = XLSX.read(data, { type: 'binary' });var sheetName = workbook.SheetNames[0];var sheet = workbook.Sheets[sheetName]; 

之后,使用键值对的方式再把数据从sheet中取出来放到表格中。

var table = document.createElement;for  { if (sheet['A' + row] == null) { break; } var tr = document.createElement; for (var col = 65; col <= 90; col++) { var c = String.fromCharCode;// get 'A', 'B', 'C' ... var key = '' + c + row; if  { break; } var td = document.createElement; td.innerHTML = sheet[key]['w']; tr.appendChild; } table.appendChild;}document.querySelector.appendChild; 

下面是完整代码:index.html

 Document  #target { height: 400px; width: 700px; background-color: #f8f8f8; margin: 200px auto; overflow:hidden; border-radius:5px; box-shadow:2px 2px 5px #888; } .hover::before { content: '请将excel文件拖到这里'; width: 100%; height: 100%; display: block; text-align: center; line-height: 400px; font-size: 24px; font-family: '微软雅黑'; } #target>table{ height:250px; width:400px; border:1px solid #ccc; border-radius:3px; margin:75px auto; } #target>table td{ text-align:center; border-top:1px solid #ccc; border-left:1px solid #ccc; } #target>table tr:first-child>td{ border-top:0px solid #ccc; } #target>table tr>td:first-child{ border-left:0px solid #ccc; }       

下面是完整js代码index.js

window.addEventListener { var target = document.querySelector; target.addEventListener('dragenter', function () { this.classList.remove; target.addEventListener('dragleave', function () { this.classList.add; target.addEventListener('dragover', function  { this.classList.remove; e.preventDefault; target.addEventListener { e.preventDefault(); handleDrop(e.dataTransfer.files[0]); });});var handleDrop = function  { var reader = new FileReader(), name = f.name; reader.onload = function  { var data = e.target.result, workbook = XLSX.read(data, { type: 'binary' }), sheetName = workbook.SheetNames[0], sheet = workbook.Sheets[sheetName], table = document.createElement; for  { if (sheet['A' + row] == null) { break; } var tr = document.createElement; for (var col = 65; col <= 90; col++) { var c = String.fromCharCode;// get 'A', 'B', 'C' ... var key = '' + c + row; if  { break; } var td = document.createElement; td.innerHTML = sheet[key]['w']; tr.appendChild; } table.appendChild; } document.querySelector.appendChild; }; reader.readAsBinaryString;} 

这样做好像可行,但是我们很快就放弃了。弊端太多了。•这个库现在目前还处于开发阶段,在issues里面还有很多的Bug被提出。这没有办法保证最终网站的稳定性。•这个库没有办法导入合并单元格的数据,只能是很死板的按照'A', 'B', 'C'... 和1, 2, 3 坐标来查询数据,而且它要求内部单元格不能为空。•更比较不方便的就是,它没有行和列的计数的属性。•由于这是为国企做的,所以无法将关键功能依赖于这个star量不是很多的库,降低风险,也是为了网站的安全性。•...--------------------------------------------------------------------------------

经过小组探讨,我们决定使用另外一款前端控件,叫做 Wijmo。首先,从网站上下载Wijmo包,这个控件没有提供npm和bower等方式。

然后将我需要的包导入进来

此外,还有引入一个jszip的包,是使用js来解压压缩包的一个库。(由于MS的open xml技术,xlsx文件都可以解压成为xml文件,app.xml 里包含了主要的数据)。

读取文件的操作和上面都是一样的

var handleDrop = function  { var reader, workbook; if  { reader = new FileReader; reader.onload = function  { workbook = new wijmo.xlsx.Workbook(), workbook.load; }; reader.readAsDataURL; }} 

通过workbook = new wijmo.xlsx.Workbook();workbook.load; 这两行代码将excel文件加载到内存 中的workbook对象。

上一篇:测试的相关概念 下一篇:没有了