Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Failed to load PDF file from URL

See original GitHub issue

Before you start - checklist

I have read documentation in README
I have checked sample and test suites to see real life basic implementation
I have checked if this question is not already asked

What are you trying to achieve? Please describe. Unable to render pdf (url)

Describe what are you trying to achieve Ex. I’d like to display multiple pages of my PDF. I’m trying to render pdf from url , but I get the following error in the browser

failed to load pdf file pages of

Describe solutions you’ve tried SamplePdf.jsx

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

class Sample extends Component {
    constructor(props) {
        super(props);
        this.state = {
            numPages: null,
            pageNumber: 1
        };
    }
 onDocumentLoad({numPages}) {
        this.setState({numPages});
    }
render() {
const {pageNumber, numPages} = this.setState;
        return (
            <div>
                <Document
                    file={{url: 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf'}}
                    onLoadSuccess={this.onDocumentLoad}>
                    <Page pageNumber={pageNumber}/>
                </Document>
                <p>Page {pageNumber} of {numPages}</p>
            </div>
        );
    }
}

export default Sample;

index.jsx

import React from 'react';
import { storiesOf } from '@storybook/react';
import Sample from '../Sample';

const storyPath = 'TrialComponents/reactpdf';

storiesOf(storyPath, module)
  .add('Static', () => <Sample />);

Additional information

Environment