Watermarks

Foxit PDF SDK for Web supports adding watermarks to documents or pages.

Common APIs that write into the PDF:

• PDFDoc.addWatermark()
• PDFDoc.removeAllWatermarks()
• PDFPage.addWatermark()

To show a watermark in the Viewer temporarily without writing to the PDF, use PDFDocRender.setWatermarkConfig() or PDFPageRender.setWatermarkConfig().

NOTE

Write APIs change the document; export the file to persist changes.

Viewer-only (render) watermarks

For display-only watermarks, configure at render level. To apply one watermark across the current document render:

const docRender = pdfViewer.getPDFDocRender();

docRender.setWatermarkConfig({
    type: 'text',
    content: 'Confidential',
    watermarkSettings: {
        position: 'Center',
        rotation: 45,
        opacity: 40
    },
    watermarkTextProperties: {
        font: 'Microsoft Yahei',
        fontSize: 36,
        color: '#999999',
        fontStyle: 'normal'
    }
});

await pdfViewer.redraw(true);

For a single page:

const pageRender = pdfViewer.getPDFPageRender(0);

pageRender.setWatermarkConfig({
    type: 'text',
    content: 'Draft',
    watermarkSettings: {
        position: 'TopRight',
        rotation: 0,
        opacity: 50
    },
    watermarkTextProperties: {
        fontSize: 18,
        color: '#ff0000'
    }
});

await pdfViewer.redraw(true);

Render-level watermarks also support images. Use type: 'image' and pass a Data URL in content.

pageRender.setWatermarkConfig({
    type: 'image',
    content: imageDataURL,
    watermarkSettings: {
        position: 'Center',
        scaleX: 0.5,
        scaleY: 0.5,
        opacity: 60
    }
});

await pdfViewer.redraw(true);

Common options:

Option	Description
type	text or image.
content	Watermark content: string for text, Data URL for image.
isMultiline	Tiled watermark.
rowSpace / columnSpace	Row and column spacing for tiled watermarks.
watermarkSettings.position	Position, e.g. TopLeft, Center, BottomRight.
watermarkSettings.offsetX / offsetY	Offset; ignored for tiled watermarks.
watermarkSettings.scaleX / scaleY	Horizontal and vertical scale.
watermarkSettings.rotation	Rotation in degrees.
watermarkSettings.opacity	Opacity 0–100.
watermarkTextProperties.font	Font name (CSS font family).
watermarkTextProperties.fontSize	Font size.
watermarkTextProperties.color	Color, e.g. #000000.
watermarkTextProperties.fontStyle	normal or underline.
watermarkTextProperties.lineSpace	Line spacing for multi-line text.
watermarkTextProperties.alignment	left, center, or right.

Document watermarks

PDFDoc.addWatermark(data) adds a watermark to a page range.

await pdfDoc.addWatermark({
    type: 'text',
    text: 'Confidential',
    pageStart: 0,
    pageEnd: 2,
    watermarkSettings: {
        position: 'Center',
        offsetX: 0,
        offsetY: 0,
        scale: 1,
        rotation: 45,
        opacity: 30
    },
    watermarkTextProperties: {
        fontSize: 36,
        color: 0x999999,
        fontStyle: 'normal'
    }
});

Common options:

Option	Description
type	text or bitmap.
text	Text watermark content.
bitmap	Image data, usually Uint8Array.
pageStart / pageEnd	Page range; index starts at 0.
watermarkSettings.position	Position.
watermarkSettings.rotation	Rotation in degrees.
watermarkSettings.opacity	Opacity 0–100.

Image watermarks

const imageBuffer = await fetch('/assets/watermark.png')
    .then(response => response.arrayBuffer())
    .then(buffer => new Uint8Array(buffer));

await pdfDoc.addWatermark({
    type: 'bitmap',
    bitmap: imageBuffer,
    pageStart: 0,
    pageEnd: pdfDoc.getPageCount() - 1,
    absScale: 60,
    useRelativeScale: false,
    watermarkSettings: {
        position: 'Center',
        rotation: 0,
        opacity: 40
    }
});

Page-level watermarks

For a single page, use PDFPage.addWatermark(data).

const page = await pdfDoc.getPageByIndex(0);

await page.addWatermark({
    type: 'text',
    text: 'Draft',
    watermarkSettings: {
        position: 'TopRight',
        rotation: 0,
        opacity: 50
    },
    watermarkTextProperties: {
        fontSize: 18,
        color: 0xff0000
    }
});

Remove document watermarks

await pdfDoc.removeAllWatermarks();

Save changes

After adding or removing watermarks, export the document.

const file = await pdfDoc.getFile({
    fileName: 'watermarked.pdf'
});

Notes

• PDFDoc.addWatermark() and PDFPage.addWatermark() modify PDF content.
• PDFDocRender.setWatermarkConfig() and PDFPageRender.setWatermarkConfig() affect Viewer display only; exported files from getFile() do not include render-only watermarks.
• Render config uses type and content; PDF write APIs use type with text or bitmap—do not mix the two shapes.
• After render-level changes, call pdfViewer.redraw(true) to refresh the view.
• Text and image watermarks use different fields; confirm type before configuring.