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 = 1i <= pageCounti++) {
          doc.setPage(i)
          doc.text('Page ' + String(i) + ' of ' + String(pageCount), doc.internal.pageSize.width / 2doc.internal.pageSize.height-10, {
            align: 'center'
          });        
          doc.text(moment().format('YYYY-MM-DD HH:mm:ss'),  doc.internal.pageSize.width-10doc.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(orientationunitsize);  
     
        pdf.setFontSize(10);   
        //------Page Header---------
        pdf.text("Details"1010,); 
        pdf.setTextColor("red");
        pdf.text("header",  pdf.internal.pageSize.width-1010,{align:'right'});
         //---------------------------

      
        const imgPropspdf.getImageProperties(imgData);
        const pdfWidth = pdf.internal.pageSize.getWidth();
        const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
        pdf.addImage(imgData'jpeg'1015pdfWidth-20pdfHeight-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(orientationunitsize);
        doc.setFontSize(10);   
        //------Page Header---------
        doc.text(this.props?.tableHeadermarginLeft40,); 
        doc.setTextColor("red");
        doc.text("header",  doc.internal.pageSize.width-4040,{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.titledataKey: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

Chat Bot

Entity Framework

Microsoft Enterprise Library-Data Access Application Block for for .Net Core & .Net Standard