Générer un rapport PDF en utilisant jspdf

Générer un rapport PDF en utilisant jspdf_jquery

WBOY

Libérer： 2016-05-16 15:51:36

original

2040 Les gens l'ont consulté

Étant donné que le frontend HTML a des rapports générés dynamiquement et que le frontend a une fonction, un composant de plage de dates, lorsque vous le faites glisser, le rapport changera dynamiquement sans être soumis à l'arrière-plan.
Par conséquent, js doit être utilisé pour générer des rapports :

Composants utilisés :

jquery.js
jspdf.js
canvg.js
html2canvas.js
jspdf.plugin.autotable.js

Copier après la connexion

Les graphiques générés dynamiquement par la réception utilisent généralement du canevas HTML5 ou du svg. Malheureusement, j'ai rencontré le svg. S'il s'agit de flash, je ne l'ai pas étudié.

Étant donné que le rapport doit toujours conserver l'apparence de la page HTML d'origine, mais qu'il ne s'agit pas de l'intégralité du code HTML, ce qui doit vraiment être converti en rapport PDF est : html svg

Prémisse : jsPDF prend en charge le HTML, mais le support n'est pas très bon. Lorsque vous utilisez un HTML pour générer directement un PDF, en fait, il ne conserve que le texte, le style et la structure du HTML et est perdu.
Par exemple : la table est perdue.
jsPDF ne prend pas en charge l'importation SVG.

Idée : convertissez le svg en toile, puis convertissez le canevas html en canevas, puis utilisez html2canvas pour convertir le canevas en image, et enfin écrivez l'image au format pdf.
Pour le tableau, utilisez : jspdf.plugin.autotable.js

firefox : html2canvas ne peut pas convertir directement le html svg en canevas --> Convertir d'abord les éléments svg en canevas --> Convertir le canevas html en canevas
chrome : html2canvas peut convertir directement le html svg en canevas

//将指定节点下面的所有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);
  });
  
}

Copier après la connexion

//这里是将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;
}

Copier après la connexion

//导出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
  });
  
};

Copier après la connexion

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.