js生成pdfレポート
10525 ワード
フロントhtmlはレポートを動的に生成しているため、フロントにはdate rangeコンポーネントという機能があり、ドラッグするとバックグラウンドにコミットせずにレポートが動的に変化します.したがって、jsを使用して生レポートを生成する必要があります.使用するコンポーネント:
フロントで動的に生成されたchartは現在html 5のcanvasかsvgを使用しているのが一般的で、ラッキーではありませんが、私が出会ったのはsvgで、flashなら研究したことがありません.レポートは元のhtmlページの外観を維持する必要がありますが、html全体ではありません.本当にpdfレポートに変換する必要があるのは、html+svg前提:jsPDFはhtmlをサポートしていますが、サポートはあまりよくありません.htmlで直接pdfを生成すると、実はhtmlの中のテキストだけを残して、スタイル、構造が失われます.例えば、tableが失われました.jsPDFではsvgインポートはサポートされていません.構想:svgをcanvasに変換し、html+canvasをhmlt 2 canvasプラグインでcanvasに変換し、canvasをピクチャに変換し、最後にpdfにピクチャを書き込む.tableなら:jspdf.plugin.autotable.js
まずインポートするhtmlを単独で抽出し、1つのiframeに書き込み、外観を保つためには、この部分用のcssも書き込む必要があり、iframeのbodyラベルの下のすべての内容をcanvasに変換する.htmlにsvgがある場合は、まずsvgをcanvasに変換します.
tableは単独でインポートする必要がある、jspdf.plugin.autotable.jsプラグインはjson配列をサポートし、tableラベルのhtml要素をサポートします.本文はtableラベルを使います.
firefox:html 2 canvas svg+htmlをcanvasに直接変換することはできません-->svg要素をcanvas-->html+canvasに変換してcanvasに変換します
chrome:html 2 canvasはsvg+htmlを直接canvasに変換できます
jquery.js
jspdf.js
canvg.js
html2canvas.js
jspdf.plugin.autotable.jsフロントで動的に生成されたchartは現在html 5のcanvasかsvgを使用しているのが一般的で、ラッキーではありませんが、私が出会ったのはsvgで、flashなら研究したことがありません.レポートは元のhtmlページの外観を維持する必要がありますが、html全体ではありません.本当にpdfレポートに変換する必要があるのは、html+svg前提:jsPDFはhtmlをサポートしていますが、サポートはあまりよくありません.htmlで直接pdfを生成すると、実はhtmlの中のテキストだけを残して、スタイル、構造が失われます.例えば、tableが失われました.jsPDFではsvgインポートはサポートされていません.構想:svgをcanvasに変換し、html+canvasをhmlt 2 canvasプラグインでcanvasに変換し、canvasをピクチャに変換し、最後にpdfにピクチャを書き込む.tableなら:jspdf.plugin.autotable.js
まずインポートするhtmlを単独で抽出し、1つのiframeに書き込み、外観を保つためには、この部分用のcssも書き込む必要があり、iframeのbodyラベルの下のすべての内容をcanvasに変換する.htmlにsvgがある場合は、まずsvgをcanvasに変換します.
tableは単独でインポートする必要がある、jspdf.plugin.autotable.jsプラグインはjson配列をサポートし、tableラベルのhtml要素をサポートします.本文はtableラベルを使います.
firefox:html 2 canvas svg+htmlをcanvasに直接変換することはできません-->svg要素をcanvas-->html+canvasに変換してcanvasに変換します
chrome:html 2 canvasはsvg+htmlを直接canvasに変換できます
// svg canvas
// :canvg.js
function svg2canvas (targetElem) {
var nodesToRecover = [];
var nodesToRemove = [];
var svgElem = targetElem.find('svg');
svgElem.each(function(index, node) {
var parentNode = node.parentNode;
var svg = node.outerHTML;
var canvas = document.createElement('canvas');
canvg(canvas, svg);
nodesToRecover.push({
parent: parentNode,
child: node
});
parentNode.removeChild(node);
nodesToRemove.push({
parent: parentNode,
child: canvas
});
parentNode.appendChild(canvas);
});
}// html( ) iframe
// ， ， iframe
// 。
// ： chart canvas ， web 。
function openWithIframe(html){
var iframe = document.createElement('iframe');
iframe.setAttribute("id", "myFrmame");
var $iframe = $(iframe);
$iframe.css({
'visibility': 'hidden', 'position':'static', 'z-index':'4'
}).width($(window).width()).height($(window).height());
$('body').append(iframe);
var ifDoc = iframe.contentWindow.document;
// css iframe ，
var style = "<link href='/javax.faces.resource/css/auth.css.jsf' rel='stylesheet' type='text/css'>";
style+="<link href='/javax.faces.resource/css/common.css.jsf' rel='stylesheet' type='text/css'>";
style+="<link href='/javax.faces.resource/css/dc.css.jsf' rel='stylesheet' type='text/css'>";
html = "<!DOCTYPE html><html><head>"+style+"</head><body>"+html+"</body></html>"
ifDoc.open();
ifDoc.write(html);
ifDoc.close();
/*
// ，
var fbody = $iframe.contents().find("body");
fbody.find("#chart-center").removeAttr("width");
fbody.find(".page-container").css("width", "370px");
fbody.find(".center-container").css("width", "600px");
fbody.find("#severity-chart svg").attr("width", "370");
fbody.find("#status-chart svg").attr("width", "300");
*/
return fbody;
}// pdf
function exportAsPDF(){
// pdf html
var chartCenter = document.getElementById("chart-center").outerHTML;
var fbody = openWithIframe(chartCenter);
svg2canvas(fbody);
//html2canvas
html2canvas(fbody, {
onrendered: function(canvas) {
//var myImage = canvas.toDataURL("image/png");
//alert(myImage);
//window.open(myImage);
/*
canvas.toBlob(function(blob) {
saveAs(blob, "report.png");
}, "image/png");
*/
// ：base64 jpg 。
var imgData = canvas.toDataURL('image/jpeg');
//alert(imgData);
//l: ， p：
var doc = new jsPDF('l', 'pt', 'a3');
//var doc = new jsPDF('p', 'mm', [290, 210]);
//var doc = new jsPDF();// A4， ， 。
doc.setFontSize(22);
doc.setFontType("bolditalic");
doc.text(500, 30, "Ticket Report"); //x:500, y:30
doc.addImage(imgData, 'jpeg', 10, 60); // ：x:10, y:60
doc.addPage(); //
// table pdf 。
var res = doc.autoTableHtmlToJson(document.getElementById("tickets-summary-table"), true);
doc.autoTable(res.columns, res.data);
doc.save('ticket.report_'+new Date().getTime()+'.pdf');
$('#myFrmame').remove(); // iframe
},
background:"#fff", // ， ， html ， 。
allowTaint: true // ， false， html2canvas
});
};