Foxit PDF SDK For Web - V10.0.0

# Stamp及其自定义

Foxit PDF SDK for Web 提供了丰富的stamp功能，用户可以通过 API 和默认图标来实现这些功能。本节将引导您了解如何管理stamp，以及如何向PDF文档中添加stamp。

# 默认stamp列表

Foxit PDF SDK for Web 在Viewer中提供了默认的stamp列表，如下所示：

{
	"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列表

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

# 创建自定义stamp列表

自定义stamp列表可以通过API pdfViewer.initAnnotationIcons() 来进行预定义，然后将其加载到viewer中。运行如下代码后，默认stamp列表将被覆盖。

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

//remove a stamp with the category and name as 'MyCategory1' and 'StampName1' from you stamp list
var pdfViewer = await pdfui.getPDFViewer();
await pdfViewer.removeAnnotationIcon('stamp','MyCategory1','StampName1')

//clear the whole stamp list
var pdfViewer = await pdfui.getPDFViewer();
await pdfViewer.removeAnnotationIcon('stamp','','StampName1')

//clear all stampes under 'MyCategory1' 
var pdfViewer = await pdfui.getPDFViewer();
await pdfViewer.removeAnnotationIcon('stamp','MyCategory1','')

# 添加一个新的自定义stamp

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

# stamp category及name

Stamp是按category和name进行组织管理的。要找出列表中已经存在的stamp，简单的方法就是调用pdfui.getAnnotationIcons() 来获取category和name信息。下面是代码示例。

# 获取stamp的category及name

//list all availble stamps
await pdfui.getAnnotationIcons("stamp", false);

//list only custom stamps
await pdfui.getAnnotationIcons("stamp", true);

您还可以执行以下代码来输出列表中已存在的stamp。

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

# 在Viewer中将stamp添加到页面

在Viewer的Comments选项卡中，下拉stamp工具，可以看到stamp列表。您可以点击stamp图标，然后将其放置在页面所需的位置。

如果您需要在页面上添加一个自定义的stamp，请按照如下的步骤：

  1. 在Advanced Web Viewer中，点击Comment tab，下拉stamp tool，选择 Custom Stamps。

  2. 在弹出的 Create Custom Stamp 对话框中, 点击 File -> Browse... 并选择一个图片文件，或者点击 File -> Enter File URL, 输入PDF和SVGA文件所存放的URL地址。

  3. 填写category，name，width，height, 以及从下拉菜单中选择type，创建stamp。 创建完成后，自定义的stamp就会显示在Stamp 列表中。

  4. 点击自定义的stamp图标，然后将其放置在页面所需的位置。

# 通过API在页面上添加自定义stamp

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

var icons = {
    annotType: "stamp",
    fileType: "png",
    url: "http://stamp.png",
    // width:80,
    // height:30,
    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)

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

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

# 在Viewer中将特定的stamp设置为默认工具

使用 PDFUI 构造函数将stamp定义为默认工具：

pdfui = new UIExtension.PDFUI({
    customs: {
        defaultStateHandler: PDFViewCtrl.STATE_HANDLER_NAMESSTATE_HANDLER_CREATE_STAMP
	    handlerParams: {
            category: 'SignHere',
            name: 'SignHere'
        }
    };
})

使用API StateHandlerManager.switchTo() 设置默认工具：

pdfui.getStateHandlerManager().then(handlerManager =>
    handlerManager.switchTo(
        PDFViewCtrl.STATE_HANDLER_NAMES.STATE_HANDLER_CREATE_STAMP,
        {
            category: "SignHere",
            name: "SignHere"
            url: "http://xxx/xx.png", // or "blob:http://xxxxx"
            showUrl: "http://xxx/xx.png", // or "blob:http://xxxxx"
            fileType:'png',
            width: 80,
            height: 30,
        })
);

# 相关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

← 自定义语音合成器 →