PDF.js ではレンダリングされたキャンバス イメージを表示できません

Question

<p>PDF を表示する React コンポーネントがあります。このコンポーネントを使用するときは、PDF の URL を渡すだけです。 </p> <pre class="brush:php;toolbar:false;"><プレビューア pdfUrl={pdfUrl}></プレビューア></pre> <p>コンポーネントはプレビューの詳細を処理します。私が抱えている問題は、このコンポーネントが PDF を表示しないことです。何かが足りないのでしょうか？この問題を解決するにはどうすればよいでしょうか?以下は演目です：</p> <p><br /></p> <pre class="snippet-code-js lang-js prettyprint-override"><code>const { StrictMode, useRef } = React; const { createRoot } = ReactDOM; const スタイル = {}; const プレビューア = (props) => { const CanvasRef = useRef(null); React.useEffect(() => { if (props.pdfUrl) { initPdf(props.pdfUrl); } }、[]); // スタック スニペットの Babel バージョンは async/await をサポートしていないため、async/await 関数を Promise を使用するように変換しました const initPdf = (pdfUrl) => { // ES6 インポートを使用する代わりに PDF.js の CDN バージョンを参照します const pdfJS = pdfjsLib; pdfJS.GlobalWorkerOptions.workerSrc = "https://unpkg.com/pdfjs-dist@3.9.179/build/pdf.worker.js"; return pdfJS.getDocument({ URL: pdfUrl、 cMapUrl: 'https://cdn.jsdelivr.net/npm/pdfjs-dist@3.9.179/cmaps/', cMapPacked: true、 }).promise.then((pdf) => { const totalPages = pdf.numPages; for (let i = 0; i

P粉766520991451日前574

Answer 1

＃＃＃質問＃＃＃

#renderPdfPage

関数では、PDF ページをレンダリングする

canvas 要素を含む div 要素を作成します。次に、これらの div 要素を canvas 要素に追加します。ただし、ブラウザが canvas 要素をサポートしている場合、canvas 要素の子孫要素は表示されません。 canvas要素:の仕様によると ロールバックコンテンツ

は次のように定義されます:

＃＃＃解決＃＃＃ 親の canvas

を適切な要素に変更する必要があります。以下のデモでは、

div

:

を使用しています。 リーリー リーリー