Most Visualization API charts now support the #getImageURI
method, which returns a URI string that you can use to save a .png image file. Here are the docs on printing the charts, which you can follow to save them as a .png image instead: https://developers.google.com/chart/interactive/docs/printing. There should not be a quality loss from importing the .png file to PDF.
Poor Image Quality Inserting Google Charts into a PDF using JSPDF
-
12-06-2023 - |
문제
I'm trying to render a pdf view of a reporting page that contains google charts to display my data. Currently I am going converting the chart to a url encoded JPEG. The image quality at this stage is still good but once i add it to the pdf document using JSPDF the image quality is severely reduced.
Here's a jsfiddle of my current method: http://jsfiddle.net/5c5YX/3/
function getImgData(chartContainer) {
var chartArea = chartContainer.getElementsByTagName('svg')[0].parentNode;
var svg = chartArea.innerHTML;
var chartDoc = chartContainer.ownerDocument;
var canvas = chartDoc.createElement('canvas');
canvas.setAttribute('width', chartArea.offsetWidth);
canvas.setAttribute('height', chartArea.offsetHeight);
canvas.setAttribute(
'style',
'position: absolute; ' +
'top: ' + (-chartArea.offsetHeight * 2) + 'px;' +
'left: ' + (-chartArea.offsetWidth * 2) + 'px;');
chartDoc.body.appendChild(canvas);
canvg(canvas, svg);
var imgData = canvas.toDataURL('image/JPEG');
doc.addImage(imgData, "JPEG", 10,10);
doc.addImage(imgData, "JPEG", 10,100);
canvas.parentNode.removeChild(canvas);
return imgData;
}
Does anyone know of a fix for this or the reason it's doing this? Or if not; is there a different way I can render a pdf containing google chart data (client side preferably) ?
Any help would be greatly appreciated!
해결책
제휴하지 않습니다 StackOverflow