我嘗試使用jsPDF導出谷歌圖表和HTML表格 . 由于谷歌圖表無法導出,我建立了一個圖像,并使用pdf.addImage()将其添加到pdf . 然後使用'pdf.fromHTML()'方法将表附加到相同的pdf檔案 . 提供更高的上邊距值以在圖像下方顯示它 .
function exportChart() {
var pdf = new jsPDF('p', 'pt', 'letter');
//Creating the image from chart and adding to the pdf
var img = document.getElementById("graphImg");
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
var dataURL = canvas.toDataURL("image/png");
pdf.addImage(dataURL, "PNG", 100,20);
canvas = null;
//Adding the html table to the same pdf file
source = $('#graphDiv')[0];
specialElementHandlers = {
'#bypassme': function (element, renderer) {
return true;
}
};
margins = {
top: 300, // Providing high top margin value to make the table below to the image
bottom: 60,
left: 80,
width: 400
};
pdf.fromHTML(
source,
margins.left,
margins.top, {
'width': margins.width,
'elementHandlers': specialElementHandlers
},
function (dispose) {
pdf.save('Export.pdf');
}, margins);
}
當表格較小時,一切正常并且pdf導出完美,但是當表格大小時,某些行會附加到新的pdf頁面,但是上邊距為300.這會在第二頁中産生大量空白 . 請幫忙解決這個問題 .