excel-gen.js 导出excel 功能

news2024/9/23 9:35:04

概要

整体架构流程

html部分：

js部分：

json部分：

小结

概要

功能会使用到如下插件：

jszip.min.js
FileSaver.js
jquery.min.js
excel-gen.js
highcharts.js
exporting.js
export_data.js

主要是highcharts图表数据导出为excel，highcharts本身自带导出功能和额外使用excel-gen.js编写导出功能

整体架构流程

废话不多说，直接上代码：

html部分：

<div>
                <div class="DStab_mTitle mb-26">
                  <h3 id="DStab_mTitle">标题</h3>
                </div>
                <div class="fjb chart_top px-15">
                  <div class="DStab_con_head">
                    <span class="fl  mb-10">统计周期=：</span>
                    <select name="select fl" id="startYearSpan" class="fl mb-10">
                      <option value="2011年">2011年</option>
                      <option value="2012年">2012年</option>
                      <option value="2013年">2013年</option>
                      <option value="2014年">2014年</option>
                      <option value="2015年">2015年</option>
                      <option value="2016年">2016年</option>
                      <option value="2017年">2017年</option>
                      <option value="2018年">2018年</option>
                      <option value="2019年">2019年</option>
                      <option value="2020年">2020年</option>
                      <option value="2021年">2021年</option>
                      <option value="2022年">2022年</option>
                    </select>
                    <span class="pr-10 pl-10 fl  mb-10">至</span>
                    <select name="select" id="endYearSpan" class="fl mr-15  mb-10">
                      <option value="2012年">2012年</option>
                      <option value="2013年">2013年</option>
                      <option value="2014年">2014年</option>
                      <option value="2015年">2015年</option>
                      <option value="2016年">2016年</option>
                      <option value="2017年">2017年</option>
                      <option value="2018年">2018年</option>
                      <option value="2019年">2019年</option>
                      <option value="2020年">2020年</option>
                      <option value="2021年">2021年</option>
                      <option value="2022年" selected="">2022年</option>
                    </select>
                    <button class="btn fl  mb-10" id="ajaxConfirm">查询</button>
                  </div>
                  <a href="javascript:;" target="_self" class="save_btn toExcel">导出Excel表格</a>
                </div>
                <div id="container0" >
                </div>
                <div id="table_toExcel">
                  <table border="1" cellspacing="0" cellpadding="0" wclassth="100%" id="table1excel"></table>
                </div>
              </div>

js部分：

var globalData = null; //备份
var globalDataCopy = null; //深拷贝
var url = "./static/json/tm_sjkf_data.json";
var containerId = "container0";
var dom = $("#" + containerId);
var chartsName = $(".tab_aside_list li.current").data("name");

var deepCopy = function (obj) {
  return JSON.parse(JSON.stringify(obj));
};

