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 · 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

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 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

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

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

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  amp   jsPDF    x000D   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    gt    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   lt div gt  x000D         lt div className  mb5  gt  x000D           lt button onClick  this printDocument  gt Print lt  button gt  x000D         lt  div gt  x000D         lt div id  divToPrint  className  mt4      css   x000D          backgroundColor    f5f5f5   x000D          width   210mm   x000D          minHeight   297mm   x000D          marginLeft   auto   x000D          marginRight   auto  x000D            gt  x000D           lt div gt Note  Here the dimensions of div are same as A4 lt  div gt   x000D           lt div gt You Can add any component here lt  div gt  x000D         lt  div gt  x000D       lt  div gt    x000D      x000D    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

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

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

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

[reactjs] Generating a PDF file from React Components

Examples related to reactjs

Examples related to pdf

Examples related to meteor