title: Create list of images from a PDF blob using react-pdf and pdfjs
body: <p>I am using react-pdf to generate a PDF on the client-side. It works great.</p>
  <p>However, on mobile, the PDFViewer components doesn't work.</p>
  <p>So, I have a 7-page PDF I need some way to &quot;preview&quot;/display on mobile.</p>
  <p>My near-term solution is to convert the 7-page pdf to 7 individual jpegs or pngs.</p>
  <p>I'm trying to do this with pdfjs but not having much luck... more info below:</p>
  <p>I have the following component</p>
  <pre><code>    return (
        &lt;div&gt;
          &lt;PDFtoIMG
            pdfComponent={
              &lt;ReactPDFExample /&gt;
            }
          &gt;
            {({pages}) =&gt; {
              if (!pages.length) return 'Loading...';
              return pages.map((page, index) =&gt; &lt;img key={index} src={page} /&gt;);
            }}
          &lt;/PDFtoIMG&gt;
        &lt;/div&gt;
      );
  </code></pre>
  <p>It looks like</p>
  <pre><code>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 = () =&gt; {
        PDFJS.getDocument(reader.result).promise.then((pdf) =&gt; {
          const pages = [];
          this.pdf = pdf;
          for (let i = 0; i &lt; this.pdf.numPages; i++) {
            pages.push(this.getPage(i + 1));
          }
          Promise.all(pages).then((pages) =&gt; {
            this.setState({pages});
          });
        });
      };
    }
  
    getPage = (num) =&gt; {
      return new Promise((resolve, reject) =&gt; {
        this.pdf.getPage(num).then((page) =&gt; {
          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(() =&gt; {
              resolve(canvas.toDataURL('image/jpeg'));
            });
        });
      });
    };
  
    render() {
      return this.props.children({pages: this.state.pages});
    }
  }
  
  export default PDFtoIMG;
  </code></pre>
  <p>it returns an array like [&quot;data:,&quot;, &quot;data:,&quot;, &quot;data:,&quot;, &quot;data:,&quot;, &quot;data:,&quot;, &quot;data:,&quot;, &quot;data:,&quot;] which display some &quot;url no found state&quot; img stages</p>
  <p><a href="https://i.stack.imgur.com/XZ7bi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XZ7bi.png" alt="enter image description here" /></a></p>
  <p>But I've confirmed the blob is correct (I can download and looks fine).</p>
  <p>Some other research</p>
  <ul>
  <li><a href="https://stackoverflow.com/questions/62744470/turn-pdf-into-array-of-pngs-using-javascript-with-pdf-js">Turn pdf into array of png&#39;s using javascript (with pdf.js)</a></li>
  </ul>