我在我的应用程序中使用 Highcharts（没有任何互联网连接）
我在一个 html 页面上有多个图表，我想生成一个包含此页面中所有图表的 PDF 报告。
如何在不将数据发送到 Internet 上的任何服务器的情况下做到这一点？
我将感谢您提供的任何帮助或任何示例。先感谢您 ：）
问问题
25312 次
5 回答
31
是的，这是可能的，但需要几个不同的库才能开始工作。第一个库是jsPDF，它允许在浏览器中创建 PDF。第二个是canvg，它允许渲染和解析SVG，虽然它真的很酷，但它可以将svg渲染到canvas元素上。最后是Highcharts 导出模块，它允许我们将 svg 发送到 canvg 以转换为数据 URL，然后可以将其提供给 jsPDF 以转换为您的 pdf。
这是一个示例http://fiddle.jshell.net/leighking2/dct9tfvn/您还可以在其中看到需要包含在项目中的源文件。
因此，开始 highcharts 提供了一个使用 canvg 及其导出以将图表保存为 png 的示例。因为您想要 pdf 中的所有 iamges，所以为了我们的目的，我们对它进行了轻微更改，以仅返回数据 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 位置和大小的播放看起来非常好。
这是一个屏幕截图，显示了导出前后的网络请求，当导出时没有请求http://i.imgur.com/ppML6Gk.jpg
这是 pdf 看起来像http://i.imgur.com/6fQxLZf.png的示例（查看实际 pdf 时看起来更好）
在本地https://github.com/leighquince/HighChartLocalExport上试用的快速示例
于 2014-09-02T21:47:54.857 回答
1
您需要在本地设置自己的导出服务器，如文章中所示
于 2014-09-03T09:06:30.940 回答
1
这是使用库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"));
}
}
于 2017-04-06T12:24:19.893 回答
0
也许这个链接可以帮助你。
尝试参考导出属性（fallbackToExportServer：false）和需要包含的必要文件（offline-exporting.js）。
而对于export all on once部分，目前我自己也在尝试。如果有的话会在这里更新。
于 2015-08-10T07:34:14.597 回答
0
这个问题有点老了，但这是我最近自己研究的问题，但遇到了一些麻烦。
我使用了 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>
于 2017-04-04T15:08:18.720 回答