react-pdf-js - 未捕獲（承諾中）e {名稱：「InvalidPDFException」，消息：「無效的PDF結構」}

Question

我故意（最小化任何錯誤）只複製demo for react-pdf-js，加page和pages在state中解決錯誤，在render/return的末尾添加結尾);來解決另一個錯誤，並編輯組件名稱。不過，我收到以下錯誤，我不確定它的含義。它指向第一行viewingPDF（這是我的html擴展myapp.firebaseapp.com/viewingPDF），所以它不直接指向我的組件中的任何錯誤，我不確定如何修復它。

錯誤：

Uncaught (in promise) 
e 
message: "Invalid PDF structure" 
name : "InvalidPDFException" 
__proto__ : Error at https://myapp.firebaseapp.com/static/js/main.9108db74.js:34:3985 at Object.<anonymous> (https://myapp.firebaseapp.com/static/js/main.9108db74.js:34:4013) at Object.<anonymous> (https://myapp.firebaseapp.com/static/js/main.9108db74.js:34:12954) at t (https://myapp.firebaseapp.com/static/js/main.9108db74.js:33:27623) at Object.<anonymous> (https://myapp.firebaseapp.com/static/js/main.9108db74.js:56:12712) at t (https://myapp.firebaseapp.com/static/js/main.9108db74.js:33:27623) at re (https://myapp.firebaseapp.com/static/js/main.9108db74.js:33:28006) at https://myapp.firebaseapp.com/static/js/main.9108db74.js:33:28016 at n.(anonymous function).i (https://myapp.firebaseapp.com/static/js/main.9108db74.js:33:27496) at Object.<anonymous> (https://myapp.firebaseapp.com/static/js/main.9108db74.js:33:27500) 
stack: "Error↵ at https://myapp.firebaseapp.com/static/js/main.9108db74.js:34:3985↵ at Object.<anonymous> (https://myapp.firebaseapp.com/static/js/main.9108db74.js:34:4013)↵ at Object.<anonymous> (https://myapp.firebaseapp.com/static/js/main.9108db74.js:34:12954)↵ at t (https://myapp.firebaseapp.com/static/js/main.9108db74.js:33:27623)↵ at Object.<anonymous> (https://myapp.firebaseapp.com/static/js/main.9108db74.js:56:12712)↵ at t (https://myapp.firebaseapp.com/static/js/main.9108db74.js:33:27623)↵ at re (https://myapp.firebaseapp.com/static/js/main.9108db74.js:33:28006)↵ at https://myapp.firebaseapp.com/static/js/main.9108db74.js:33:28016↵ at n.(anonymous function).i (https://myapp.firebaseapp.com/static/js/main.9108db74.js:33:27496)↵ at Object.<anonymous> (https://myapp.firebaseapp.com/static/js/main.9108db74.js:33:27500)" 
__proto__: Object 
constructor: Error() 
message: "" 
name: "Error" 
toString: toString() 
__proto__: Object 
__defineGetter__: __defineGetter__() 
__defineSetter__: __defineSetter__() 
__lookupGetter__: __lookupGetter__() 
__lookupSetter__: __lookupSetter__() 
constructor: Object() 
hasOwnProperty: hasOwnProperty() 
isPrototypeOf: isPrototypeOf() 
propertyIsEnumerable: propertyIsEnumerable() 
toLocaleString: toLocaleString() 
toString: toString() 
valueOf: valueOf() 
get __proto__: __proto__() 
set __proto__: __proto__() 

這是我的組件實現（保持接近於演示以上）：

import React from 'react'; 
import PDF from 'react-pdf-js'; 

class ViewPDF extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     page: 0, 
     pages: 3 
    } 
    this.onDocumentComplete = this.onDocumentComplete.bind(this); 
    this.onPageComplete = this.onPageComplete.bind(this); 
    this.handlePrevious = this.handlePrevious.bind(this); 
    this.handleNext = this.handleNext.bind(this); 
    } 

    onDocumentComplete(pages) { 
    this.setState({ page: 1, pages }); 
    } 

    onPageComplete(page) { 
    this.setState({ page }); 
    } 

    handlePrevious() { 
    this.setState({ page: this.state.page - 1 }); 
    } 

    handleNext() { 
    this.setState({ page: this.state.page + 1 }); 
    } 

    renderPagination(page, pages) { 
    let previousButton = <li className="previous" onClick={this.handlePrevious}><a href="#"><i className="fa fa-arrow-left"></i> Previous</a></li>; 
    if (page === 1) { 
     previousButton = <li className="previous disabled"><a href="#"><i className="fa fa-arrow-left"></i> Previous</a></li>; 
    } 
    let nextButton = <li className="next" onClick={this.handleNext}><a href="#">Next <i className="fa fa-arrow-right"></i></a></li>; 
    if (page === pages) { 
     nextButton = <li className="next disabled"><a href="#">Next <i className="fa fa-arrow-right"></i></a></li>; 
    } 
    return (
     <nav> 
     <ul className="pager"> 
      {previousButton} 
      {nextButton} 
     </ul> 
     </nav> 
    ); 
    } 

    render() { 
    let pagination = null; 
    if (this.state.pages) { 
     pagination = this.renderPagination(this.state.page, this.state.pages); 
    } 
    return (
     <div> 
     <PDF file="somefile.pdf" onDocumentComplete={this.onDocumentComplete} onPageComplete={this.onPageComplete} page={this.state.page} /> 
     {pagination} 
     </div> 
    ); 
    } 
} 

module.exports = ViewPDF; 

在努力向下剝離代碼到裸基本只是得到一個pdf渲染，我或者減少我的組件到以下。儘管如此，我也遇到了同樣的錯誤。

替代金額（減少以基礎）：

import React from 'react'; 
import PDF from 'react-pdf-js'; 

export default class ViewPDF extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     page: 0, 
     pages: 3 
    }; 

    this.onDocumentComplete = this.onDocumentComplete.bind(this); 
    this.onPageComplete = this.onPageComplete.bind(this); 
    } 

    onDocumentComplete(pages) { 
    this.setState({ page: 1, pages }); 
    } 

    onPageComplete(page) { 
    this.setState({ page }); 
    } 

    render() { 
    return (
     <div> 
     <PDF file="somePdfToView.pdf"/> 
     </div> 
    ); 
    } 
} 

有什麼建議？

Answer 1

「無效的PDF結構」..我敢肯定，演示已經採取了一些自由與該文件參考（<PDF file="somePdfToView.pdf"/>）。見react-pdf#props它應該是什麼。