Javascript react pdf js-Uncaught（承诺中）e{name:“InvalidPDFException”，message:“Invalid pdf structure”}

我故意（为了首先尽量减少任何错误）只复制了

状态下的
页面
和
页面
，为了解决错误，添加了结束
）渲染/返回
的末尾添加code>以解决另一个错误，并编辑组件名称。尽管如此，我还是得到了下面的错误，不确定它的意思。它指向
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;

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

Uncaught（承诺中）
E
消息：“无效的PDF结构”
名称：“InvalidPDException”
__proto_uu u;：错误在https://myapp.firebaseapp.com/static/js/main.9108db74.js:34:3985 在对象上。；
如果（第===1页）{
previousButton=
；
}
让nextButton=
；
如果（第==页）{
下一个按钮=
；
}
返回(

{previousButton}
{nextButton}

);
}
render（）{
设分页=null；
if（this.state.pages）{
pagination=this.renderPagination（this.state.page，this.state.pages）；
}
返回(
{分页}
);
}
}
module.exports=ViewPDF；

为了将代码剥离到最基本的部分，并获得一个pdf渲染，我将组件缩减为以下内容。不过，我还是犯了同样的错误

备选方案（简化为基本方案）：

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;

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

从“React”导入React；
从“react PDF js”导入PDF；
导出默认类ViewPDF扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
页码：0，
页数：3
};
this.onDocumentComplete=this.onDocumentComplete.bind（this）；
this.onPageComplete=this.onPageComplete.bind（this）；
}
onDocumentComplete（页）{
this.setState（{page:1，page}）；
}
onPageComplete（第页）{
this.setState（{page}）；
}
render（）{
返回(
);
}
}

有什么建议吗？
“无效的PDF结构”。。我敢肯定，演示版对该文件引用有一定的自由（
）。看看它应该是什么。
你搞定了！谢谢将简单路径替换为“我的组件”顶部的导入语句（例如，
从“../static/sample.pdf”
”导入myPDF），然后将
替换为
@Rbar如何使导入工作？我也在尝试从“../myPDF.pdf”
导入myPDF，但我的说找不到模块。