突遇一个需求，需要项目中的图表支持下载（导出图表数据）的功能（后端懒得写下载文件接口）。
图表如图所示：

目前我的图表是在 Vue 项目中用 highchart 实现的，而我看到 highchart 的官方示例，几乎每个都有导出下载图表的功能。
然后我以为是直接添加哪个配置，就可以轻易实现这个导出功能。
结果看了 js 的图表配置项，都是些常见的配置项，没啥特殊的，可为啥我的图表就没有这个导出按钮呢？
于是我直接查找 highchart 官网的 api ，找到了一个导出意思的配置项 exporting
于是我查看它里面的示例，然后发现它不仅有 exporting 配置项，原来 highchart 实例下会有一个 exportchart 的方法，能够实现自定义按钮导出。
于是我按照上面的写法去添加了自定义导出按钮和事件，可控制台却报错了
代码如图：

控制台如图：
highchart 图标的实例，我的的确确已经打印出来了，但是却报没有 exportChart 这个方法，我便从实例对象入手，于是我展开了我本地打印的实例和官网示例上的实例做了一个对比：
我本地的：
官网示例：
然后惊奇的发现，我本地的图表实例居然没有 exporting ，那这很明显，我本地的实例是不完整的 highchart 图标实例。
于是我去百度查询了下 vue 中的 highchart 图表导出报错问题，找到了一个帖子：
https://blog.csdn.net/weixin_30815427/article/details/97301451
里面有在引入 highchart 基础上，而且多引入了两个文件 exporting.js 和 export-csv.js
鉴于官网的在 Vue 中使用 Highcharts 的文章中就有 引入 export-csv.js 的案例，于是我就先引入了 export-csv.js


结果使用 exportchart 方法还是报同样的错误，我打开 export-csv.js 去查找这个方法，发现居然没有 exportChart 方法。
我仔细看了看了里面的代码，发现了两个类似导出的方法，但不叫 exportChart
于是我尝试调用了这两个方法，确实是有导出(下载)图表的数据

感觉好像需求已经满足了，毕竟是要下载数据文件，但是我想要的图表图片却没实现。
于是我再次下载了 exporting.js 文件，按 export-csv.js 的方法去引用，结果 exporting.js 文件报错了。
又遇到问题，先不慌，目标很明确，无非就是缺少了 exporting.js 相关的引入，而直接引入下载好的 exporting.js 似乎有不对，于是我再次借助了百度的力量，查询： Vue中使用highchart的exporting。
在出来的第一篇文章里，我看到了问题的答案。

原来 安装好的highcharts 依赖下面自己就有 exporting，我立马按这个路径去引入了 exporting 并利用引入的 exporting 修饰我的 highchart。

然后在自定义按钮的点击事件里调用实例的 exportChart 方法。

结果相当成功。

最后我决定两个方法都要写在上面，因为 export-csv.js 的导出 xls 或 csv 方法是不需要联网的，可以直接前端调用 html 方法生成，而下载图片需要请求 https://export.highcharts.com/ 生成。所以为了避免 highchart 这个服务出意外，暂且保留 xls 文件导出的功能吧！
export-csv.js 资源的下载地址