公司最近要为某国企做一个**统计和管理系统,
具体要求包含
"nofollow" target="_blank" href="https://github.com/SheetJS/js-xlsx">xlsx,通过npm方式来安装。
npm install xlsx --save
之后,在自己的html文件里面添加对js文件的引用
<script src="/UploadFiles/2021-04-02/jszip.js">
<script src="./node_modules/xlsx/dist/xlsx.js">
通过FileReader对象将数据以二进制字符串的方式加载到内存中,
target.addEventListener('drop', function (e) { e.preventDefault(); handleDrop(e.dataTransfer.files[0]); }); handleDrop = function(){ var reader = new FileReader(); reader.onload = function (e) { var data = e.target.result; ... ... }; reader.readAsBinaryString(f); }
然后我们下来的操作就是要利用库对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('table'); for (var row = 1; ; row++) { if (sheet['A' + row] == null) { break; } var tr = document.createElement('tr'); for (var col = 65; col <= 90; col++) { var c = String.fromCharCode(col);// get 'A', 'B', 'C' ... var key = '' + c + row; if (sheet[key] == null) { break; } var td = document.createElement('td'); td.innerHTML = sheet[key]['w']; tr.appendChild(td); } table.appendChild(tr); } document.querySelector('#target').appendChild(table);
下面是完整代码:
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #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; } </style> </head> <body> <div id="target" class="hover"> </div> <script src="/UploadFiles/2021-04-02/jszip.js">下面是完整js代码
index.js
window.addEventListener('load', function () { var target = document.querySelector('#target'); target.addEventListener('dragenter', function () { this.classList.remove('hover'); }); target.addEventListener('dragleave', function () { this.classList.add('hover'); }); target.addEventListener('dragover', function (e) { this.classList.remove('hover'); e.preventDefault(); }); target.addEventListener('drop', function (e) { e.preventDefault(); handleDrop(e.dataTransfer.files[0]); }); }); var handleDrop = function (f) { var reader = new FileReader(), name = f.name; reader.onload = function (e) { var data = e.target.result, workbook = XLSX.read(data, { type: 'binary' }), sheetName = workbook.SheetNames[0], sheet = workbook.Sheets[sheetName], table = document.createElement('table'); for (var row = 1; ; row++) { if (sheet['A' + row] == null) { break; } var tr = document.createElement('tr'); for (var col = 65; col <= 90; col++) { var c = String.fromCharCode(col);// get 'A', 'B', 'C' ... var key = '' + c + row; if (sheet[key] == null) { break; } var td = document.createElement('td'); td.innerHTML = sheet[key]['w']; tr.appendChild(td); } table.appendChild(tr); } document.querySelector('#target').appendChild(table); }; reader.readAsBinaryString(f); }效果如下:
这样做好像可行,但是我们很快就放弃了。
弊端太多了。
"nofollow" target="_blank" href="http://wijmo.gcpowertools.com.cn/">Wijmo。
首先,从网站上下载Wijmo包,这个控件没有提供npm和bower等方式。
然后将我需要的包导入进来
<script src="/UploadFiles/2021-04-02/wijmo.min.js">此外,还有引入一个jszip的包,是使用js来解压压缩包的一个库。(由于MS的open xml技术,xlsx文件都可以解压成为xml文件,app.xml 里包含了主要的数据)。
<script src="./jszip.min.js"> 读取文件的操作和上面都是一样的
var handleDrop = function (file) { var reader, workbook; if (file) { reader = new FileReader; reader.onload = function (e) { workbook = new wijmo.xlsx.Workbook(), workbook.load(reader.result); }; reader.readAsDataURL(file); } }通过
workbook = new wijmo.xlsx.Workbook();
workbook.load(reader.result);
这两行代码将excel文件加载到内存 中的workbook对象。
打印workbook对象
打印这个对象发现,workbook里面包含sheets数组,每个sheet包含rows数组,每个row包含cells数组,每个cell里面vaule属性就是单元格的值。
这简直太又好了
下面实现一个函数 getCollectionView ,以对象数组的方式来获取数据
var getCollectionView = function (workbook) { var collectionView = []; if (workbook) { var sheet = workbook.sheets[0], header = []; // 列标题数组 for (var i = 0, length = sheet.rows.length; i < length; i++) { var row = sheet.rows[i], rowArray = {}; for (var j = 0, jLength = row.cells.length; j < jLength; j++) { var cell = row.cells[j]; // 如果是第一行数据,那么是作为列标题出现的,就放进标题数组中 if (i === 0) { header.push(cell.value); } else { // 后面的行数组,就作为rowArray对象的属性存储,属性名就是该列的标题。 rowArray[header[j]] = cell.value; } } if (i !== 0) { collectionView.push(rowArray); } } } return collectionView; }然后需要一个表格将数据呈现出来,这里我直接使用了Wijmo的FlexGrid表格。
gridDiv = document.createElement('div'); gridDiv.classList.add('grid'); dataGrid = new wijmo.grid.FlexGrid(gridDiv);// 通过传入容器构造一个FlexGrid表单。 var collectionView = new wijmo.collections.CollectionView(getCollectionView(workbook)); dataGrid.itemsSource = collectionView;好了,经过上面几个步骤,导入Excel到表格已经实现了
这是完整的js代码:
index.js
(function () { var dataGrid = null, gridDiv = null, workbook = null; window.addEventListener('load', function () { gridDiv = document.createElement('div'); gridDiv.classList.add('grid'); dataGrid = new wijmo.grid.FlexGrid(gridDiv); var target = document.querySelector('#target'); target.addEventListener('dragenter', function (e) { e.preventDefault(); this.classList.remove('hover'); }); target.addEventListener('dragleave', function (e) { e.preventDefault(); this.classList.add('hover'); }); target.addEventListener('dragover', function (e) { e.preventDefault(); this.classList.remove('hover'); }); target.addEventListener('drop', function (e) { e.preventDefault(); handleDrop(e.dataTransfer.files[0]); // 将这个表单添加到页面上 this.appendChild(gridDiv); }); }); var handleDrop = function (file) { var reader; var workbook; if (file) { reader = new FileReader; reader.onload = function (e) { workbook = new wijmo.xlsx.Workbook(); workbook.load(reader.result); var collectionView = new wijmo.collections.CollectionView(getCollectionView(workbook)); dataGrid.itemsSource = collectionView; // console.log(dataGrid.collectionView); }; reader.readAsDataURL(file); } } var getCollectionView = function (workbook) { var collectionView = []; if (workbook) { var sheet = workbook.sheets[0]; var title = []; for (var i = 0, length = sheet.rows.length; i < length; i++) { var row = sheet.rows[i]; var rowArray = {}; for (var j = 0, jLength = row.cells.length; j < jLength; j++) { var cell = row.cells[j]; if (i === 0) { header.push(cell.value); } else { rowArray[header[j]] = cell.value; } } if (i !== 0) { collectionView.push(rowArray); } } } return collectionView; } })(window);下面是效果
Excel 导出
欧了
两句代码实现Excel导出功能
wijmo.grid.xlsx.FlexGridXlsxConverter.save(dataGrid,
{ includeColumnHeaders: true }, fileName);
这个表格还支持过滤,分组,筛选,编辑。
面积图和柱状图
就在完成Excel IO 之后,发现这个控件包还可以做面积图,柱状图和其他很多类型的图形。
所以在这里就演示一个面积图的和一个柱状图的例子。
首先,要将包引进来。
<script src="/UploadFiles/2021-04-02/wijmo.chart.min.js"> 然后经过下面几句代码,就可以使用在页面中插入一个柱状图
chart = new wijmo.chart.FlexChart('#chart'); chart.initialize({ itemsSource: collectionView, bindingX: 'name', options: { groupWidth: 15 }, series: [ { name: '年龄', binding: 'age' }, ] });下面看效果
其中,颜色和柱状图的形状可以调整的。当鼠标移到元素上,还有会小提示。
在这里,只需要改变一下chart的类型,就可以切换为其他类型的图表
chart.chartType = chart.chartType === wijmo.chart.ChartType.Column "http://xiazai.jb51.net/201608/yuanma/js-xlsWijmo-IO(jb51.net).rar">http://xiazai.jb51.net/201608/yuanma/js-xlsWijmo-IO(jb51.net).rar后续会托管到github.
最终还是比较快的完成了任务。
关于这个项目的Excel IO 就简单介绍到这里,这个项目现在已经完成了,后续会分享一些其他的技术细节。
希望可以对你提供帮助。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]