React で PDF 生成情報が表示されない場合はどうすればよいですか?

react で PDF 生成情報が表示されない問題の解決策: 1. バックグラウンドから PDF の URL アドレスを取得し、PDF ファイルをリクエストします。2. リクエスト時に responseType を blob に設定します。 PDF ファイル; 3. PDF を変更します ファイルを Base64 形式に変換します; 4. Canvas を使用して PDF をレンダリングします。

このチュートリアルの動作環境: Windows 10 システム、react18.0.0 バージョン、Dell G3 コンピューター。

React で PDF 生成情報が表示されない場合はどうすればよいですか?

#React プロジェクトにおける PDF の表示と印刷の問題を解決する

最近のプロジェクトでは次のような要件があります:

• ページ内に PDF を表示できます

• ページ全体を印刷せずに、PDF が表示されている部分だけを印刷したい場合は、ブラウザの組み込みの印刷機能

PDF ファイルの表示

この要件を聞いたとき、私は本当に混乱しました。似たようなことをしたことがないので、どこから始めればよいのかわかりません。情報を確認する過程で、PDF を表示できる jQuery プラグインは多数あることがわかりましたが、私たちは React シングルページ アプリケーション プロジェクトなので、これらのプラグインは適切ではないようで、他のプラグインしか見つかりませんでした。方法。

その後、npmjs.comでreact-pdf-jsコンポーネントを見つけて、pdfを表示できるのではないかと思いました。 cnpm install reverse-pdf-js --save-dev コマンドを使用して、react-pdf-js の依存関係をプロジェクトにインストールし、「react-pdf-js」から PDF をインポートしてプロジェクトに導入するのが待ちきれません。 。 f73e22e5f1b35afbd2432f86384ddfdd をレンダリングに挿入します。

デバッグ プロセス中に、静的 PDF ファイルは表示できるが、オンライン PDF ファイルは表示できないことが判明しました。制御エラー メッセージから、react-pdf-js コンポーネントではファイル アドレスが URL または Base64 形式である必要があることがわかりますが、URL は機能しないため、base64 のみに依存します。

PDFファイルを入手

最初はPDFのオンラインアドレスURLを直接base64に変換しましたが、表示できませんでした。後で気づいたのですが、URL を Base64 形式に変換するだけでは意味がなく、PDF ファイルの内容を Base64 形式に変換する必要があります。次に、バックグラウンドから取得した PDF の URL アドレスを通じて PDF ファイルを再度リクエストするのが論理的です。

この部分を実行しているときに小さな問題が発生しました: リクエストは成功しましたが、PDF ファイルを取得できませんでした。私はこれに長い間苦労していましたが、解決方法がわかりませんでした。この問題を当社のアーキテクトに報告したところ、これはクロスドメインの問題が原因であると分析され、彼はクロスドメインの問題を解決するために nginx サーバーを構成しました。

'Content-Type':  'application/x-www-form-urlencoded;charset=utf-8',
'Access-Control-Allow-Origin': 'https://www.nurse-go.cn:9091',
'Access-Control-Allow-Methods': 'GET',
'Access-Control-Allow-Headers': 'X-Custom-Header',
'Access-Control-Allow-Credentials': true,

PDF ファイルを Base64 形式に変換

base64 はあらゆる形式でファイルを保存できる、優れた保存方法です。ファイルをbase64形式に変換します。

PDF ファイルをリクエストするときは、responseType を blob に設定する必要があることに注意してください。blob タイプが使用される理由については、以下で説明します。この時点で、pdf ファイルを取得し、base64 に変換しました。フォーマット。

let reader  = new FileReader()
let fileParts = []
fileParts.push(this.props.pdfFile)
let blob = new Blob(fileParts, {type : 'application/pdf'})
if (blob) {
    reader.readAsDataURL(blob)
}
let base64
let that = this      // 处理this的指向  
reader.addEventListener("load", function () {
    base64 = reader.result
   that.setState({
          base64: base64,
 })
}, false);

base64形式の変換必要に応じて、blob形式がbase64形式のpdfに変換され、ブラウザのfile={file}に表示されます。実際、これは最終的にはキャンバスに表示される PDF です。

PDF の表示が終了しました。次は印刷です。

PDFファイルの印刷

ブラウザ上では、全ページ印刷と指定部分印刷に分かれます。プロジェクトではコンテンツの一部を印刷する必要があります。印刷を実現するにはさまざまな方法があります。私は従来の CSS コントロールを使用しました。 @media print を使用して印刷する必要のない部分を非表示にし、残りを印刷する必要がある部分とします。

PDF ファイル印刷のデバッグ

ここにちょっとしたデバッグのヒントがあります: @media print のスタイルはブラウザの print が呼び出されたときにのみ呼び出されるため、次のようにすることができます。スタイルのこの部分を外側に置きます。印刷する必要のない部分が非表示になったら、これらの外部スタイルを削除して @media に印刷します。

印刷のためにブラウザで使用される window.print() を呼び出します。すべてのブラウザと互換性があるわけではありませんが、一般的な高度なブラウザは互換性があり、プロジェクトのニーズを満たします。ここではこれ以上深く掘り下げません。

pdfの表示・印刷で多くの問題が発生しました 上記の流れは概要です。

推奨される学習: 「

react ビデオ チュートリアル 」

以上がReact で PDF 生成情報が表示されない場合はどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。