PDF.js는 렌더링된 캔버스 이미지를 표시할 수 없습니다.

Question

PDF를 표시하는 React 구성요소가 있습니다. 이 구성요소를 사용할 때 PDF의 URL만 전달하면 됩니다.

<미리보기 pdfUrl={pdfUrl}></Previewer>

구성요소는 미리보기의 세부정보를 처리합니다. 내가 겪고 있는 문제는 이 구성 요소가 PDF를 표시하지 않는다는 것입니다.뭔가 빠졌나요? 이 문제를 해결하려면 어떻게 해야 합니까?下面是一个演示：

<code>const { StrictMode, useRef } = 반응;
const { createRoot } = ReactDOM;

const 스타일 = {};

const Previewer = (props) => {

    const canvasRef = useRef(null);

    React.useEffect(() => {
        if (props.pdfUrl) {
            initPdf(props.pdfUrl);
        }
    }, []);
    
    // Stack Snippet의 Babel 버전은 async/await를 지원하지 않기 때문에 promise를 사용하도록 async/await 함수를 변환했습니다.
    const initPdf = (pdfUrl) => {
        // ES6 가져오기를 사용하는 대신 CDN 버전의 PDF.js를 참조합니다.
        const pdfJS = pdfjsLib;
        pdfJS.GlobalWorkerOptions.workerSrc = "https://unpkg.com/pdfjs-dist@3.9.179/build/pdf.worker.js";
        pdfJS.getDocument({
            URL: pdfUrl,
            cMapUrl: 'https://cdn.jsdelivr.net/npm/pdfjs-dist@3.9.179/cmaps/',
            cMapPacked: 사실,
        }).promise.then((pdf) => {
            const totalPages = pdf.numPages;
            for (let i = 0; i < totalPages; i++) {
                renderPdfPage(pdf, pdfJS, i + 1);
            }
        });
    }
    
    // Stack Snippet의 Babel 버전은 async/await를 지원하지 않기 때문에 promise를 사용하도록 async/await 함수를 변환했습니다.
    const renderPdfPage = (pdf, pdfJS, pageNum) => {
        return pdf.getPage(pageNum).then((페이지) => {
            const 뷰포트 = page.getViewport({
                규모: 1.0
            });
            let divPage = window.document.createElement("div");
            if(!canvasRef || !canvasRef.current) return;
            let canvas = divPage.appendChild(window.document.createElement("canvas"));
            const canvasContext = canvas.getContext('2d');
            캔버스.높이 = 뷰포트.높이;
            캔버스.폭 = 뷰포트.폭;
            const renderContext = { canvasContext, 뷰포트 };
            const renderTask = page.render(renderContext);
            renderTask.promise.then(함수 () {
                const textContent = page.getTextContent();
                textContent를 반환합니다.
            }).then(함수 (textContent) {
                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({
                    textContentSource: 텍스트콘텐츠,
                    컨테이너: textLayer,
                    뷰포트: 뷰포트,
                    텍스트 사업부: []
                });
            });
            canvasRef.current.appendChild(divPage);
        });
    }

    반품 (
        <div className={styles.cavasLayer}>
            <canvas id="the-cavas" ref={canvasRef} />
            {/**<div className={styles.textLayer}></div>**/}
        </div>
    );
}

const pdfUrl = "https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf"
const root = createRoot(document.getElementById("루트"));
root.render(<StrictMode><미리보기 pdfUrl={pdfUrl} /></StrictMode>);</code>

<code><script crossorigin src="https://unpkg.com/react@18/umd/react.development.js "></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script crossorigin src="https://unpkg.com/pdfjs-dist@3.9.179/build/pdf.js"></script>
<div id="root"></div></code>

Answer 1

질문

renderPdfPage函数中，您创建了一个包含渲染PDF页面的canvas元素的div元素。然后将这些div元素附加到一个canvas元素上。然而，如果浏览器支持canvas元素，则不会渲染canvas 요소의 자손인 요소입니다. 캔버스 요소의 사양에 따르면:

콘텐츠 되감기는 다음과 같이 정의됩니다.

솔루션

부모님이 필요합니다 canvas更改为适当的元素。在下面的演示中，我使用了一个div:

으아악 으아악