是的，这是可能的，但需要几个不同的库才能工作。第一个图书馆是jsPDF http://parall.ax/products/jspdf它允许在浏览器中创建 PDF。第二个是canvg https://code.google.com/p/canvg/它允许渲染和解析 SVG，但真正酷的是它可以将 svg 渲染到画布元素上。最后是Highcharts导出模块 http://www.highcharts.com/docs/export-module/export-module-overview这将允许我们将 svg 发送到 canvg 以转换为数据 URL，然后将其提供给 jsPDF 以转换为 pdf。
这是一个例子http://fiddle.jshell.net/leighking2/dct9tfvn/ http://fiddle.jshell.net/leighking2/dct9tfvn/您还可以在其中看到您需要包含在项目中的源文件。
首先，highcharts 提供了一个使用 canvg 及其导出将图表保存为 png 的示例。因为您想要 pdf 中的所有图像，所以我们对此进行了稍微更改，以便仅返回数据 url
// create canvas function from highcharts example http://jsfiddle.net/highcharts/PDnmQ/
(function (H) {
H.Chart.prototype.createCanvas = function (divId) {
var svg = this.getSVG(),
width = parseInt(svg.match(/width="([0-9]+)"/)[1]),
height = parseInt(svg.match(/height="([0-9]+)"/)[1]),
canvas = document.createElement('canvas');
canvas.setAttribute('width', width);
canvas.setAttribute('height', height);
if (canvas.getContext && canvas.getContext('2d')) {
canvg(canvas, svg);
return canvas.toDataURL("image/jpeg");
}
else {
alert("Your browser doesn't support this feature, please use a modern browser");
return false;
}
}
}(Highcharts));
然后，对于示例，我设置了单击按钮时的导出。这将查找某一类的所有元素（因此选择一个添加到所有图表元素中），然后调用它们的 highcharts.createCanvas 函数。
$('#export_all').click(function () {
var doc = new jsPDF();
// chart height defined here so each chart can be palced
// in a different position
var chartHeight = 80;
// All units are in the set measurement for the document
// This can be changed to "pt" (points), "mm" (Default), "cm", "in"
doc.setFontSize(40);
doc.text(35, 25, "My Exported Charts");
//loop through each chart
$('.myChart').each(function (index) {
var imageData = $(this).highcharts().createCanvas();
// add image to doc, if you have lots of charts,
// you will need to check if you have gone bigger
// than a page and do doc.addPage() before adding
// another image.
/**
* addImage(imagedata, type, x, y, width, height)
*/
doc.addImage(imageData, 'JPEG', 45, (index * chartHeight) + 40, 120, chartHeight);
});
//save with name
doc.save('demo.pdf');
});
此处需要注意的是，如果您有大量图表，则需要将它们放置在新页面上。 jsPDF 的文档看起来确实过时了（他们确实有一个很好的演示页面，但只是没有太多解释所有可能的选项），有一个 addPage() 函数，然后你可以使用宽度和高度，直到找到符合要求的内容。作品。
最后一部分是使用额外的选项设置图表，以便不在正常显示的每个图表上显示导出按钮。
//charts
$('#chart1').highcharts({
navigation: {
buttonOptions: {
enabled: false
}
},
//this is just normal highcharts setup form here for two graphs see fiddle for full details
结果还不错，图表的质量给我留下了深刻的印象，因为我对此并没有抱太大期望，对 pdf 位置和大小进行一些播放可能看起来非常不错。
这是显示导出前后发出的网络请求的屏幕截图，导出时不发出任何请求https://i.stack.imgur.com/LXnU1.jpg https://i.stack.imgur.com/LXnU1.jpg
这是 pdf 的示例https://i.stack.imgur.com/KW6Lr.png https://i.stack.imgur.com/KW6Lr.png（以实际 pdf 形式查看时看起来更好）
在本地尝试的快速示例https://github.com/leighquince/HighChartLocalExport https://github.com/leighquince/HighChartLocalExport
