HTMLページをPDFファイルに変換してエクスポート


現在、ほとんどの管理システムでは、関連する条件に基づいて対応するデータを問合せ、可視化レポートを生成してPDFファイルにエクスポートする機能があります.この文書では、Visualization Reportを生成してPDFファイルをエクスポートするプロセスのみを示します.Visualization Reportを生成するには、Echarts、D 3 jsなどのフレームワークを使用します.
1.導入するファイル
html2canvas.js(実際の状況に応じて対応するバージョンを選択)jspdf.min.js(実際の状況に応じて対応するバージョンを選択)
2.実現構想
(1) body      PDF HTML    ,  :       ID,       
(2)        position:absolute;      ,                     PDF。
(3)  html2canvas.js         
(4)  jspdf.min.js     PDF        。

3.実装コード
(1)HTML  
 
/*    PDF HTML  */
………………………………
(2)JS /* , ID*/ $("body").append('
…………………………………………………………
'); /* */ $("#pdf1").css({ "background-color": "#fff", "position": "absolute", "top": "0px", "z-index": "-1", "height": $("#pdf").height() }); /*html2canvas ,jspdf PDF */ html2canvas($("#pdf1"), { background: "#fff", allowTaint: true, taintTest: false, onrendered:function(canvas) { var contentWidth = canvas.width; var contentHeight = canvas.height; var pageHeight = contentWidth / 592.28 * 841.89; var leftHeight = contentHeight; var position = 0; var imgWidth = 595.28; var imgHeight = 592.28/contentWidth * contentHeight; var pageData = canvas.toDataURL('image/jpeg', 1.0); var img = new Image(); img.src = pageData; var pdf = new jsPDF('p', 'pt', 'a4'); img.onload = function() { if (leftHeight < pageHeight) { pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight ); } else { while(leftHeight > 0) { pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight) leftHeight -= pageHeight; position -= 841.89; if(leftHeight > 0) { pdf.addPage(); } } } pdf.save('report_pdf_' + new Date().getTime() + '.pdf'); $("#pdf1").remove(); } }, })

以上は筆者のプロジェクトにおける一部のコアコードであり、問題があれば、指摘を歓迎します.