Generating a PDF file from React Components

Question

I have been building a polling application  People are able to create their polls and get data regarding the question s  they ask  I would like to add the functionality to let the users download the results in the form of a PDF   For example I have two components which are responsible for grabbing the question and data    lt QuestionBox   gt   lt ViewCharts   gt    I m attempting to output both components into a PDF file  The user can then download this PFD file  I have found a few packages that permit the rendering of a PDF inside a component  However I failed to find one that can generate PDF from an input stream consisting of a virtual DOM  If I want to achieve this from scratch what approach should I follow

User · Accepted Answer

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 :

html2canvas &
jsPDF

_x000D_

import React, {Component, PropTypes} from 'react';_x000D_
_x000D_
// download html2canvas and jsPDF and save the files in app/ext, or somewhere else_x000D_
// the built versions are directly consumable_x000D_
// import {html2canvas, jsPDF} from 'app/ext';_x000D_
_x000D_
_x000D_
export default class Export extends Component {_x000D_
  constructor(props) {_x000D_
    super(props);_x000D_
  }_x000D_
_x000D_
  printDocument() {_x000D_
    const input = document.getElementById('divToPrint');_x000D_
    html2canvas(input)_x000D_
      .then((canvas) => {_x000D_
        const imgData = canvas.toDataURL('image/png');_x000D_
        const pdf = new jsPDF();_x000D_
        pdf.addImage(imgData, 'JPEG', 0, 0);_x000D_
        // pdf.output('dataurlnewwindow');_x000D_
        pdf.save("download.pdf");_x000D_
      })_x000D_
    ;_x000D_
  }_x000D_
_x000D_
  render() {_x000D_
    return (<div>_x000D_
      <div className="mb5">_x000D_
        <button onClick={this.printDocument}>Print</button>_x000D_
      </div>_x000D_
      <div id="divToPrint" className="mt4" {...css({_x000D_
        backgroundColor: '#f5f5f5',_x000D_
        width: '210mm',_x000D_
        minHeight: '297mm',_x000D_
        marginLeft: 'auto',_x000D_
        marginRight: 'auto'_x000D_
      })}>_x000D_
        <div>Note: Here the dimensions of div are same as A4</div> _x000D_
        <div>You Can add any component here</div>_x000D_
      </div>_x000D_
    </div>);_x000D_
  }_x000D_
}

_x000D_

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.

User · Answer

I used jsPDF and html-to-image  You can check out the code on the below git repo  Link  If you like  you can drop a star there

User · Answer

This may or may not be a sub-optimal way of doing things  but the simplest solution to the multi-page problem I found was to ensure all rendering is done before calling the jsPDFObj save method   As for rendering hidden articles  this is solved with a similar fix to css image text replacement  I position absolutely the element to be rendered -9999px off the page left  this doesn t affect layout and allows for the elem to be visible to html2pdf  especially when using tabs  accordions and other UI components that depend on  display  none    This method wraps the prerequisites in a promise and calls pdf save   in the finally   method  I cannot be sure that this is foolproof  or an anti-pattern  but it would seem that it works in most cases I have thrown at it    x000D   x000D     Get List of paged elements  x000D  let elems   document querySelectorAll   elemClass    x000D  let pdf   new jsPDF  portrait    mm    a4    x000D   x000D     Fix Graphics Output by scaling PDF and html2canvas output to 2 x000D  pdf scaleFactor   2  x000D   x000D     Create a new promise with the loop body x000D  let addPages   new Promise  resolve reject   gt   x000D    elems forEach  elem  idx    gt    x000D         Scaling fix set scale to 2 x000D      html2canvas elem   scale   2    x000D         then canvas   gt   x000D          if idx  lt  elems length - 1   x000D            pdf addImage canvas toDataURL  image png    0  0  210  297   x000D            pdf addPage    x000D            else   x000D            pdf addImage canvas toDataURL  image png    0  0  210  297   x000D            console log  Reached last page  completing    x000D            x000D       x000D     x000D    setTimeout resolve  100   Timeout adding page      idx   x000D     x000D   x000D  addPages finally     gt   x000D     console log  Saving PDF    x000D     pdf save    x000D      x000D   x000D   x000D

User · Answer

React-PDF is a great resource for this   It is a bit time consuming converting your markup and CSS to React-PDF s format  but it is easy to understand  Exporting a PDF and from it is fairly straightforward   To allow a user to download a PDF generated by react-PDF  use their on the fly rendering  which provides a customizable download link  When clicked  the site renders and downloads the PDF for the user   Here s their REPL which will familiarize you with the markup and styling required  They have a download link for the PDF too  but they don t show the code for that here

User · Answer

you can user canvans with jsPDF import jsPDF from  jspdf   import html2canvas from  html2canvas      exportPdf        gt          html2canvas document querySelector  quot  capture quot    then canvas   gt            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  quot download pdf quot                  and you div with id capture is  example  lt div id  quot capture quot  gt     lt p gt Hello in my life lt  p gt     lt span gt How can hellp you lt  span gt   lt  div gt

User · Answer

npm install jspdf --save     code on react   import jsPDF from  jspdf     var doc   new jsPDF      doc fromHTML   lt div gt JOmin lt  div gt    1  1    onclick      doc save  name pdf

User · Answer

You can use ReactPDF  Lets you convert a div into PDF with ease  You will need to match your existing markup to use ReactPDF markup  but it is worth it

User · Answer

You can use ReactDOMServer to render your component to HTML and then use this on jsPDF  First do the imports  import React from  quot react quot   import ReactDOMServer from  quot react-dom server quot   import jsPDF from  jspdf    then  var doc   new jsPDF    doc fromHTML ReactDOMServer renderToStaticMarkup this render      doc save  quot myDocument pdf quot     Prefer to use   renderToStaticMarkup  instead of   renderToString  As the former include HTML code that react relies on

User · Answer

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 - gt  Image  PNG or JPEG  - gt  PDF Please Follow the below steps  Step 1  - npm install --save html-to-image npm install jspdf --save  Step 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  quot jspdf quot    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  quot download pdf quot                               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  quot download pdf quot                  I think this is helpful  Please try

[reactjs] Generating a PDF file from React Components

Examples related to reactjs

Examples related to pdf

Examples related to meteor