React-pdf: PDFファイルの読み込みに失敗しました

作成日 2018年12月12日 · 24コメント · ソース: wojtekmaj/react-pdf

ファイルとしてインポートしてパスを指定することから、 PDFファイルをロードできませんでした。 また、webpackまたはparcelを使用している場合は、PDFの読み込みが表示されます。

コード

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { Document, Page } from 'react-pdf'
import lesson2 from './lesson2.pdf'
class App extends Component {
  state = { numPages: null, pageNumber: 1 };

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

  goToPrevPage = () =>
    this.setState(state => ({ pageNumber: state.pageNumber - 1 }));
  goToNextPage = () =>
    this.setState(state => ({ pageNumber: state.pageNumber + 1 }));

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

    return (
      <div>
        <nav>
          <button onClick={this.goToPrevPage}>Prev</button>
          <button onClick={this.goToNextPage}>Next</button>
        </nav>

        <div style={{ width: 600 }}>
          <Document
            file={lesson2}
            onLoadSuccess={this.onDocumentLoadSuccess}
          >
            <Page pageNumber={pageNumber} width={600} />
          </Document>
        </div>

        <p>
          Page {pageNumber} of {numPages}
        </p>
      </div>
    );
  }
}

export default App;

フォルダ構造

capture1

question

ソース

saadpasta

👍1

最も参考になるコメント

@saadpasta @MichaelBlanchet create-react-appをボイラープレートとして使用していると思いますか？

これらをコードに追加/変更します

import { Document, Page, pdfjs } from "react-pdf";
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;

このプロジェクトのメインページで指示されているように。また、プロジェクトのpdfファイルが見つかることを確認してください（パブリックディレクトリ）

pxFIN 2019年01月03日

👍119 ❤56 🎉36 🚀30 👀14 😄7

全てのコメント24件

コンソールにエラーがないか確認してください
onLoadError={console.error}を指定してonLoadErrorにプラグインすると、追加のメッセージが表示されます
devtoolsの[ネットワーク]タブをチェックして、PDF.jsが正しいURLからワーカーファイルをダウンロードすることを確認します

wojtekmaj 2018年12月13日

👍1

私は非常によく似た（単純な）App.jsを持っています-あなたの説明によると-そしてPDFドキュメントをロードすることができません。次のエラーが発生します。

Uncaught SyntaxError: Unexpected token <
index.js:1452

Error: Setting up fake worker failed: "Cannot read property 'WorkerMessageHandler' of undefined".
    at pdf.js:10999
function.console.(anonymous function) @ index.js:1452
consoleOnDev @ utils.js:188
errorOnDev @ utils.js:207
(anonymous) @ Document.js:291
_callee$ @ Document.js:229
tryCatch @ runtime.js:62
invoke @ runtime.js:288
prototype.(anonymous function) @ runtime.js:114
asyncGeneratorStep @ asyncToGenerator.js:3
_throw @ asyncToGenerator.js:29
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js:13
_next @ asyncToGenerator.js:25
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js:13
_next @ asyncToGenerator.js:25
(anonymous) @ asyncToGenerator.js:32
(anonymous) @ asyncToGenerator.js:21
componentDidMount @ Document.js:435
commitLifeCycles @ react-dom.development.js:16722
commitAllLifeCycles @ react-dom.development.js:18160
callCallback @ react-dom.development.js:147
invokeGuardedCallbackDev @ react-dom.development.js:196
invokeGuardedCallback @ react-dom.development.js:250
commitRoot @ react-dom.development.js:18365
completeRoot @ react-dom.development.js:19894
performWorkOnRoot @ react-dom.development.js:19817
performWork @ react-dom.development.js:19722
performSyncWork @ react-dom.development.js:19696
requestWork @ react-dom.development.js:19551
scheduleWork @ react-dom.development.js:19358
scheduleRootUpdate @ react-dom.development.js:20062
updateContainerAtExpirationTime @ react-dom.development.js:20088
updateContainer @ react-dom.development.js:20156
push../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render @ react-dom.development.js:20435
(anonymous) @ react-dom.development.js:20589
unbatchedUpdates @ react-dom.development.js:19939
legacyRenderSubtreeIntoContainer @ react-dom.development.js:20585
render @ react-dom.development.js:20652
./src/index.js @ index.js:7
__webpack_require__ @ bootstrap:782
fn @ bootstrap:150
0 @ serviceWorker.js:135
__webpack_require__ @ bootstrap:782
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
4

