Display PDF as a react component including editable form fields

[b521f771d8991e6f1d8e65ae05a8d783]

Hi!

I am trying to embed pdf.js into a React application, since I could not find a working react-module (suggestions are welcome, too), I am trying to embed pdf.js myself.

Ideally, I want a similar experience as when using the pdf viewer included in the browser, which renders my PDF form correctly.

I came up with the folling code:

import { Button, Center, Flex, Input, Paper, Text } from "@mantine/core";
import * as pdfjslib from "pdfjs-dist";
import { useEffect, useRef, useState } from "react";
import { IconAt } from '@tabler/icons-react';
import $ from "jquery";

pdfjslib.GlobalWorkerOptions.workerSrc = new URL(
    'pdfjs-dist/build/pdf.worker.min.mjs',
    import.meta.url,
).toString();

async function renderCanvasLayer(pdfPage: pdfjslib.PDFPageProxy
    , canvas: HTMLCanvasElement
    , viewport: pdfjslib.PageViewport) {
    const ctx = canvas.getContext("2d")!;

    const renderTask = pdfPage.render({
        canvasContext: ctx,
        viewport,
    });

    return await renderTask.promise;
}


async function renderTextLayer(pdfPage: pdfjslib.PDFPageProxy
    , div: HTMLDivElement
    , canvas: HTMLCanvasElement
    , viewport: pdfjslib.PageViewport) {
    $(div.id)
        .css({
            left: canvas.offsetLeft + 'px',
            top: canvas.offsetTop + 'px',
            height: canvas.height + 'px',
            width: canvas.width + 'px'
        })
        .html("");

    const textLayer = new pdfjslib.TextLayer({
        textContentSource: await pdfPage.getTextContent(),
        container: div,
        viewport: viewport
    });

    return await textLayer.render();
}

async function renderXfaLayer(pdfPage: pdfjslib.PDFPageProxy) {
    //pdfjslib.XfaLayer.render({
    //    viewport: new PageViewport,
    //    div: undefined,
    //    xfaHtml: undefined,
    //    linkService: new IPDFLinkService
    //});
}

async function loadPDFPage(pdfDocument: pdfjslib.PDFDocumentProxy
    , canvas: HTMLCanvasElement
    , div: HTMLDivElement
    , pageNum: number) {
    const pdfPage: pdfjslib.PDFPageProxy = await pdfDocument.getPage(pageNum);

    const viewport = pdfPage.getViewport({
        scale: 1.5
    });

    canvas.width = viewport.width;
    canvas.height = viewport.height;

    await renderCanvasLayer(pdfPage, canvas, viewport);
    await renderTextLayer(pdfPage, div, canvas, viewport);
    await renderXfaLayer(pdfPage);
};

function Page({ numPage, pdfDocument }: { numPage: number, pdfDocument: pdfjslib.PDFDocumentProxy }) {
    console.assert(numPage != null);
    const pageCanvas = useRef<HTMLCanvasElement>(null);
    const pageDiv = useRef<HTMLDivElement>(null);

    useEffect(() => {
        if (pageCanvas.current && pageDiv.current) {
            loadPDFPage(pdfDocument, pageCanvas.current, pageDiv.current, numPage);
        }
    }, [pageCanvas]);

    return <>
        <Paper
            shadow="xl"
            p="xl">
            <Center>
                <Flex
                    mt={10}
                    mih={10}
                    gap="sm"
                    justify="center"
                    align="center"
                    direction="column"
                    wrap="wrap">

                    <canvas ref={pageCanvas}></canvas>

                    <div ref={pageDiv} className="select-text"></div>
                    <Text>Seite {numPage}</Text>
                </Flex>
            </Center>
        </Paper >
    </>
}

Or can anyone point me to some recent documentation? Especially concering PDF forms

Thanks in advance

[CherechesC]

Not sure if you are still blocked, but have you checked out this library?

https://github.com/wojtekmaj/react-pdf