CODEWITHSUNDEEP
javascriptreactjsreact-pdf
dougfair
dougfair

Reputation: 358

react-pdf loads file from disk but not url

I have built a react app using create-react app that displays pdfs using react-pdf. This works fine when I enter a file name that refers to a file on disk but I get a "Failed to load PDF" error when entering a url. I have tried multiple urls and all fail. In the console I am also getting the following warning which from some googling seems to refer to a webpack incompatability though I get it regardless of the file type I an trying to display:

./node_modules/pdfjs-dist/build/pdf.js Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

I am using the following versions versions: react-pdf (4.1.10), reacts-scripts (3.0.1) webpack (4.29.6), react (16.12.0).

I have also done the following imports etc at the top of my code as recommended:

import React, { Component } from 'react';
import { Document, Page, pdfjs } from 'react-pdf';

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

It seems other have had this problem but it is hard to work out the solution. An example of the file I am trying to display is: file="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf"

Any help appreciated!

Upvotes: 2

Views: 12464

Answers (1)

David Buzatu
David Buzatu

Reputation: 644

I don't know if it still helps, but I struggled with this problem today. The solution was to pass an object to the file prop inside the Document component.

<Document
    file={{
      url:
        'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf',
    }}
    onLoadSuccess={onDocumentLoadSuccess}
>

Upvotes: 8

Related Questions