webpackHotDevClient.js:120 ./node_modules/pdfjs-dist/build/pdf.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

MichaelBlanchet 2018年12月18日

👍19 😕2

@saadpasta @MichaelBlanchet create-react-appをボイラープレートとして使用していると思いますか？

これらをコードに追加/変更します

import { Document, Page, pdfjs } from "react-pdf";
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;

pxFIN 2019年01月03日

👍119 ❤56 🎉36 🚀30 👀14 😄7

@MichaelBlanchet

キャッチされないSyntaxError：予期しないトークン<

＃52を参照

wojtekmaj 2019年01月04日

👍1

私は同様の問題を抱えていました、私の場合、ロードされるのは間違ったファイルでした

const path = './data/sample.pdf'

私のローカルホスト開発では、パスはルートではなく現在のルートを基準にして計算されましたが、ローカルWebサーバーは404で応答する代わりに、解析できなかったindex.htmlコンテンツを返していました:)

[ネットワーク]タブでは、混乱を招くsample.pdfと表示されていましたが、応答コンテンツを見ると、実際にはPDFではなくWebページであることがわかりました。

パスをconst path = '/data/sample.pdf'すると、すべてが機能し始めました。

LukaszGrela 2019年02月13日

👍1

エラー：偽のワーカーの設定に失敗しました：「未定義のプロパティ 'WorkerMessageHandler'を読み取れません」。

codesandboxへのリンク。
https://codesandbox.io/s/kkq9zv96jo

jtibrewal09 2019年04月26日

@ jtibrewal09 ＃52はあなたを助けるかもしれません、労働者の問題のように聞こえます。

wojtekmaj 2019年05月02日

他の問題をより明確にするために、この問題を閉じます。それでも問題が解決しない場合は、遠慮なく返信してください。再開します。

ハッピーコーディング！

wojtekmaj 2019年05月03日

こんにちは
PDFの読み込みに問題があります。 PDFの読み込みを表示しているだけです。
Screenshot (40)

gundojuprashanth 2019年08月29日

@saadpasta @MichaelBlanchet create-react-appをボイラープレートとして使用していると思いますか？
これらをコードに追加/変更します
import { Document, Page, pdfjs } from "react-pdf";
 pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
このプロジェクトのメインページで指示されているように。また、プロジェクトのpdfファイルが見つかることを確認してください（パブリックディレクトリ）

使用していることがわかります
componentDidMount（）{
pdfjs.GlobalWorkerOptions.workerSrc = //cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js ;
}

問題を解決しました：「PDFファイルのロードに失敗しました。」

turetran 2019年10月20日

base64文字列を使用していますが、「偽のワーカーの設定に失敗しました：「チャンク0の読み込みに失敗しました」」と表示されます。

jhaanji035 2019年10月21日

このコマンドが誰かを助けることを願っています。 create-react-appでは、このライブラリの手順は次のようになっています。

pdfjs-dist / buildのpdf.worker.jsファイルがプロジェクトの出力フォルダーにコピーされていることを自分で確認する必要があります。

ビルドプロセスでcliコマンド（つまりaws buildspec）を使用する場合は、次のように使用できます。

mkdir -p build && cp ./node_modules/pdfjs-dist/build/pdf.worker.js build

johndevedu 2019年12月06日

👍3

URLの前にhttpsを使用すると、問題が解決するようです。

pdfjs.GlobalWorkerOptions.workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;

koellemichael 2019年12月22日

👍4

import React, { PureComponent } from 'react'
import { Document, Page, pdfjs } from 'react-pdf';
...
pdfjs.GlobalWorkerOptions.workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;

export default class PDFView extends PureComponent {
  ...
}

私にとってはうまくいきます。

maxlxq 2020年03月13日

👍4

同じ問題。ビューアで正常に開く2つの小さなPDF。 1つは読み込みをハングし、もう1つは（onLoadError = {console.error}を追加した後、「PDFの読み込み」でのハングから「PDFファイルの読み込みに失敗しました」の表示に切り替わりました。

