0

我正在尝试将 pdf 文件加载到我的项目中，但我看不到它。它只是一直显示“正在加载 PDF...”

我已经添加pdfjs了一些 github repo 问题中提到的 web-worker，但仍然没有变化。我尝试通过创建一个新项目起诉来构建页面create-react-app，它似乎工作正常。

import React, { PureComponent } from "react";
import { Document, Page, pdfjs } from "react-pdf/dist/entry.webpack";
import printJS from "print-js";

import requiredFile from "./pdfdemo.pdf";


pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${
  pdfjs.version
  }/pdf.worker.js`;

export default class PdfViewer extends PureComponent {
  state = {
    numPages: null,
    pageNumber: 1,
    rotate: 0,
    scale: 1
  };

  onDocumentLoadSuccess = ({ numPages }) => {
    console.log('this function was triggered')
    this.setState({ numPages });
  };

  render() {
    const { pageNumber, numPages, scale, rotate } = this.state;

    return (
      <React.Fragment>
        <div id="ResumeContainer">
          <div style={{ width: 600 }}>
            <Document
              className="PDFDocument"
              file={requiredFile}
              onLoadError={(error) => {
                console.log("Load error", error)
              }}
              onSourceSuccess={() => {
                console.log("Source success")
              }}
              onSourceError={(error) => {
                console.error("Source error", error)
              }}
              onLoadSuccess={this.onDocumentLoadSuccess}
            >
              {window === undefined ? <div>nothing here</div> : <Page
                pageNumber={pageNumber}
                height={600}
                className="PDFPage PDFPageOne"
                scale={scale}
              />}
            </Document>
          </div>
        </div>
      </React.Fragment>
    );
  }
}

onSourceSuccess回调似乎在控制台日志记录中触发，但没有其他回调触发。在控制台中，我可以看到一个错误，指出该窗口未定义。

4

2 回答 2

0

更改 node_modules\react-scripts\config\webpack.config.js 添加这一行

output: {
     ++   globalObject: 'this'
 }

https://github.com/wojtekmaj/react-pdf/issues/190

于 2019-09-20T07:17:41.093 回答
0

我设法解决了我的问题。这个问题似乎是由于在我的应用程序中一个完全不同的位置对窗口对象进行了变量分配。有趣的是，由于在此之前的分配，应用程序中没有任何问题。希望这个信息。可以帮助别人。

于 2019-08-28T08:25:54.250 回答