使用react-pdf和pdfjs从PDF Blob创建图像列表

问题描述

我正在使用react-pdf在客户端生成PDF。效果很好。

但是，在移动设备上，PDFViewer组件不起作用。

因此，我有一个7页的PDF，我需要某种方式来“预览” /在移动设备上显示。

我的近期解决方案是将7页的pdf转换为7个单独的jpeg或png。

我正在尝试使用pdfjs做到这一点，但运气不佳...下面有更多信息：

我有以下内容

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

看起来像

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;

它返回一个数组，例如[“ data：”，“ data：”，“ data：”，“ data：”，“ data：”，“ data：”，“ data：” ]，其中显示一些“网址未找到状态” img阶段

但是我已经确认了Blob是正确的（我可以下载并且看起来不错）。

其他一些研究

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）