<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
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
＃＃＃質問＃＃＃
#renderPdfPage
関数では、PDF ページをレンダリングするcanvas
は次のように定義されます:要素を含むdiv要素を作成します。次に、これらのdiv要素をcanvas要素に追加します。ただし、ブラウザがcanvas要素をサポートしている場合、canvas要素の子孫要素は表示されません。canvas要素:の仕様によると ロールバックコンテンツ＃＃＃解決＃＃＃ 親の canvas
を適切な要素に変更する必要があります。以下のデモでは、div
:を使用しています。
リーリー リーリー