Generating a PDF file from React Components
Rendering react as pdf is generally a pain, but there is a way around it using canvas.
The idea is to convert :HTML -> Canvas -> PNG (or JPEG) -> PDF
To achieve the above, you'll need :
import React, {Component, PropTypes} from 'react';// download html2canvas and jsPDF and save the files in app/ext, or somewhere else// the built versions are directly consumable// import {html2canvas, jsPDF} from 'app/ext';export default class Export extends Component { constructor(props) { super(props); } printDocument() { const input = document.getElementById('divToPrint'); html2canvas(input) .then((canvas) => { const imgData = canvas.toDataURL('image/png'); const pdf = new jsPDF(); pdf.addImage(imgData, 'JPEG', 0, 0); // pdf.output('dataurlnewwindow'); pdf.save("download.pdf"); }) ; } render() { return (<div> <div className="mb5"> <button onClick={this.printDocument}>Print</button> </div> <div id="divToPrint" className="mt4" {...css({ backgroundColor: '#f5f5f5', width: '210mm', minHeight: '297mm', marginLeft: 'auto', marginRight: 'auto' })}> <div>Note: Here the dimensions of div are same as A4</div> <div>You Can add any component here</div> </div> </div>); }}The snippet will not work here because the required files are not imported.
An alternate approach is being used in this answer, where the middle steps are dropped and you can simply convert from HTML to PDF. There is an option to do this in the jsPDF documentation as well, but from personal observation, I feel that better accuracy is achieved when dom is converted into png first.
Update 0: September 14, 2018
The text on the pdfs created by this approach will not be selectable. If that's a requirement, you might find this article helpful.
you can user canvans with jsPDF
import jsPDF from 'jspdf';import html2canvas from 'html2canvas'; _exportPdf = () => { html2canvas(document.querySelector("#capture")).then(canvas => { document.body.appendChild(canvas); // if you want see your screenshot in body. const imgData = canvas.toDataURL('image/png'); const pdf = new jsPDF(); pdf.addImage(imgData, 'PNG', 0, 0); pdf.save("download.pdf"); }); }and you div with id capture is:
example
<div id="capture"> <p>Hello in my life</p> <span>How can hellp you</span></div>
Only few steps. We can download or generate PDF from our HTML page or we can generate PDF of specific div from a HTML page.
Steps : HTML -> Image (PNG or JPEG) -> PDF
Please Follow the below steps,
Step 1 :-
npm install --save html-to-imagenpm install jspdf --saveStep 2 :-
/* ES6 */import * as htmlToImage from 'html-to-image';import { toPng, toJpeg, toBlob, toPixelData, toSvg } from 'html-to-image'; /* ES5 */var htmlToImage = require('html-to-image');-------------------------import { jsPDF } from "jspdf";Step 3 :-
****** With out PDF properties given below ****** htmlToImage.toPng(document.getElementById('myPage'), { quality: 0.95 }) .then(function (dataUrl) { var link = document.createElement('a'); link.download = 'my-image-name.jpeg'; const pdf = new jsPDF(); pdf.addImage(dataUrl, 'PNG', 0, 0); pdf.save("download.pdf"); }); ****** With PDF properties given below ****** htmlToImage.toPng(document.getElementById('myPage'), { quality: 0.95 }) .then(function (dataUrl) { var link = document.createElement('a'); link.download = 'my-image-name.jpeg'; const pdf = new jsPDF(); const imgProps= pdf.getImageProperties(dataUrl); const pdfWidth = pdf.internal.pageSize.getWidth(); const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width; pdf.addImage(dataUrl, 'PNG', 0, 0,pdfWidth, pdfHeight); pdf.save("download.pdf"); });I think this is helpful. Please try