Python使用Flask框架，结合Highchart，自定义基本上算是最全的导出菜单了
说用：引入export-data.js文件后，导出菜单中会自动显示出相应的导出选项，只需要在lang中换成中文名即可。
本实例除了包含系统自带的，还包括自定义的导出菜单等。
html代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>第一个 Highcharts 图表</title> <!-- 引入 jquery.js --> <script src="static/jquery-3.3.1.min.js"></script> <!-- 引入 highcharts.js --> <script src="static/highcharts-7.0.3.js"></script> <!-- 需要保存导出功能模块文件是在 highcharts.js 之后引入 --> <script src="static/exporting.js"></script> <!-- 客户端导出功能模块为可选选项 --> <script src="static/offline-exporting.js"></script> <!-- 导出 Excel 数据文件 --> <script src="static/export-data.js"></script> </head> <body> <!-- 图表容器 DOM --> <div id="container" style="min-width:400px;height:400px;"></div> <script src="static/b.js"></script> </body> </html>
js代码
$(function () { // 本地化导出按钮中的文字，具体请参考 https://www.hcharts.cn/docs/basic-lang Highcharts.setOptions({ lang: { contextButtonTitle: "图表导出菜单", downloadJPEG: "下载 JPEG 图片", downloadPDF: "下载 PDF 文件", downloadPNG: "下载 PNG 文件", downloadSVG: "下载 SVG 文件", printChart: "打印图表", downloadCSV: '下载 CSV 文件', downloadXLS: '下载 XLS 文件', viewData: '查看数据表格' } }); // 默认的导出菜单选项，是一个数组 var dafaultMenuItem = Highcharts.getOptions().exporting.buttons.contextButton.menuItems; console.log(dafaultMenuItem); $('#container').highcharts({ credits: { enabled: false }, xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, series: [{ data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] }], title: { text: '自定义导出菜单项目及顺序' }, exporting: { buttons: { contextButton: { // 自定义导出菜单项目及顺序 menuItems: [ dafaultMenuItem[0], // 默认的打印图表 dafaultMenuItem[1], // 默认的分割线 dafaultMenuItem[2], // 默认的下载 PNG 图片 dafaultMenuItem[3], // 默认的下载 JPEG 图片 dafaultMenuItem[4], // 默认的下载 PDF 文件 dafaultMenuItem[5], // 默认的下载 SVG 文件 dafaultMenuItem[6], // 默认的分割线 dafaultMenuItem[7], // 默认的下载 CSV 文件 dafaultMenuItem[8], // 默认的下载 XLS 文件 dafaultMenuItem[9], // 查看数据表格 { separator: true // 自定义的分割线 }, dafaultMenuItem[1], // 默认的分割线 { text: '下载 PDF 文件', // 自定义下载 PDF 文件 onclick: function () { this.exportChart({ type: 'application/pdf' // 可选的值有 image/png，image/jpeg，application/pdf 和 image/svg+xml。 默认是：image/png }); } }, { text: '下载 SVG 文件', // 自定义下载 SVG 文件 onclick: function () { this.exportChart({ type: 'image/svg+xml' }); } }, dafaultMenuItem[1], // 默认的分割线 { text: '跳转链接', onclick: function () { window.location.href = 'https://www.hcharts.cn'; } } ] } } } }, function () { setTimeout(function () { $('.highcharts-contextbutton').click(); }, 200) }); });
效果：
