PDF Doesn't display, Loading PDF message displayed. No Errors.

Before you start - checklist

• I followed instructions in documentation written for my React-PDF version
• I have checked if this bug is not already reported
• I have checked if an issue is not listed in Known issues
• If I have a problem with PDF rendering, I checked if my PDF renders properly in PDF.js demo

Description

I have to download a PDF from a NodeJS API and render it. The results of the API call render in both the react-pdf test page and also in Firefox. I’ve also hard-coded the path to a PDF file and that renders fine.

But when used in my app, I get the “Loading PDF” message and that never goes away and tthe PDF doesn’t render.

My code is simple enough:

import React, { Component } from 'react';
import { Document, Page } from 'react-pdf/dist/esm/entry.webpack';
import pdfFile from './CMS-2021-0070-0003-attachment_1.pdf';

class CommentPartPDF extends Component {
	constructor(props) {
		super(props);
		this.state = {
			pdf: null,
			pages: 0,
		};  
	}
	
	componentDidMount() {
		fetch(`/api/${this.props.office}/getPdf/${this.props.commentId}/${this.props.attNum}`)
		.then((data) => {
			this.setState({pdf: data});
		});
	}
	
	setPages = (p) => {
		this.setState({pages: p});
	}

	render() {  
		if (this.props.attNum >= 1 && this.state.pdf != null) {
			var pdf=this.state.pdf;
			return (
				<Document file={{data: pdf.data}}
					onLoadError={(e) => console.log(`PDF LOAD ERROR: ${JSON.stringify(e)}`)}
					onLoadSuccess={(p) => this.setPages(p)}>
					<Page pageNumber={1} />
				</Document>
			)
		} else {
			return null;
		}
	};
}
export default CommentPartPDF;

I suspect I’m not setting up the Document file attribute correctly, Any help would be great.

Steve

Steps to reproduce

Simply run the component as above

Expected behavior

Render and display the PDF

Actual behavior

Loading PDF is displayed forever and PDF file isn’t displayed

Additional information

None

Environment

• **Browser (if applicable): Chrome 96, Firefox 94
• React-PDF version: 5.7.1
• React version: 16.14.0
• Webpack version (if applicable): none

[Tenpi]

I had the same issue, and I managed to pinpoint the error.

"Error: The API version "2.12.313" does not match the Worker version "2.16.105"."

In my case I was using the most recent version of pdfjs-dist (to set the worker) but the most recent version of this package only supports up to 2.12.313.

This was the fix (on 5.7.2 of this package):

npm i pdfjs-dist@2.12.313

Also, loading local PDFs did not work for me. You have to convert them to URL as follows:

const blob = await axios.get(pdf, {responseType: "blob"}).then((r) => r.data)
const url = URL.createObjectURL(blob)

[scarton]

Well, it looks like a stream of data 😃 When I plug the URL into the test site, it renders fine. and I can tweak the headers on the response (I wrote the API too) and get a download which opens in FF and Chrome.