PDF.js ne peut pas afficher l'image de canevas rendue

Question

J'ai un composant React qui affiche un PDF. Lorsque j'utilise ce composant, il me suffit de transmettre l'URL du PDF. Le composant gère les détails de l'aperçu. Le problème que j'ai est que ce composant n'affiche pas le PDF. Est-ce que j'ai raté quelque chose ? Que dois-je faire pour résoudre ce problème ? Voici une démo : const{StrictMode,useRef}=React;const{createRoot}=ReactDOM;conststyles={};constPreviewer=(props)=&gt

P粉298305266 · Answer

Question

Éléments descendants de l'élément renderPdfPage函数中，您创建了一个包含渲染PDF页面的canvas元素的div元素。然后将这些div元素附加到一个canvas元素上。然而，如果浏览器支持canvas元素，则不会渲染canvas. Selon la spécification de l'élément canvas :

Le contenu Rewind est défini comme suit :

Solution

Vous devez être parent canvas更改为适当的元素。在下面的演示中，我使用了一个div :

const { StrictMode, useRef } = React;
const { createRoot } = ReactDOM;

const styles = {};

const Previewer = (props) => {

    const pdfContainerRef = useRef(null);

    React.useEffect(() => {
        if (props.pdfUrl) {
            initPdf(props.pdfUrl);
        }
    }, []);
    
    // Converted async/await function to use promise because Stack Snippet's Babel version does not support async/await
    const initPdf = (pdfUrl) => {
        // Reference CDN version of PDF.js instead of using ES6 import
        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 < totalPages; i++) {
                renderPdfPage(pdf, pdfJS, i + 1);
            }
        });
    }
    
    // Converted async/await function to use promise because Stack Snippet's Babel version does not support async/await
    const renderPdfPage = (pdf, pdfJS, pageNum) => {
        return pdf.getPage(pageNum).then((page) => {
            const viewport = page.getViewport({
                scale: 1.0
            });
            let divPage = window.document.createElement("div");
            if(!pdfContainerRef || !pdfContainerRef.current) return;
            let canvas = divPage.appendChild(window.document.createElement("canvas"));
            const canvasContext = canvas.getContext('2d');
            canvas.height = viewport.height;
            canvas.width = viewport.width;
            const renderContext = { canvasContext, viewport };
            const renderTask = page.render(renderContext);
            renderTask.promise.then(function () {
                const textContent = page.getTextContent();
                return textContent;
            }).then(function (textContent) {
                const textLayer = document.querySelector(`.${styles.textLayer}`);
                if (!textLayer) return;
                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: textContent,
                    container: textLayer,
                    viewport: viewport,
                    textDivs: []
                });
            });
            pdfContainerRef.current.appendChild(divPage);
        });
    }

    return (
        
            
            {/****/}
        
    );
}

const pdfUrl = "https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf"
const root = createRoot(document.getElementById("root"));
root.render();