<p>我有一個顯示PDF的React元件。當我使用這個組件時,我只需要傳遞PDF的URL。 </p>
<pre class="brush:php;toolbar:false;"><Previewer pdfUrl={pdfUrl}></Previewer></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 Previewer = (props) =>; {
const canvasRef = useRef(null);
React.useEffect(() => {
if (props.pdfUrl) {
initPdf(props.pdfUrl);
}
}, []);
// 將 async/await 函數轉換為使用 Promise,因為 Stack Snippet 的 Babel 版本不支援 async/await
const initPdf = (pdfUrl) =>; {
// 引用PDF.js的CDN版本而不是使用ES6導入
const pdfJS = pdfjsLib;
pdfJS.GlobalWorkerOptions.workerSrc = "https://unpkg.com/pdfjs-dist@3.9.179/build/pdf.worker.js";
返回 pdfJS.getDocument({
網址: pdfUrl,
cMapUrl: 'https://cdn.jsdelivr.net/npm/pdfjs-dist@3.9.179/cmaps/',
cMapPacked:真,
}).promise.then((pdf) => {
const 總頁數 = pdf.numPages;
for (令 i = 0; i < 總頁數; i ) {
renderPdfPage(pdf, pdfJS, i 1);
}
});
}
// 將 async/await 函數轉換為使用 Promise,因為 Stack Snippet 的 Babel 版本不支援 async/await
const renderPdfPage = (pdf, pdfJS, pageNum) =>; {
傳回 pdf.getPage(pageNum).then((page) => {
const viewport = page.getViewport({
規模:1.0
});
讓 divPage = window.document.createElement("div");
if(!canvasRef || !canvasRef.current) 回傳;
let canvas = divPage.appendChild(window.document.createElement("canvas"));
const canvasContext = canvas.getContext('2d');
畫布.高度 = 視口.高度;
畫布.寬度=視口.寬度;
const renderContext = { canvasContext, 視口 };
const renderTask = page.render(renderContext);
renderTask.promise.then(function () {
const textContent = page.getTextContent();
返回文字內容;
}).then(函數(文字內容){
const textLayer = document.querySelector(`.${styles.textLayer}`);
if (!textLayer) 返回;
textLayer.style.left = canvas.offsetLeft 'px';
textLayer.style.top = canvas.offsetTop 'px';
textLayer.style.height = canvas.offsetHeight 'px';
textLayer.style.width = canvas.offsetWidth 'px';
textLayer.style.setProperty('--scale-factor', '1.0');
pdfJS.renderTextLayer({
文字內容來源:文字內容,
容器:文字圖層,
視口: 視口,
文字分區:[]
});
});
canvasRef.current.appendChild(divPage);
});
}
返回 (
<div className={styles.cavasLayer}>
>
{/**
**/}
);
}
const pdfUrl =“https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf”
const root = createRoot(document.getElementById("root"));
root.render(
);;
<pre class="snippet-code-html lang-html Prettyprint-override"><code><腳本跨域src="https://unpkg.com/react@18/umd/react.development. js “></腳本>
<腳本跨域 src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<腳本跨域 src="https://unpkg.com/pdfjs-dist@3.9.179/build/pdf.js"></script>
<div id="root"></div></code></pre>
<p><br />></p>
問題
在
renderPdfPage
函數中,您建立了一個包含渲染PDF頁面的canvas
元素的div
元素。然後將這些div
元素附加到一個canvas
元素上。然而,如果瀏覽器支援canvas
元素,則不會渲染canvas
元素的後代元素。根據canvas元素的規範:回退內容的定義如下:
解決方案
您需要將父級
canvas
變更為適當的元素。在下面的演示中,我使用了一個div
: