js将页面数据导入到excel表中

2017-12-19 23:35:49 6,364 views

将页面数据导入到excel表中

在线使用

<script src="https://cuikangjie.github.io/JsonExportExcel/dist/JsonExportExcel.min.js"></script>

本地使用

下载地址  https://github.com/cuikangjie/JsonExportExcel.git 
本地引用zip包下的dist中的JsonExportExcel.min.js
 
例如有数据为
数据
只需将页面的数据都装入到sheetData就可以
 

数据组装

/*例如我的数据,上面这663只是一个区是数据。处理大量数据时可以参考我的outPutdata函数,将数据都存入sheetData中.当然你也可以根据自己的数据来组装*/
var sheetData = [];
 outPutdata(data[0][0], data[0][0].length, "aCount");
 outPutdata(data[0][1], data[0][1].length, "b1Count");
 outPutdata(data[0][2], data[0][2].length, "b2Count");
 outPutdata(data[0][3], data[0][3].length, "c1Count");
 outPutdata(data[0][4], data[0][4].length, "c2Count");
 outPutdata(data[0][5], data[0][5].length, "d1Count");
 outPutdata(data[0][6], data[0][6].length, "d2Count");
function outPutdata(areA, column, columnName) {
        for(var i = 0; i < column; i++) {
          window[columnName + i] = {
            one: areA[i].areaName,
            two: areA[i].rowOwn,
            three: areA[i].columnOwn,
            four: areA[i].tel,
            five: areA[i].dataName
          };
          sheetData.push(window[columnName + i]);
        }
      }

js核心代码

/*核心代码*/
var option = {};
      option.fileName = 'excel';//导出的文件名字
      option.datas = [{
        sheetData: sheetData,
        sheetName: 'sheet',
        sheetHeader: ['areaName', 'rowOwn', "columnOwn", "tel", "dataName"]
//设置excel中的标题
      }];
/*在页面中的按钮,点击后导出为excel数据*/
      var but = document.getElementById("but");
      but.onclick = function() {
        var toExcel = new ExportJsonExcel(option);
        toExcel.saveExcel();
      };

html代码

<button id="but">导出</button>

页面按钮样式
导出

css代码

#but {
  position: fixed;
  padding-left: 32px;
  box-sizing: border-box;
  background: #ffe793 url(../img/out.png) no-repeat 10px 0px;//图片可以自行替换
  border: 1px solid #999;
  bottom: 0px;
  width: 100px;
  margin-left: -350px;
  left: 50%;
  height: 30px;
  line-height: 30px;
  outline: none;
  cursor: pointer;
  font-weight: 700;
  font-size: 20px;
}

 

excel效果图

excel
 
部分参考自 https://www.cnblogs.com/kin-jie/p/6180707.html

0

分享到微信朋友圈

打开微信,点击底部的“发现”,
使用“扫一扫”即可将网页分享至朋友圈。