使用纯前端JavaScript 实现Excel IO

最新推荐文章于 2024-07-30 11:29:23 发布

霓为衣兮风为裳

最新推荐文章于 2024-07-30 11:29:23 发布

阅读量5.4k

点赞数 4

分类专栏： Javascript 文章标签：前端 javascript Excel

本文链接：https://blog.csdn.net/tabe123/article/details/52274585

版权

本文介绍了如何使用JavaScript库xlsx进行Excel导入导出，但因库的不稳定性及功能限制，转而采用Wijmo控件实现。通过Wijmo，不仅解决了Excel的IO问题，还展示了其在图表展示上的应用，包括面积图和柱状图。

摘要由CSDN通过智能技术生成

使用纯前端JavaScript 实现Excel IO

公司最近要为某国企做一个**统计和管理系统，该国企要求特别多，很难缠。

具体要求包含

Excel导入导出
根据导入的数据进行展示报表
图表展示（包括柱状图，折线图，饼图），而且还要求要有动画效果，扁平化风格
Excel导出，并要提供客户端来管理Excel 文件
…

要求真多！

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

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

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

嗯，我在github上找到了一个开源库xlsx，通过npm方式来安装。

npm install xlsx --save

之后，在自己的html文件里面添加对js文件的引用

<script src="./node_modules/xlsx/dist/jszip.js"></script>
<script src="./node_modules/xlsx/dist/xlsx.js"></script>

通过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;