Take screenshot of React app and generate it as PDF

Question

I'd like to generate a PDF from my React App, the easiest way would probably be to take a screenshot of the current state of my app / ideally a div and save it as PDF...I just don't seem to be able to find the best way how to do it.

Any ideas?

Answer 1

For anyone reading this pdfkit can also generate pdfs in the browser...nice!

You'll need to check out pdfkit website and specifically I only got it to work using the browser releases for pdfkit and blob-stream

https://github.com/devongovett/pdfkit/releases https://github.com/devongovett/blob-stream/releases

My code looked like

import PDFDocument from 'pdfkit'
import BlobStream from 'blob-stream'
import FileSaver from 'file-saver'

let doc = new PDFDocument()
    let stream = doc.pipe(BlobStream())
    addHeader(doc, 'My Report.....')
    doc.moveDown(0.5).fontSize(8)
   // render you doc
   // then add a stream eventListener to allow download
stream.on('finish', ()=>{
      let blob = stream.toBlob('application/pdf')
      FileSaver.saveAs(blob, 'myPDF.pdf')

    })
    doc.end()

Answer 2

How about a combination of:

html2canvas: https://html2canvas.hertzen.com/

and

jsPDF: https://parall.ax/products/jspdf

From the canvas provided by html2canvas, you can convert it to an image with .toDataUrl() and then feed that into jsPDF with the .addImage() method which wants a base64 image.