How to convert PDF to Image in ReactJS - reactjs

Question

I am developing a course platform using ReactJS. When the user finishes a course he can download the PDF file.
I need a version of the same file as an image (png or jpg), but I haven't found any way to do that. Can someone help me?
To generate the PDF certificate I'm using the lib: React-PDF.
This is my code to generate pdf file:
<PDFDownloadLink
document={
<Certificate course={course} name={name} date={today()} />
}
fileName="somename.pdf"
>
{({ blob, url, loading, error }) => {
return loading ? 'Loading document...' : 'Download now!';
}}
</PDFDownloadLink>

Answer 1

I created a helper function: convertPdfToImages which takes in the pdf file and returns an array of images encoded in base64, using the pdfjs package.
npm install pdfjs-dist -S
const PDFJS = require("pdfjs-dist/webpack");
const readFileData = (file) => {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = (e) => {
resolve(e.target.result);
};
reader.onerror = (err) => {
reject(err);
};
reader.readAsDataURL(file);
});
};
//param: file -> the input file (e.g. event.target.files[0])
//return: images -> an array of images encoded in base64
const convertPdfToImages = async (file) => {
const images = [];
const data = await readFileData(file);
const pdf = await PDFJS.getDocument(data).promise;
const canvas = document.createElement("canvas");
for (let i = 0; i < pdf.numPages; i++) {
const page = await pdf.getPage(i + 1);
const viewport = page.getViewport({ scale: 1 });
const context = canvas.getContext("2d");
canvas.height = viewport.height;
canvas.width = viewport.width;
await page.render({ canvasContext: context, viewport: viewport }).promise;
images.append(canvas.toDataURL());
}
canvas.remove();
return images;
}

Answer 2

Please use this library
https://www.npmjs.com/package/react-pdf-to-image
It is pretty straight forward. It will return the list of images (each page in the pdf as one image)
import React from 'react';
import {PDFtoIMG} from 'react-pdf-to-image';
import file from './pdf-sample.pdf';
const App = () =>
<div>
<PDFtoIMG file={file}>
{({pages}) => {
if (!pages.length) return 'Loading...';
return pages.map((page, index)=>
<img key={index} src={page}/>
);
}}
</PDFtoIMG>
</div>
export default App;
if you want to just download the each pdf page as image instead of component please follow below code
import PDFJS from 'pdfjs-dist/webpack';
this is the dependency library for react-pdf-to-image. Then read the pdf file(I'm giving base64 as input)
PDFJS.getDocument(blob).promise.then(pdf => {
const pages = [];
this.pdf = pdf;
for (let i = 0; i < this.pdf.numPages; i++) {
this.getPage(i + 1).then(result => {
// the result is the base 64 version of image
});
}
})
after reading each page, read each page as image from getPage method as below
getPage = (num) => {
return new Promise((resolve, reject) => {
this.pdf.getPage(num).then(page => {
const scale = "1.5";
const viewport = page.getViewport({
scale: scale
});
const canvas = document.createElement('canvas');
const canvasContext = canvas.getContext('2d');
canvas.height = viewport.height || viewport.viewBox[3]; /* viewport.height is NaN */
canvas.width = viewport.width || viewport.viewBox[2]; /* viewport.width is also NaN */
page.render({
canvasContext, viewport
}).promise.then((res) => {
resolve(canvas.toDataURL());
})
})
})
}