福昕开发者文档中心

水印和页眉页脚 ​

福昕 PDF SDK（Web）支持向文档或页面添加水印，也支持添加、更新和移除页眉页脚。水印常用于版权、状态、审阅标记等场景；页眉页脚常用于页码、文档编号、日期或固定说明。

添加文档水印 ​

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

javascript
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。

添加图片水印 ​

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

移除文档水印 ​

javascript
await pdfDoc.removeAllWatermarks();

页面级水印 ​

如果只需要操作单页，也可以使用 PDFPage.addWatermark(data)。

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

添加页眉页脚 ​

PDFDoc.addHeaderFooter(headerFooter) 用于添加页眉页脚，updateHeaderFooter(headerFooter) 用于更新，removeHeaderFooter() 用于移除。

javascript
await pdfDoc.addHeaderFooter({
    pageRange: [[0, pdfDoc.getPageCount() - 1]],
    header: {
        center: {
            text: 'Foxit PDF SDK Web'
        }
    },
    footer: {
        right: {
            text: 'Page <PageNumber>'
        }
    }
});

读取和更新页眉页脚：

javascript
const headerFooter = await pdfDoc.getHeaderFooter();

await pdfDoc.updateHeaderFooter({
    ...headerFooter,
    footer: {
        center: {
            text: 'Confidential'
        }
    }
});

移除页眉页脚：

javascript
await pdfDoc.removeHeaderFooter();

保存修改 ​

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

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

注意事项 ​

  • PDFDoc.addWatermark() 会写入文档内容；PDFPageRender.setWatermarkConfig() 只影响查看器渲染显示。
  • 文本水印和图片水印的配置项不同，使用前应确认 type。
  • 如果只需要临时显示水印，优先使用渲染级水印；如果需要保存到 PDF 文件，使用文档或页面水印接口。
  • 页眉页脚会修改文档内容，执行前建议确认用户是否需要保存该变更。