I suddenly encountered a requirement that the charts in the project need to support the function of downloading (exporting chart data) (the backend is too lazy to write an interface for downloading files).
The chart is shown in the picture:
currently my chart is implemented with highchart in the Vue project, and I have seen highchart's official examples, almost every one has the function of exporting and downloading charts. 
Then I thought that the export function could be easily realized by directly adding which configuration.
As a result, I looked at the chart configuration items of js, and they are all common configuration items, nothing special, but why doesn’t my chart have this export button? 
So I directly searched the api of the highchart official website, and found a configuration item exporting that exported the meaning, 
so I checked the examples in it, and found that it not only has the exporting configuration item, but there will be an exportchart method under the highchart instance, which can realize customization button to export. 
So I added a custom export button and event according to the above writing method, but the console reported an error. The
code is shown in the figure:
the console is shown in the figure: 
the example of the highchart icon, I have indeed printed it out, but it is reported that there is no exportChart In this method, I started with the instance object, so I made a comparison between my local printed instance and the example on the official website:
My local: 
official website example: 
Then I was surprised to find that my local chart instance did not have exporting , then it is obvious that my local instance is an incomplete highchart icon instance.
So I went to Baidu to check the export error of the highchart chart in vue, and found a post:
https://blog.csdn.net/weixin_30815427/article/details/97301451 
is based on the introduction of highchart, and two more files exporting.js and export-csv.js are introduced in view of the use of Highcharts in Vue
on the official website There is a case of introducing export-csv.js in the article, so I first introduced export-csv.js, but the same error was reported when using the exportchart method. I opened export-csv.js to find this method, and found that there is no exportChart method. I took a closer look at the code inside and found two methods similar to export, but they were not called exportChart, so I tried to call these two methods, and it was indeed possible to export (download) the data of the chart. It seemed that the demand had been met. After all, it is to download the data file, but the chart picture I want has not been realized. So I downloaded the exporting.js file again, and referenced it according to the export-csv.js method, but the exporting.js file reported an error. I encountered a problem again, don’t panic, the goal is very clear, nothing more than the lack of exporting.js related imports, and it seems wrong to directly import the downloaded exporting.js, so I once again borrowed the power of Baidu to query: Vue Use highchart's exporting. In the first article that came out, I saw the answer to the question.
The original installed highcharts relies on the exporting below. I immediately introduced the exporting according to this path and used the imported exporting to modify my highchart.
Then call the exportChart method of the instance in the click event of the custom button.
It turned out to be quite a success.
Finally, I decided to write both methods on it, because the export-csv.js export xls or csv method does not need to be connected to the Internet, and can be directly generated by calling the html method on the front end, and downloading pictures needs to request https://export.highcharts .com/ generated. So in order to avoid accidents with the highchart service, let's keep the xls file export function for now!
The download address of the export-csv.js resource