水印

福昕 PDF SDK（Web）支持向文档或页面添加水印。

写入 PDF 的常用接口包括：

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

临时在 Viewer 中显示水印、不写入 PDF 时，可使用 PDFDocRender.setWatermarkConfig() 或 PDFPageRender.setWatermarkConfig()。

说明

写入类接口会在修改后需要导出文档才能保存到文件。

配置渲染级水印

不写入 PDF、仅在 Viewer 中显示时，可按下面方式配置。如果需要为当前文档的渲染结果统一显示水印，可以在 PDFDocRender 上设置：

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);

如果只需要为某一页渲染水印，可以在 PDFPageRender 上设置：

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);

渲染级水印也支持图片。图片水印的 type 使用 image，content 使用图片的 Data URL。

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

await pdfViewer.redraw(true);

常用配置如下：

配置项	说明
type	水印类型，支持 text 或 image。
content	水印内容。文本水印为字符串，图片水印为 Data URL。
isMultiline	是否使用平铺水印。
rowSpace / columnSpace	平铺水印的行距和列距。
watermarkSettings.position	水印位置，例如 TopLeft、Center、BottomRight。
watermarkSettings.offsetX / offsetY	水印偏移量。使用平铺水印时不生效。
watermarkSettings.scaleX / scaleY	水印横向和纵向缩放比例。
watermarkSettings.rotation	旋转角度。
watermarkSettings.opacity	透明度，范围为 0 到 100。
watermarkTextProperties.font	文本水印字体，使用 CSS 字体名。
watermarkTextProperties.fontSize	文本水印字号。
watermarkTextProperties.color	文本水印颜色，例如 #000000。
watermarkTextProperties.fontStyle	文本样式，支持 normal 或 underline。
watermarkTextProperties.lineSpace	多行文本的行距。
watermarkTextProperties.alignment	文本对齐方式，支持 left、center、right。

添加文档水印

PDFDoc.addWatermark(data) 用于为指定页面范围添加水印。

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'
    }
});

常用配置如下：

配置项	说明
type	水印类型，支持 text 或 bitmap。
text	文本水印内容。
bitmap	图片水印数据，通常为 Uint8Array。
pageStart / pageEnd	水印应用的页面范围，页面索引从 0 开始。
watermarkSettings.position	水印位置。
watermarkSettings.rotation	旋转角度。
watermarkSettings.opacity	透明度，范围为 0 到 100。

添加图片水印

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
    }
});

页面级水印

如果只需要操作单页，可以使用 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
    }
});

移除文档水印

await pdfDoc.removeAllWatermarks();

保存修改

添加或移除水印后，需要导出文档保存结果。

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

注意事项

• PDFDoc.addWatermark() 和 PDFPage.addWatermark() 会修改 PDF 内容。
• PDFDocRender.setWatermarkConfig() 和 PDFPageRender.setWatermarkConfig() 只影响 Viewer 渲染显示，不会写入 PDF；导出 getFile() 得到的文件不包含这类渲染级水印。
• 渲染级水印配置使用 type 和 content；写入 PDF 的水印接口使用 type、text 或 bitmap，两类配置不要混用。
• 设置渲染级水印后，如需立即更新显示，可调用 pdfViewer.redraw(true)。
• 文本水印和图片水印的配置项不同，使用前应确认 type。