华山资源网

使用纯前端JavaScript实现Excel导入导出方法过程详解
网络编程 2024/11/17 佚名
3 1

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

具体要求包含

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

要求真多！

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

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

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

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

npm install xlsx --save

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

<script src="/UploadFiles/2021-04-02/jszip.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);
}





效果如下：


使用纯前端JavaScript实现Excel导入导出方法过程详解


这样做好像可行，但是我们很快就放弃了。


弊端太多了。


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


经过小组探讨，我们决定使用另外一款前端控件，叫做 Wijmo。


首先，从网站上下载Wijmo包，这个控件没有提供npm和bower等方式。


使用纯前端JavaScript实现Excel导入导出方法过程详解


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





<script src="/UploadFiles/2021-04-02/wijmo.min.js">


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





<script src="/UploadFiles/2021-04-02/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对象，


使用纯前端JavaScript实现Excel导入导出方法过程详解


打印这个对象发现，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);





下面是效果




使用纯前端JavaScript实现Excel导入导出方法过程详解


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' },
  ]
});





下面看效果


使用纯前端JavaScript实现Excel导入导出方法过程详解


其中，颜色和柱状图的形状可以调整的。当鼠标移到元素上，还有会小提示。


在这里，只需要改变一下chart的类型，就可以切换为其他类型的图表





chart.chartType = chart.chartType === wijmo.chart.ChartType.Column "text-align: center">使用纯前端JavaScript实现Excel导入导出方法过程详解


关于本篇的代码已经上传http://xiazai.jb51.net/202008/yuanma/xlsWijmo_jb51.rar;

后续会托管到github.


最终还是比较快的完成了任务。


关于这个项目的Excel IO 就简单介绍到这里，这个项目现在已经完成了，后续会分享一些其他的技术细节。


希望可以对你提供帮助。


                                

                                

                                     

                                
华山资源网 Design By www.eoogi.com

                            

                        

                        

                            

                                广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）

                                免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
                            

                        

                        

                            
                            
                        

                        
                        
华山资源网 Design By www.eoogi.com

                        
                        
                    

                    

                        

                            

                                

                                    

                                        

                                    

                                    

                                        

                                            
                                        

                                    

                                

                                

                                    
www.eoogi.com
                                            
                                                华山资源网 
                                    

                                    

                                        

                                            
                                        

                                        

                                            
                                        

                                        

                                            
                                        

                                        

                                            
                                        

                                    

                                    

                                    

                                        

                                            120,135影音资源
                                        

                                        

                                            344,641技术资源
                                        

                                        

                                            22,817软件资源
                                        

                                        

                                            435,032站长资源

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com