Back to Blog

    Developer Blog

    How to Add Annotations with Foxit PDF SDK for Web

    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)comment tab image size box foxit pdf sdk

    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. foxit pdf sdk web tool image size box circle

    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) clip icon attachment attach foxit pdf sdk

    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)comment tab attachment options foxit pdf sdk

    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)
       
    create custom stamp file settings foxit pdf sdk 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)