ページはPDFファイルに直接エクスポートされ、ページとページの余白をサポートします.
3336 ワード
WEBページをpdfファイルに直接エクスポートすることは、特に様々なレポートシステムでよく使われる機能です.現在のいくつかの主流のやり方をまとめました.バックエンドでiTextのようなpdfファイルをコードで生成する. は、バックエンドでページをキャプチャし、phantomjsのようなpdfファイルを生成する. フロントエンドでjsでpdfファイルを直接生成する.
スキーム3の利点は,フロントエンドが直接生成され,所見が得られることである.今日探求するのはhtml 2 canvasとjspdfで、前者はページ要素renderをcanvasに生成し、後者はcanvasをpdfドキュメントに生成するために使用します.なお、この方法はIEシリーズのサポートによくない.
html 2 canvasのホームページ:http://html2canvas.hertzen.com/
jspdfのホームページ:https://parall.ax/products/jspdf
どちらの使用も簡単で、ネット上の文章は多いが、長いページのエクスポートではjspdfはページングをサポートしていない.現在、addImageの場合、開始縦座標を負の値に制御し、ページの底辺を超えた自動非表示にすると、表示上のページング効果が得られるが、この方法ではpdfページにページ余白を残すことはできない.そこで本稿では,主にページとページの余白を探索する.
得られたcanvasをカットし、A 4用紙の大きさで余白を残した割合でカットし、1ページ1ページの内容を切り出し、pdfにそれぞれ加えるのが基本です.前のDEMO:
コアはexportPdfという方法で、興味のある学生は参考にすることができます.生成されたpdf効果は、図のように、ページングとページ余白効果を見ることができます.
スキーム3の利点は,フロントエンドが直接生成され,所見が得られることである.今日探求するのはhtml 2 canvasとjspdfで、前者はページ要素renderをcanvasに生成し、後者はcanvasをpdfドキュメントに生成するために使用します.なお、この方法はIEシリーズのサポートによくない.
html 2 canvasのホームページ:http://html2canvas.hertzen.com/
jspdfのホームページ:https://parall.ax/products/jspdf
どちらの使用も簡単で、ネット上の文章は多いが、長いページのエクスポートではjspdfはページングをサポートしていない.現在、addImageの場合、開始縦座標を負の値に制御し、ページの底辺を超えた自動非表示にすると、表示上のページング効果が得られるが、この方法ではpdfページにページ余白を残すことはできない.そこで本稿では,主にページとページの余白を探索する.
得られたcanvasをカットし、A 4用紙の大きさで余白を残した割合でカットし、1ページ1ページの内容を切り出し、pdfにそれぞれ加えるのが基本です.前のDEMO:
html>
PDF
function exportPdf() {
var element = document.getElementById("page");
html2canvas(element, {
logging:false
}).then(function(canvas) {
var pdf = new jsPDF('p', 'mm', 'a4'); //A4 ，
var ctx = canvas.getContext('2d'),
a4w = 190, a4h = 277, //A4 ，210mm x 297mm， 10mm ， 190x277
imgHeight = Math.floor(a4h * canvas.width / a4w), // A4
renderedHeight = 0;
while(renderedHeight < canvas.height) {
var page = document.createElement("canvas");
page.width = canvas.width;
page.height = Math.min(imgHeight, canvas.height - renderedHeight);//
// getImageData ， canvas
page.getContext('2d').putImageData(ctx.getImageData(0, renderedHeight, canvas.width, Math.min(imgHeight, canvas.height - renderedHeight)), 0, 0);
pdf.addImage(page.toDataURL('image/jpeg', 1.0), 'JPEG', 10, 10, a4w, Math.min(a4h, a4w * page.height / page.width)); // ， 10mm
renderedHeight += imgHeight;
if(renderedHeight < canvas.height)
pdf.addPage();// ，
delete page;
}
pdf.save('content.pdf');
});
}
function generateData() {
var html = [];
html[html.length] = '<ul>';
for(var i = 0;i < 20;++i) {
html[html.length] = '<li class="c';
html[html.length] = i % 6;
html[html.length] = '"> ';
html[html.length] = i;
html[html.length] = ' </li>';
}
html[html.length] = '</ul>';
document.getElementById('page').innerHTML = html.join('');
}
コアはexportPdfという方法で、興味のある学生は参考にすることができます.生成されたpdf効果は、図のように、ページングとページ余白効果を見ることができます.