html2canvas+jsPDF で表示したHTML ページの中の任意の領域をPDFに作成する方法は、
以下のようにするが、
(入りきらない場合の対策をしていない)
$('#outpdf').click(function(){ html2canvas(document.querySelector("#content")).then(function(canvas){ var pdf = new jsPDF('p', 'pt', 'a4', false); var width = pdf.internal.pageSize.width * 0.90; var x = (pdf.internal.pageSize.width - width) / 2; pdf.addImage(canvas, 'JPEG', x, 30, width, 0); pdf.save('test.pdf'); }); });
html2canvas の then で 受け取る canvas オブジェクトをJPEG変換出力する方法しかなく、
入りきらない場合はページ分割で、次のページが切れたところから描画するように、
html2canvas で部分切り出し(CROP)→ jsPDF という処理を繰り返さなくてはならない。
以下のように、何度も呼び出す html2canvas 部分切り出しをする処理の関数を用意しておく。
function screenshot(element, options){ let cropper = document.createElement('canvas').getContext('2d'); let finalWidth = options.width || window.innerWidth; let finalHeight = options.height || window.innerHeight; if (options.x){ options.width = finalWidth + options.x; } if (options.y){ options.height = finalHeight + options.y; } return html2canvas(element, options).then(function(c){ cropper.canvas.width = finalWidth; cropper.canvas.height = finalHeight; cropper.drawImage(c, -(+options.x || 0), -(+options.y || 0)); return cropper.canvas; }); };
この関数を目的のコンテンツの高さを計算して、実行する回数を算出して実行する。
$('#outpdf').click(function(){ var hlen = 1820; var pdf = new jsPDF('p', 'pt', 'a4', false); var width = pdf.internal.pageSize.width * 0.90; var x = (pdf.internal.pageSize.width - width) / 2; var n = Math.ceil($('#content').height() / hlen); var offsetY = 0; var count = 1; for(var i=0;i < n;i++){ screenshot(document.querySelector("#content"),{ async:false, x:0, y:offsetY, height:hlen }).then(function(canvas){ pdf.setPage(count); var width = pdf.internal.pageSize.width * 0.90; var x = (pdf.internal.pageSize.width - width) / 2; pdf.addImage(canvas, 'JPEG', x, 30, pdf.internal.pageSize.width, 0); if (count < n){ pdf.addPage(); } if (count==n){ pdf.save('test.pdf'); } count++; }); offsetY = offsetY + 1820; } });
jsPDF の setPage(n) で、書き出すページを指定する。
addImage したら、addPage() で次のページを付与する。
ページの最後=ループの最後で、pdf.save でPDF出力する