CODEWITHSUNDEEP
javascriptreactjspdf-generationscreenshot
Michaela
Michaela

Reputation: 267

Take screenshot of React app and generate it as PDF

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?

Upvotes: 8

Views: 23808

Answers (3)

Arvind Pal
Arvind Pal

Reputation: 521

Using html2canvas and jsPDF created a react components that export the div and its children components as pdf and Image

The react component is defined as following

        import React from 'react'
        import html2canvas from 'html2canvas'
        import { jsPDF } from "jspdf";
    
        class Exporter extends React.Component {
           constructor(props) {
             super(props)
           } 
    
        export =(type, name)=>{
    
        html2canvas(document.querySelector(`#capture`)).then(canvas => {
          let dataURL = canvas.toDataURL('image/png');
    
          if (type === 'pdf') {
            const pdf = new jsPDF({
              orientation: "landscape",
              unit: "in",
              format: [14, 10]
            });
    
            pdf.addImage(dataURL, 'PNG', .6, .6);
            pdf.save(`${name}.pdf`);
    
          } else if (type === 'png') {
            var link = document.createElement('a');
            link.download = `${name}.png`;
            link.href = dataURL;
            link.click();
          }
        });
     }
     render() { 
        return (
          <div>
            <button onClick={()=>this.export("pdf", "my-content")}></button>
            <div id={`capture`} >
              Content to export as pdf/png
              {this.props.children} //any child Component render here will be exported as pdf/png
            </div>
          </div>
        )
      }
    }

export default Exporter

Upvotes: 0

dorriz
dorriz

Reputation: 2689

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

Upvotes: 3

Sam Foot
Sam Foot

Reputation: 136

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.

Upvotes: 1

Related Questions