0

I am trying to load a pdf file into my project, but I am unable to see it. It just keeps showing 'Loading PDF...'

I have added pdfjs web-worker as mentioned in some of their github repo issues, but still no change. I tried building the page by creating a new project suing create-react-app and it seems to be working fine. 

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

The onSourceSuccess callback seems to be firing on console logging, but none of the other callbacks fire. In the console, I can see an error stating that the window is undefined.

Aiden Yeomin Nam
  • 315
  • 5
  • 16
arvir
  • 101
  • 1
  • 10

2 Answers2

0

I managed to resolve my issue. The issue seemed to happen due to a variable assignment to the window object at a completely different place in my application. The funny thing is that there wasn't any issue in the application because of that assignment prior to this. Hope this info. may help someone else.

arvir
  • 101
  • 1
  • 10
0

change node_modules\react-scripts\config\webpack.config.js add this line from

output: {
     ++   globalObject: 'this'
 }

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

Anshul Kabra
  • 129
  • 17