Create list of images from a PDF blob using react-pdf and pdfjs

Question

I am using react-pdf to generate a PDF on the client-side. It works great.

However, on mobile, the PDFViewer components doesn't work.

So, I have a 7-page PDF I need some way to "preview"/display on mobile.

My near-term solution is to convert the 7-page pdf to 7 individual jpegs or pngs.

I'm trying to do this with pdfjs but not having much luck... more info below:

I have the following component

    return (
      <div>
        <PDFtoIMG
          pdfComponent={
            <ReactPDFExample />
          }
        >
          {({pages}) => {
            if (!pages.length) return 'Loading...';
            return pages.map((page, index) => <img key={index} src={page} />);
          }}
        </PDFtoIMG>
      </div>
    );

It looks like

import {Component} from 'react';
import * as PDFJS from 'pdfjs-dist';
import {pdf} from '@react-pdf/renderer';

PDFJS.GlobalWorkerOptions.workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.5.207/pdf.worker.js`;

class PDFtoIMG extends Component {
  state = {
    pages: [],
  };

  async componentDidMount() {
    const blob = await pdf(this.props.pdfComponent).toBlob();
    const reader = new FileReader();
    reader.readAsDataURL(blob);
    reader.onloadend = () => {
      PDFJS.getDocument(reader.result).promise.then((pdf) => {
        const pages = [];
        this.pdf = pdf;
        for (let i = 0; i < this.pdf.numPages; i++) {
          pages.push(this.getPage(i + 1));
        }
        Promise.all(pages).then((pages) => {
          this.setState({pages});
        });
      });
    };
  }

  getPage = (num) => {
    return new Promise((resolve, reject) => {
      this.pdf.getPage(num).then((page) => {
        const scale = 1.5;
        const viewport = page.getViewport(scale);
        const canvas = document.createElement('canvas');
        const canvasContext = canvas.getContext('2d');
        canvas.height = viewport.height;
        canvas.width = viewport.width;
        page
          .render({
            canvasContext,
            viewport,
          })
          .promise.then(() => {
            resolve(canvas.toDataURL('image/jpeg'));
          });
      });
    });
  };

  render() {
    return this.props.children({pages: this.state.pages});
  }
}

export default PDFtoIMG;

it returns an array like ["data:,", "data:,", "data:,", "data:,", "data:,", "data:,", "data:,"] which display some "url no found state" img stages

But I've confirmed the blob is correct (I can download and looks fine).

Some other research

• Turn pdf into array of png's using javascript (with pdf.js)