Question

我故意（最初将错误降至最低）仅复制了page，在pages中添加了state和);来解决错误，添加了关闭render/return末尾的viewingPDF解决了另一个错误，并编辑了组件名称。不过，我收到的错误如下，我不确定它的含义。它指向myapp.firebaseapp.com/viewingPDF的第一行（这是我的html扩展名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>
    );
  }
}

为了将代码剥离到基本的基础并获得pdf渲染，我将组件简化为以下内容。不过，我得到同样的错误。

替代方案（简化为基础知识）：

innerHTML

有什么建议吗？

Answer 1

“无效的PDF结构”..我非常确定该演示对该文件引用（<PDF file="somePdfToView.pdf"/>）采取了一些自由。请参阅react-pdf#props了解它应该是什么。

react-pdf-js - 未捕获（承诺）e {name：＆＃34; InvalidPDFException＆＃34;，message：＆＃34; PDF结构无效＆＃34;}

1 个答案: