reactjs 在react-pdf中显示pdf时出错

k4emjkb1 于 2023-02-04 发布在 React

关注(0)|答案(6)|浏览(533)

我是新的新的React，我试图在浏览器上显示PDF文件。我得到一个错误，因为未能加载PDF。我试图运行https://www.npmjs.com/package/react-pdf中给出的示例程序。

- 应用程序js**

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

class MyApp extends Component {
  state = {
    numPages: null,
    pageNumber: 1,
  }

  onDocumentLoad = ({ numPages }) => {
    this.setState({ numPages });
  }

  render() {
    const { pageNumber, numPages } = this.state;

    return (
      <div>
        <Document
          file="./1.pdf"
          onLoadSuccess={this.onDocumentLoad}
        >
          <Page pageNumber={pageNumber} />
        </Document>
      </div>
    );
  }
}

export default MyApp;

- 索引. js**

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

- 错误屏幕截图**

reactjs

来源：https://stackoverflow.com/questions/48589169/error-in-displaying-pdf-in-react-pdf

6条答案

按热度按时间

mklgxw1f1#

问题是旧的，但希望这能帮助一些人。我面对这个问题，并在这里找到了解决方案https://github.com/wojtekmaj/react-pdf/issues/321。
import { Document, Page, pdfjs } from 'react-pdf';
将其添加到构造函数中。

constructor(props){
        super(props);
        pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
    }

赞(0）回复(0）举报 2023-02-04

lf5gs5x22#

您使用file="./1.pdf"加载文件，我认为这可能是问题所在。
如果您的文件结构如下：

源代码
App.js
组件
ShowPdfComponent.js
1.pdf
公众
bundle.js

然后您需要将1.pdf移动到public文件夹，如下所示：

源代码
App.js
组件
ShowPdfComponent.js
公众
bundle.js
1.pdf

因为当您编译的javascript代码从public/bundle.js执行时，bundle.js不知道如何到达文件系统中的src/components/1.pdf。
如果您使用的是webpack和webpack-dev-server，那么生产/开发环境之间也可能存在差异。
看看react-pdf的例子，它有平面文件结构，这就是它工作的原因。

赞(0）回复(0）举报 2023-02-04

6vl6ewon3#

如果你正在使用create-react-app，那么你需要以不同的方式导入，如

import { Document, Page } from 'react-pdf/dist/esm/entry.webpack'

因为它在引擎盖下使用了Webpack。

赞(0）回复(0）举报 2023-02-04

ovfsdjhp4#

您可以使用import samplePdf from './1.pdf'导入pdf文件，也可以在Document标签中直接使用file={samplePdf}。

赞(0）回复(0）举报 2023-02-04

ipakzgxi5#

以下是您在react TypeScript中显示pdf所需的最低设置：

import { Document, Page, pdfjs } from 'react-pdf'

pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/legacy/build/pdf.worker.min.js`;

const YourComponentReact = ({url}: {url: string}) => {
  return (<Document file={url}>
             <Page pageNumber={1} />
          </Document>)
}

如果你想改变页面，你可以添加一个快速按钮。如果你使用 typescript ，你只需要下载react-pdf和@types/react-pdf。

赞(0）回复(0）举报 2023-02-04

ff29svar6#

添加pdfjs导入和使用它像这样hellped

import { Document, Page, pdfjs } from 'react-pdf'

pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/legacy/build/pdf.worker.min.js`;

在同一文件中，我需要显示我的pdf

赞(0）回复(0）举报 2023-02-04

我来回答

reactjs 在react-pdf中显示pdf时出错

6条答案

相关问题

热门标签

最新问答