福昕开发者文档中心

PDF 图章 (Stamp) ​

福昕 PDF SDK Web 版提供了丰富的 stamp 功能。本节将引导您了解如何管理 stamp，以及如何向 PDF 文档中添加 stamp。

默认 stamp 列表 ​

TIP

SDK 在 Viewer 中提供了默认的 stamp 列表，包含 Static、SignHere 和 Dynamic 三大类型。每种类型下包含多个预定义的 stamp。

json
{
  "stamp": {
    "Static": {
      "Approved": {
        "url": "xxx://url.url",
        "fileType": "pdf"
      },
      "Completed": {
        "url": "xxx://url.url",
        "fileType": "pdf"
      },
      "Confidential": {
        "url": "xxx://url.url",
        "fileType": "pdf"
      },
      "Draft": {
        "url": "xxx://url.url",
        "fileType": "pdf"
      },
      "Revised": {
        "url": "xxx://url.url",
        "fileType": "pdf"
      },
      "Emergency": {
        "url": "xxx://url.url",
        "fileType": "pdf"
      },
      "Expired": {
        "url": "xxx://url.url",
        "fileType": "pdf"
      },
      "Final": {
        "url": "xxx://url.url",
        "fileType": "pdf"
      },
      "Received": {
        "url": "xxx://url.url",
        "fileType": "pdf"
      },
      "Reviewed": {
        "url": "xxx://url.url",
        "fileType": "pdf"
      }
    },
    "SignHere": {
      "Accepted": {
        "url": "xxx://url.url",
        "fileType": "pdf"
      },
      "Initial": {
        "url": "xxx://url.url",
        "fileType": "pdf"
      },
      "Rejected": {
        "url": "xxx://url.url",
        "fileType": "pdf"
      },
      "SignHere": {
        "url": "xxx://url.url",
        "fileType": "pdf"
      },
      "Witness": {
        "url": "xxx://url.url",
        "fileType": "pdf"
      }
    },
    "Dynamic": {
      "Approved": {
        "url": "xxx://url.url",
        "fileType": "pdf"
      },
      "Confidential": {
        "url": "xxx://url.url",
        "fileType": "pdf"
      },
      "Received": {
        "url": "xxx://url.url",
        "fileType": "pdf"
      },
      "Reviewed": {
        "url": "xxx://url.url",
        "fileType": "pdf"
      },
      "Revised": {
        "url": "xxx://url.url",
        "fileType": "pdf"
      }
    }
  }
}

管理 stamp 列表 ​

TIP

默认 stamp 列表是不允许更改的。但是，您可以创建自己的 stamp 来替换默认的 stamp。首先需要制作一个 PDF 文件以及相应的 svg 文件，可以参考 lib\stamps\en-US\DynamicStamps 文件夹下的示例。

创建自定义 stamp 列表 ​

使用 API pdfViewer.initAnnotationIcons() 来预定义自定义 stamp 列表：

javascript
var initIcons = {
    MyCategory1: {
        StampName1: {
            fileType: "jpg",
            url: "http://stamp.jpg"
        }
    },
    MyCategory2: {
        StampName2: {
            fileType: "png",
            url: "stamp.png"
        }
    }
};
var pdfViewer = await pdfui.getPDFViewer();
await pdfViewer.initAnnotationIcons({stamp: initIcons});

管理 stamp ​

移除自定义 stamp：

javascript
// 移除指定 stamp
var pdfViewer = await pdfui.getPDFViewer();
await pdfViewer.removeAnnotationIcon('stamp', 'MyCategory1', 'StampName1')

// 清空所有 stamp
await pdfViewer.removeAnnotationIcon('stamp', '', 'StampName1')

// 清空指定类别下的所有 stamp
await pdfViewer.removeAnnotationIcon('stamp', 'MyCategory1', '')

添加新的自定义 stamp：

javascript
var icons = {
    annotType: "stamp",
    fileType: "png",
    url: "http://stamp.png",
    category: "MyCategory",
    name: "MyStamp"
};
var pdfViewer = await pdfui.getPDFViewer();
await pdfViewer.addAnnotationIcon(icons);

获取 stamp 信息 ​

获取 stamp 的 category 及 name ​

javascript
// 列出所有可用的 stamps
await pdfui.getAnnotationIcons("stamp", false);

// 仅列出自定义 stamps
await pdfui.getAnnotationIcons("stamp", true);

TIP

您还可以使用以下代码来输出列表中已存在的 stamp：

javascript
var allIcons = pdfui.getAnnotationIcons("stamp", false);
var iconNames = [];
for (var categoryKey in allIcons) {
    var category = allIcons[categoryKey];
    for (var name in category) {
        iconNames.push({
            category: categoryKey,
            name
        });
    }
}
console.log(iconNames);

添加 stamp 到页面 ​

通过 API 添加自定义 stamp ​

WARNING

在调用 PDFPage.addAnnot 添加 stamp 列表中不存在的自定义 stamp 时，您需要先调用 PDFViewer.addAnnotationIcon() 将其添加到 stamp 列表。否则，该 stamp 的外观在页面上将不能正确显示。

javascript
var icons = {
    annotType: "stamp",
    fileType: "png",
    url: "http://stamp.png",
    category: "MyCategory",
    name: "MyStamp"
};

var stamp = {
    type: 'stamp',
    rect: {left: 0, bottom: 0, right: 200, top: 100},
    icon: 'MyStamp',
    iconCategory: 'MyCategory'
};

var pdfViewer = await pdfui.getPDFViewer();
var pdfDoc = await pdfViewer.getCurrentPDFDoc();
var page = await pdfDoc.getPageByIndex(0);

await pdfViewer.addAnnotationIcon(icons);
await page.addAnnot(stamp)

TIP

如果只需要在页面上添加新的 stamp，而不需要在 viewer 的 stamp 列表中添加 stamp 图标，可以使用以下代码：

javascript
pdfpage.addAnnot({
    type: PDFViewCtrl.PDF.annots.constant.Annot_Type.stamp,
    rect: {left: 0, right: 300, top: 450, bottom: 0},
    iconInfo: {
        annotType: PDFViewCtrl.PDF.annots.constant.Annot_Type.stamp,
        category: "category",
        name: "name",
        fileType: "pdf",
        url: "http://path/file.pdf"
    }
});

相关 API ​

API描述
PDFViewer.initAnnotationIcons(icons)初始化注释的图标(设置后，默认的图标将不会显示)
PDFViewer.addAnnotationIcon(icon)添加单个图标
PDFViewer.removeAnnotationIcon(type,category,name)移除单个图标
PDFUI.getAnnotationIcons(annotType,onlyCustomized)获取自定义图标
StateHandlerManager.switchTo(name,params)切换到 addStampStateHandler
PDFViewer.setFormatOfDynamicStamp(seperator,timeFormat)设置动态信息的格式
PDFPage.addAnnot(json)指定现有图标作为 stamp 样式来添加 stamp