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 PDFjsToPdf = () => { 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
Post a Comment