echarts+导出为Excel

1.安装依赖

npm install xlsx --save

npm install file-saver --save

2.引入

import FileSaver from "file-saver";

import XLSX from "xlsx";

3.echarts 里的toolbox写入

    toolbox: {

          left: 63,

          top:10,

          feature: {

            dataView: {

              show: true,

              title: '数据视图',

              lang: ['数据视图：', '关闭', '导出Excel'], // 按钮

              contentToOption: function (opts) {

                $('#tableExcel').table2excel({

                  exclude: '.noExl', //过滤位置的 css 类名， 有class = “noExl” 的行不被导出

                  filename: '最大需量', // 文件名称

                  name: 'Excel Document Name.xls',

                  exclude_img: true,

                  exclude_links: true,

                  exclude_inputs: true

                })

              },

              optionToContent: function (opt) {

                var axisData = opt.xAxis[0].data //坐标轴

                var series = opt.series //折线图的数据

                console.log(series);

                var tdHeads =

                  '<td  style="margin-top:10px; padding: 0 15px">日期</td>' //表头

                var tdBodys = ''

                series.forEach(function (item) {

                  tdHeads += `<td style="padding:5px 15px">${item.name}</td>`

                  // console.log(item);

                })

                var table = `<table id='table-content' border="1" style="margin-left:20px;border-collapse:collapse;font-size:14px;text-align:center;"><tbody><tr>${tdHeads} </tr>`

                for (var i = 0, l = axisData.length; i < l; i++) {

                  for (var j = 0; j < series.length; j++) {

                    if (series[j].data[i] == undefined) {

                      tdBodys += `<td>${'-'}</td>`

                    } else {

                      tdBodys += `<td>${series[j].data[i]}</td>`

                    }

                  }

                  table += `<tr><td style="padding: 0 15px">${axisData[i]}</td>${tdBodys}</tr>`

                  tdBodys = ''

                }

                table += '</tbody></table>'

                return table

              },

                contentToOption: function (HTMLDomElement, opt) {

           let et = XLSX.utils.table_to_book(

                  document.getElementById("table-content")

                ); //此处传入table的DOM节点

                let etout = XLSX.write(et, {

                  bookType: "xlsx",

                  bookSST: true,

                  type: "array",

                });

                try {

                  FileSaver.saveAs(

                    new Blob([etout], {

                      type: "application/octet-stream",

                    }),

                    "统计数据.xlsx"

                  ); //trade-publish.xlsx 为导出的文件名

                } catch (e) {

                  // console.log(e, etout);

                }

                return etout;

              },

            },

            // magicType: { show: true, type: ['line', 'bar'] },

            // restore: { show: true },

            // saveAsImage: { show: true }

          }

        },