基本上我想知道,在PDF上呈现Highchart的图表的最佳方法是什么?在我的情况下,我使用Highcharts和jsPDF来呈现pdf。但是生成的PDF图表资源非常低。如何提高图表的分辨率
以下代码部分用于从 svg 创建 canvas 元素。有从 Highchart
获取 svg 的方法(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));
然后使用jsPDF在前端渲染PDF。使用canvas上下文作为图像,并使用jsPDF库将该对象放在pdf上。方法名称为 addImage 。
var pdfOptions = {
orientation: "landscape", // One of "portrait" or "landscape" (or shortcuts "p" (Default), "l")
unit: "mm", //Measurement unit to be used when coordinates are specified. One of "pt" (points), "mm" (Default), "cm", "in"
format: "a4" //One of 'a3', 'a4' (Default),'a5' ,'letter' ,'legal'
}
var *doc* = new jsPDF(pdfOptions);
创建jsPDF对象
doc.addPage();
var imageData = $(this).highcharts().createCanvas();
doc.addImage(imageData, 'JPEG', left, top, charWidth, chartHeight);
将图像添加到 doc 对象,该imageData源自从 createCanvas 函数上面退回的canvas元素。
doc.save('example.pdf');
之后保存pdf。
在这种情况下,前端高图pdf生成是成功的,但图表分辨率非常低。 是否有可能提高渲染pdf图表的分辨率。