PDF.js ではレンダリングされたキャンバス イメージを表示できません
<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
全員に返信(1)返信します
P粉2983052662023-08-18 15:50:09
＃＃＃質問＃＃＃
#renderPdfPage
関数では、PDF ページをレンダリングする
canvas 要素を含む div 要素を作成します。次に、これらの div 要素を canvas 要素に追加します。ただし、ブラウザが canvas 要素をサポートしている場合、canvas 要素の子孫要素は表示されません。 canvas要素:の仕様によると
ロールバックコンテンツ
は次のように定義されます:
＃＃＃解決＃＃＃
親の canvas
を適切な要素に変更する必要があります。以下のデモでは、
div
:
を使用しています。
リーリー
リーリー
返事
0