$.ajax({
  type: "get",
  url: url,
  dataType: "json",
  async: false,
  success: function (json) {
    globalData = json;
    globalDataCopy = deepCopy(json);
  },
  error: function (xhr) { },
});
function createChart(
  dom,
  { titleText, subtitleText, categories, yAxis, series }
) {
  $("#DStab_mTitle").html(titleText);
  dom.highcharts({
    legend: {
      aligin: "center",
      verticalAlign: "top",
      backgroundColor:
        (Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
        "#FFFFFF",
    },
    credits: {
      enabled: false,
    },
    chart: {
      zoomType: "xy",
    },
    title: {
      text: false,
    },
    subtitle: {
      text: subtitleText,
    },
    xAxis: [
      {
        text: "年份",
        categories: categories,
        crosshair: true,
      },
    ],
    yAxis: yAxis,
    tooltip: {
      shared: true,
    },
    lang: {
      printChart: "打印图表",
      downloadPNG: "下载JPEG 图片",
      downloadJPEG: "下载JPEG文档",
      downloadPDF: "下载PDF 图片",
      downloadSVG: "下载SVG 矢量图",
      contextButtonTitle: "下载图片",
      downloadCSV: "下载CSV图片",
      downloadXLS: "下载XLS图片",
      viewData: "数据表格 ",
      openInCloud: "查看更多数据类型",
    },

    series: series,
  });
}
// 导出数据为Excel文件
function drawTable(title) {
  var yearList = dom.highcharts().options.xAxis[0].categories;
  var seriesList = dom.highcharts().options.series;
  var len = seriesList.length + 1;
  var tableDom = null;
  // tableDom += "<tr><th>" + title + "</tr></th></tr>";
  var table_th = "<th>日期</th>";

  seriesList.forEach((v, k) => {
    table_th += "<th>" + v.name + "</th>";
  });
  tableDom += "<tr>" + table_th + "</tr>";

  //内容
  yearList.forEach((v, k) => {
    tableDom += "<tr>";
    tableDom += "<td>" + v + "</td>";
    seriesList.forEach((series_v) => {
      var value = series_v.data[k] || "";
      tableDom += "<td>" + value + "</td>";
    });
    tableDom += "</tr>";
  });
  $("#table_toExcel").find("table").html(tableDom);
}

//初始化
var chart = createChart(dom, globalDataCopy[chartsName]);
// 获取对应的年份数据,改id就行
var yearList = dom.highcharts().options.xAxis[0].categories;
// 查询的点击事件 改id
$("#ajaxConfirm").click(function () {
  // 获取开始年份 改变量名 改id
  var startY = $("#startYearSpan option:selected").val();
  // 获取结束年份 改变量名 改id
  var endY = $("#endYearSpan option:selected").val();
  var startY_index = yearList.indexOf(startY);
  var endY_index = yearList.indexOf(endY) + 1;
  // 根据年份筛取更改年份数据 改id 和3个年份变量
  dom.highcharts().options.xAxis[0].categories = yearList.slice(
    startY_index,
    endY_index
  );
  var chartsName = $(".tab_aside_list li.current").data("name");

  var seriesList = globalData[chartsName].series;

  // 更改数据data
  for (let index = 0; index < seriesList.length; index++) {
    const element = seriesList[index];
    dom.highcharts().options.series[index].data = element.data.slice(
      startY_index,
      endY_index
    );
  }

  // 重新渲染图表
  chart = Highcharts.chart(containerId, dom.highcharts().options);
});

var dom_toexcel = $(".toExcel");
//导出表格
dom_toexcel.click(function () {
  var title = $("#DStab_mTitle").html();
  drawTable(title);
  var excel = new ExcelGen({
    src_id: "table1excel",
    show_header: true,
    filename: title,
    extension: "xlsx",
  });
  excel.generate();
});

json部分：

{
  "rk": {
    "titleText": "主标题",
    "subtitle": "副标题",
    "categories": [
      "2011年",
      "2012年",
      "2013年",
      "2014年",
      "2015年",
      "2016年",
      "2017年",
      "2018年",
      "2019年",
      "2020年",
      "2021年",
      "2022年"
    ],

    "yAxis": [
      {
        "labels": {
          "format": "{value}万人",
          "style": {
            "color": "Highcharts.getOptions().colors[0]"
          }
        },
        "title": {
          "text": "人口 (万人)",
          "style": {
            "color": "Highcharts.getOptions().colors[0]"
          }
        }
      }
    ],
    "series": [
      {
        "name": "户籍人口 (万人)",
        "type": "column",
        "data": [
          167, 167.42, 163.85, 164.24, 162.8, 163.36, 161.08, 160.92, 160.66,
          158.89, 158.02
        ],
        "tooltip": {
          "valueSuffix": "万人"
        }
      },
      {
        "name": "常住人口 (万人)",
        "type": "column",
        "color": "Highcharts.getOptions().colors[2]",
        "data": [
          136.9, 133.9, 128.9, 129.16, 129.2, 128.66, 128.35, 127.35, 124.74,
          115.86, 110.58, 110.74
        ],
        "tooltip": {
          "valueSuffix": "万人"
        }
      }
    ]
  }}

小结

1.引入：

  <script src="./static/js/jquery.min.js"></script>
  <script src="./static/js/highcharts.js"></script>
  <script src="./static/js/exporting.js"></script>
  <script src="./static/js/export_data.js"></script>
  <script src="./static/js/jszip.min.js"></script>
  <script src="./static/js/FileSaver.js"></script>
  <script src="./static/js/excel-gen.js"></script>

2.资源提供：

本文章有对应资源绑定

3.结果展示：