Add a watermark

By default, each page is constructed by canvas, text, and annotation layers. In this example, we will add a simple watermark at the center of page.

This page demonstrates a simple way to create a watermark with CSS

const renderPage: RenderPage = (props: RenderPageProps) => (
    <>
        {props.canvasLayer.children}
        <div
            style={{
                alignItems: 'center',
                display: 'flex',
                height: '100%',
                justifyContent: 'center',
                left: 0,
                position: 'absolute',
                top: 0,
                width: '100%',
            }}
        >
            <div
                style={{
                    color: 'rgba(0, 0, 0, 0.2)',
                    fontSize: `${8 * props.scale}rem`,
                    fontWeight: 'bold',
                    textTransform: 'uppercase',
                    transform: 'rotate(-45deg)',
                    userSelect: 'none',
                }}
            >
                Draft
            </div>
        </div>
        {props.annotationLayer.children}
        {props.textLayer.children}
    </>
);

<Viewer fileUrl="/assets/pdf-open-parameters.pdf" renderPage={renderPage} />;

Notice that the watermark should be scaled when user zoom the document, so we have to set its font size based on the current zoom level:

const renderPage: RenderPage = (props: RenderPageProps) => (
    ...
    <div
        style={{
            fontSize: `${8 * props.scale}rem`,
            ...
        }}
    >
        Draft
    </div>
    ...
);

(The sample code)

Add a watermark

See also