ReactJS Html To pdf & HTML table to pdf

 https://github.com/MrRio/jsPDF/issues/762 


//--------

import html2canvas from 'html2canvas';

import jsPDF from "jspdf";


downloadFile() {
let pdfName = "licencia";
var doc = new jsPDF({
format: "a4"
});

  html2canvas(document.getElementById("pdf-doc"), {
    scale: "5"
  }).then(canvas => {
    console.log("Capturando");
    this.imgFile = canvas;
    doc.addImage(this.imgFile, "JPEG", 5, 5, 200, 285);
    doc.save(pdfName + ".pdf");
  });
}
===============================================
//add footer
    addFooters = doc => {
        const pageCount = doc.internal.getNumberOfPages();
        doc.setTextColor("black");
        doc.setFont('helvetica', 'italic')
        doc.setFontSize(8)
        for (var i = 1; i <= pageCount; i++) {
          doc.setPage(i)
          doc.text('Page ' + String(i) + ' of ' + String(pageCount), doc.internal.pageSize.width / 2, doc.internal.pageSize.height-10, {
            align: 'center'
          });        
          doc.text(moment().format('YYYY-MM-DD HH:mm:ss'),  doc.internal.pageSize.width-10, doc.internal.pageSize.height-10,{align:'right'});
        }
      }
  
//to generate HTML to PDF
jsToPdf = () => {
    var el=document.querySelector("#jspdf");
    el.style.border = "1px solid #c8ced3";

    html2canvas(el,{ scale: "10"}).then(canvas => {

        const imgData = canvas.toDataURL('image/jpeg');
        const unit = "pt";
        const size = "A4"; // Use A1, A2, A3 or A4
        const orientation = "portrait"; // portrait or landscape    
       
        const pdf = new jsPDF(orientation, unit, size);  
     
        pdf.setFontSize(10);   
        //------Page Header---------
        pdf.text("Details", 10, 10,); 
        pdf.setTextColor("red");
        pdf.text("header",  pdf.internal.pageSize.width-10, 10,{align:'right'});
         //---------------------------

      
        const imgProps= pdf.getImageProperties(imgData);
        const pdfWidth = pdf.internal.pageSize.getWidth();
        const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
        pdf.addImage(imgData, 'jpeg', 10, 15, pdfWidth-20, pdfHeight-30);
        this.addFooters(pdf);
        pdf.save("report_details.pdf");
    });
}

// HTML table to PDF
import jsPDF from "jspdf";
import "jspdf-autotable";
    jsToPdf = () => {
        const unit = "pt";
        const size = "A4"; // Use A1, A2, A3 or A4
        const orientation = this.props?.orientation?this.props?.orientation:"portrait"; // portrait or landscape
    
        const marginLeft = 40;
        const doc = new jsPDF(orientation, unit, size);
        doc.setFontSize(10);   
        //------Page Header---------
        doc.text(this.props?.tableHeader, marginLeft, 40,); 
        doc.setTextColor("red");
        doc.text("header",  doc.internal.pageSize.width-40, 40,{align:'right'});
        //---------------------------
        
        var columns=[];
        
        let header=this.props?.columnHeader;
        let excludedColumns=this.props?.excludedColumns; //put key value of columns which need to excluded in an array
       
        header.forEach(function(item) {
          if(!excludedColumns?.includes(item.key))
          {
            let col={header:item.title, dataKey:item.key};
            columns.push(col);
          }
         });


        doc.autoTable({
            startY:50,
            showHead: 'everyPage',
            showFoot: 'everyPage',
            body: this.props?.tableData,
            columns:columns ,
            styles: {
                lineWidth:1,
                fontSize:8
            }
        })

      // this.addFooters(doc);
       doc.save(this.props?.fileName);
    }
 


Comments

Popular posts from this blog

Agile Methodology & Scrum

Post Gre SQL dataabase