我在我的应用程序中使用 Highcharts（没有任何互联网连接）
我的 html 页面上有多个图表，我想生成一个包含此页面中所有图表的 PDF 报告。
如何在不将数据发送到互联网上的任何服务器的情况下执行此操作？
我将感谢您提供的任何帮助或任何示例。 提前谢谢你:)
是的，这是可能的，但需要几个不同的库才能工作。第一个库是jsPDF，它允许在浏览器中创建 PDF。第二个是 canvg，它允许渲染和解析 SVG，但真正酷的是它可以将 svg 渲染到画布元素上。最后是 Highcharts 导出模块，它允许我们将 svg 发送到 canvg 以转换为数据 URL，然后将其提供给 jsPDF 以转换为 pdf。
这是一个示例 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.sstatic.net/LXnU1.jpg
这是 pdf 的示例 https://i.sstatic.net/KW6Lr.png（以实际 pdf 形式查看时看起来更好）
在本地尝试的快速示例 https://github.com/leighquince/HighChartLocalExport
您需要在本地设置自己的导出服务器，如文章
中所示这是使用库pdfmake的示例：
html:
<div id="chart_exchange" style="width: 450px; height: 400px; margin: 0 auto"></div>
<button id="export">export</button>
<canvas id="chart_exchange_canvas" width="450" height="400" style="display: none;"></canvas>
javascript:
function drawInlineSVG(svgElement, canvas_id, callback) {
var can = document.getElementById(canvas_id);
var ctx = can.getContext('2d');
var img = new Image();
img.setAttribute('src', 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svgElement))));
img.onload = function() {
ctx.drawImage(img, 0, 0);
callback(can.toDataURL("image/png"));
}
}
这个问题有点老了，但我最近正在研究自己，并且遇到了一些麻烦。
我使用了jsPDF库：https://github.com/MrRio/jsPDF
我遇到的问题是jsPDF不支持高图表导出的SVG图像+图像模糊且质量低。
以下是我用来将两个图表合并到一个 pdf 文档中的解决方案：
function createPDF() {
var doc = new jsPDF('p', 'pt', 'a4'); //Create pdf
if ($('#chart1').length > 0) {
var chartSVG = $('#chart1').highcharts().getSVG();
var chartImg = new Image();
chartImg.onload = function () {
var w = 762;
var h = 600;
var chartCanvas = document.createElement('canvas');
chartCanvas.width = w * 2;
chartCanvas.height = h * 2;
chartCanvas.style.width = w + 'px';
chartCanvas.style.height = h + 'px';
var context = chartCanvas.getContext('2d');
chartCanvas.webkitImageSmoothingEnabled = true;
chartCanvas.mozImageSmoothingEnabled = true;
chartCanvas.imageSmoothingEnabled = true;
chartCanvas.imageSmoothingQuality = "high";
context.scale(2, 2);
chartCanvas.getContext('2d').drawImage(chartImg, 0, 0, 762, 600);
var chartImgData = chartCanvas.toDataURL("image/png");
doc.addImage(chartImgData, 'png', 40, 260, 250, 275);
if ($('#chart2').length > 0) {
var chart2SVG = $('#chart2').highcharts().getSVG(),
chart2Img = new Image();
chart2Img.onload = function () {
var chart2Canvas = document.createElement('canvas');
chart2Canvas.width = w * 2;
chart2Canvas.height = h * 2;
chart2Canvas.style.width = w + 'px';
chart2Canvas.style.height = h + 'px';
var context = chart2Canvas.getContext('2d');
chart2Canvas.webkitImageSmoothingEnabled = true;
chart2Canvas.mozImageSmoothingEnabled = true;
chart2Canvas.imageSmoothingEnabled = true;
chart2Canvas.imageSmoothingQuality = "high";
context.scale(2, 2);
chart2Canvas.getContext('2d').drawImage(chart2Img, 0, 0, 762, 600);
var chart2ImgData = chart2Canvas.toDataURL("image/png");
doc.addImage(chart2ImgData, 'PNG', 300, 260, 250, 275);
doc.save('ChartReport.pdf');
}
chart2Img.src = "data:image/svg+xml;base64," + window.btoa(unescape(encodeURIComponent(chart2SVG)));
}
}
chartImg.src = "data:image/svg+xml;base64," + window.btoa(unescape(encodeURIComponent(chartSVG)));
}
}
要包括的脚本：
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.min.js"></script>
也许这个小提琴可以帮助你。
尝试参考导出属性（
fallbackToExportServer: false而一次性导出部分，目前我自己也在尝试。