Как преобразовать PDF в изображение в ReactJS

Question

Я разрабатываю платформу курса, используя ReactJS. Когда пользователь заканчивает курс, он может загрузить файл PDF.

Мне нужна версия того же файла, что и изображение (png или jpg), но я не нашел способа сделать это. Может ли кто-нибудь мне помочь?

Для создания сертификата PDF я использую библиотеку: React-PDF .

Это мой код для создания файла pdf:

<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

Используйте эту библиотеку

https://www.npmjs.com/package/react-pdf-to-image

Это довольно просто. Он вернет список изображений (каждая страница в pdf как одно изображение)

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;

если вы хотите просто загрузить каждую страницу pdf как изображение вместо компонента, следуйте приведенному ниже коду

import PDFJS from 'pdfjs-dist/webpack';

это библиотека зависимостей для response-pdf-to-image. Затем прочитайте файл pdf (я даю base64 в качестве ввода)

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
     });
   }
})

после чтения каждой страницы прочитайте каждую страницу как изображение из метода getPage, как показано ниже

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