How to Add Annotations with Foxit PDF SDK for Web

Programmatically add an annotation

var pdfviewer = await pdfui.getPDFViewer();var pdfdoc = await pdfviewer.getCurrentPDFDoc();var page = await pdfdoc.getPageByIndex(0);var json = {type:’square’,rect:{left:98,right:200,top:500,bottom:450},contents:’this is a rectangle’,color: 0x008080,borderInfo:{width:15}};await page.addAnnot(json)

UI

Programmatically add group annotations

NO

var pdfviewer = await pdfui.getPDFViewer();var pdfdoc = await pdfviewer.getCurrentPDFDoc();var page = await pdfdoc.getPageByIndex(0);var jsonGroup = [{type:’square’,rect:{left:98,right:200,top:500,bottom:450},color:0xFF0000,borderInfo:{width:15}, contents:’I am rectangle’},{type:’circle’,rect:{left:467.196991,right:539.197021,top:509.494995,bottom:497.506989},color:0x00FF00,borderInfo:{width:2},contents:’Do I look like a circle’}];await page.addAnnotGroup(jsonGroup,1)
//This example will create a group annotation of Textbox, Strikeout and Typewriter on the page 5.
// The parameter 0 means to set the Textbox as the primary comment after group comments are created.

UI

API

No

var pdfviewer = await pdfui.getPDFViewer();var pdfdoc = await pdfviewer.getCurrentPDFDoc();var page = await pdfdoc.getPageByIndex(0);var json = {type:’fileattachment’,rect:{left:100,right:200,top:250,bottom:100},icon:’Paperclip’};// var filePath = ‘http://10.103.4.154:9898/_testfile/image/MyImage.jpg‘;// const resp = await fetch(filePath);// const arrayBuffer = await resp.arrayBuffer();// const buffer = new Uint8Array(arrayBuffer);// json.buffer = buffer;await page.addAnnot(json)

UI

Insert by API

No

var pdfviewer = await pdfui.getPDFViewer();var pdfdoc = await pdfviewer.getCurrentPDFDoc();var page = await pdfdoc.getPageByIndex(0);var json = {type:’fileattachment’,rect:{left:100,right:200,top:250,bottom:100},icon:’Paperclip’};var filePath = ‘http://10.103.4.154:9898/_testfile/image/MyImage.jpg‘;const resp = await fetch(filePath);const arrayBuffer = await resp.arrayBuffer();const buffer = new Uint8Array(arrayBuffer);json.buffer = buffer;await page.addAnnot(json)

7.1.1

var pdfviewer = await pdfui.getPDFViewer();
var pdfdoc = await pdfviewer.getCurrentPDFDoc();
var page = await pdfdoc.getPageByIndex(0);
var json = {type:’stamp’,rect:{left:0,right:400,top:250,bottom:0},icon:’customStampName1′,iconCatagory:’catagory’};
var iconJson = {annotType: “stamp”,
catagory: “catagory”,
name: “customStampName1”,
fileType: “bmp”,
url: ‘http://10.103.4.154:9898/_testfile/image/3848c0425f2a058993a96c2e7c6c9af6.jpg’};
await pdfviewer.addIcon(iconJson);
await page.addAnnot(json)

var pdfviewer = await pdfui.getPDFViewer();
var pdfdoc = await pdfviewer.getCurrentPDFDoc();
var page = await pdfdoc.getPageByIndex(1);
var json = {type:’stamp’,rect:{left:0,right:400,top:250,bottom:0},iconInfo:{annotType: “stamp”,
catagory: “catagory“,
name: “customStampName1″,
fileType: “bmp”,
url: ‘http://10.103.4.154:9898/_testfile/image/3848c0425f2a058993a96c2e7c6c9af6.jpg’}};
await page.addAnnot(json)

var pdfviewer = await pdfui.getPDFViewer();
var pdfdoc = await pdfviewer.getCurrentPDFDoc();
var page = await pdfdoc.getPageByIndex(0); //get the target page// get the page matrix, and transform the rect to a normal page
let m = page.getPDFMatrix();
m.setReverse(m)
rect = m.transformRect(0,130,230,0)
console.log(rect)(4) [8.50394058227539, 0, 238.5039405822754, 130]
0: 8.50394058227539
1: 0
2: 238.5039405822754
3: 130
length: 4
__proto__: Array(0)、//add the stampvar json = {type:’stamp’,rect:{left:0,right:130,top:230,bottom:0},icon:’customStampName1′,iconCatagory:’catagory’};
var iconJson = {annotType: “stamp”,
catagory: “catagory”,
name: “customStampName1”,
fileType: “bmp”,
url: ‘http://10.103.4.154:9898/_testfile/image/3848c0425f2a058993a96c2e7c6c9af6.jpg’};
await pdfviewer.addIcon(iconJson);
await page.addAnnot(json)