フロントエンド HTML には動的にレポートが生成され、フロントエンドには日付範囲コンポーネントという関数があるため、これをドラッグすると、レポートはバックグラウンドに送信されずに動的に変更されます。
したがって、レポートの生成には js を使用する必要があります:
使用されるコンポーネント:
jquery.js jspdf.js canvg.js html2canvas.js jspdf.plugin.autotable.js
フロントデスクが動的に生成するチャートは通常、HTML5のcanvasまたはsvgを使用します。残念ながら、svgについては勉強していません。
レポートは元の HTML ページの外観を維持する必要がありますが、HTML 全体ではないため、実際に PDF レポートに変換する必要があるのは html svg
前提: jsPDF は HTML をサポートしていますが、そのサポートはあまり良くありません。HTML を使用して PDF を直接生成すると、HTML 内のテキスト、スタイル、構造のみが保持され、失われます。
例: テーブルが失われました。
jsPDF は svg インポートをサポートしていません。
アイデア: SVG を Canvas に変換し、次に HTML Canvas を Canvas に変換し、次に html2canvas を使用して Canvas を画像に変換し、最後に画像を PDF に書き込みます。
テーブルには、jspdf.plugin.autotable.js
Firefox: html2canvas は SVG HTML を Canvas に直接変換できません --> まず SVG 要素を Canvas に変換します --> HTML Canvas を Canvas に変換します
chrome: html2canvas は 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 }); };
以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。