1. Home
  2. Foxit PDF SDK for Web
  3. How to Add Annotations with Foxit PDF SDK for Web

How to Add Annotations with Foxit PDF SDK for Web

Add an annotation on a given page

  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)

Add a group annotation on a given page

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.

Setting your own custom icon image for attachment annotation

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)

Insert an attachment

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)

Add a stamp on a normal page

  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)

Add stamp on a cropped page

   
  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)

Updated on October 12, 2020

Was this article helpful?

Related Articles

Ready to try Foxit PDF SDK?
Click the link below to download your trial
Free Trial