Warning: Setting up fake worker.
vendors~pdfjsWorker.js:3 Uncaught SyntaxError: Unexpected token '<'
2react_devtools_backend.js:6 Error: Setting up fake worker failed: "Loading chunk 0 failed.
(missing: http://localhost:8000/vendors~pdfjsWorker.js)".
    at main.js?ts=1592286747:81

コンソールウィンドウで。ワーカーは必要ありません。ファイルはそれぞれ数MBです。

pwhipp 2020年06月16日

@pwhippワーカーが必要です-PDF.jsはワーカーなしでは正しく機能しなくなり、React-PDFも機能しなくなります。外部ワーカーを使用したくない場合は、 PDF.jsワーカーを手動でビルドフォルダーにコピーし、それを指すようにpdfjs.GlobalWorkerOptions.workerSrcを設定することもできます。

wojtekmaj 2020年06月16日

ありがとう。何時間も経った後（webpackパスを使用すると、ワーカーの読み込みが適切に機能するようになり、いくつかの小さなpdfを表示するだけで済みます）、私はあきらめて、より単純ですがより制限されたhttps://github.com/ansu5555/pdf-を使用しました

労働者を使い始めることを余儀なくされる他の必要性があれば、私はこれに戻ります。

pwhipp 2020年06月22日

_注：このコメントは以前、pdf-viewer-reactjsが実行していることを完全に実行できると述べていましたが、これは技術的には真実でしたが、これがすべきでない理由です：_

pdf-viewer-reactjsでは、次のようにワーカーをインポートします。

import pdfjs from 'pdfjs-dist'
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry'

pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker;

残念ながら、このモジュールは何もエクスポートしないため、workerSrcをまったく設定していないかのように機能します。これは無効であり、エラーが発生し、「偽の」ワーカーがロードされます。これは、「偽の」ワーカーの読み込みが原因でパフォーマンスの問題が発生するためにサポートされなくなった動作であり、pdf.jsチームによって強く推奨されていません。

wojtekmaj 2020年06月26日

🎉2

はい、ありがとう。彼らは箱から出してそれをしました。

pwhipp 2020年06月29日

解決策をありがとうございました！ここで同じ問題と同じ解決策！

WildSaoFeng 2020年07月30日

申し訳ありませんが、何かに気づき、上記のコメントを編集する必要がありました。 ansu5555 / pdf-viewer-reactjsが行っていることは実際には間違っており、アプリケーションのパフォーマンスに悪影響を及ぼします。

wojtekmaj 2020年08月12日

私の場合のように、CRAを使用し、CDNを使用したくないこれらの場合、次の手順を実行できます。

package.json内にスクリプトを作成します。
"copy-pdfjs-worker"： "cp ./node_modules/pdfjs-dist/build/pdf.worker.js public / scripts"
ここでは、ノードモジュールからpublic / scriptsフォルダーにコピーします。ビルド中に、このフォルダーはビルドフォルダーにコピーされます。このスクリプトは手動でトリガーされます。
そして、次のように登録します。
pdfjs.GlobalWorkerOptions.workerSrc = ${process.env.PUBLIC_URL}/scripts/pdf.worker.js ;

このソリューションは、npmbuildコマンドとnpmstartコマンド（CRAの既存のスクリプト）の両方で機能します。

nevres 2020年08月13日

❤1

_注：このコメントは以前、pdf-viewer-reactjsが実行していることを完全に実行できると述べていましたが、これは技術的には真実でしたが、これがすべきでない理由です：_
pdf-viewer-reactjsでは、次のようにワーカーをインポートします。
import pdfjs from 'pdfjs-dist'
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry'

pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker;
残念ながら、このモジュールは何もエクスポートしないため、workerSrcをまったく設定していないかのように機能します。これは無効であり、エラーが発生し、「偽の」ワーカーがロードされます。これは、「偽の」ワーカーの読み込みが原因でパフォーマンスの問題が発生するためにサポートされなくなった動作であり、pdf.jsチームによって強く推奨されていません。

cdnと@nevresのソリューションを介してインポートする以外に、単にワーカーをインポートする他の方法はありますか？

ajbee07 2020年09月24日

import React, { PureComponent } from 'react'
import { Document, Page, pdfjs } from 'react-pdf';
...
pdfjs.GlobalWorkerOptions.workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;

export default class PDFView extends PureComponent {
  ...
}

私にとってはうまくいきます。

バディに感謝します、私は夢中になりました、これは私のために働きました!!

myfairshare 2020年11月05日

このページは役に立ちましたか？

0 / 5 - 0 評価

React-pdf: PDFファイルの読み込みに失敗しました

コード

フォルダ構造

最も参考になるコメント

全てのコメント24件

関連する問題