HTMLページをPDFファイルに変換してエクスポート
2374 ワード
現在、ほとんどの管理システムでは、関連する条件に基づいて対応するデータを問合せ、可視化レポートを生成してPDFファイルにエクスポートする機能があります.この文書では、Visualization Reportを生成してPDFファイルをエクスポートするプロセスのみを示します.Visualization Reportを生成するには、Echarts、D 3 jsなどのフレームワークを使用します.
1.導入するファイル
html2canvas.js(実際の状況に応じて対応するバージョンを選択)jspdf.min.js(実際の状況に応じて対応するバージョンを選択)
2.実現構想
3.実装コード
以上は筆者のプロジェクトにおける一部のコアコードであり、問題があれば、指摘を歓迎します.
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();
}
},
})
以上は筆者のプロジェクトにおける一部のコアコードであり、問題があれば、指摘を歓迎します.