Text markup annotation in ASP.NET Core PDF Viewer control

The PDF Viewer provides options to add, edit, and delete text markup annotations, including Highlight, Underline, Strikethrough, and Squiggly.

Text markup annotations overview

Highlight text

There are two ways to highlight text:

  1. Using the context menu
    • Select text in the PDF document and right-click it.
    • Select Highlight in the context menu.

Highlight from context menu

  1. Using the annotation toolbar
    • Click the Edit Annotation button in the PDF Viewer toolbar to open the annotation toolbar.
    • Select Highlight to enable highlight mode.
    • Select text to add the highlight annotation.
    • Alternatively, select text first and then click Highlight.

Highlight button

When pan mode is active and a text markup mode is entered, the PDF Viewer switches to text selection mode to enable selection.

Refer to the following code sample to switch to highlight mode.

<!--Element to set text markup annotation mode-->
<button id="set" onclick="addAnnot()">Highlight</button>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf">
    </ejs-pdfviewer>
</div>
<script>
    function addAnnot() {
        var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
        pdfViewer.annotation.setAnnotationMode('Highlight');
    }
</script>
<!--Element to set text markup annotation mode-->
<button id="set" onclick="addAnnot()">Highlight</button>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   serviceUrl="/api/PdfViewer"
                   documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf">
    </ejs-pdfviewer>
</div>
<script>
    function addAnnot() {
        var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
        pdfViewer.annotation.setAnnotationMode('Highlight');
    }
</script>

Refer to the following code sample to switch back to normal mode from highlight mode.

<!--Element to set text markup annotation mode-->
<button id="set" onclick="addAnnot()">Highlight</button>
<!--Element to set normal mode-->
<button id="setNone" onclick="setNone()">Normal Mode</button>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf">
    </ejs-pdfviewer>
</div>
<script>
    function addAnnot() {
        var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
        pdfViewer.annotation.setAnnotationMode('Highlight');
    }

    function setNone() {
        var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
        pdfViewer.annotation.setAnnotationMode('None');
    }
</script>
<!--Element to set text markup annotation mode-->
<button id="set" onclick="addAnnot()">Highlight</button>
<!--Element to set normal mode-->
<button id="setNone" onclick="setNone()">Normal Mode</button>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   serviceUrl="/api/PdfViewer"
                   documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf">
    </ejs-pdfviewer>
</div>
<script>
    function addAnnot() {
        var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
        pdfViewer.annotation.setAnnotationMode('Highlight');
    }

    function setNone() {
        var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
        pdfViewer.annotation.setAnnotationMode('None');
    }
</script>

Highlight text programmatically

Programmatically add highlights using the addAnnotation() method.

Here is an example showing how to add highlights programmatically using addAnnotation():

<button id="set" onclick="addAnnotation()">Add annotation programmatically</button>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf">
    </ejs-pdfviewer>
</div>
<script>
  function addAnnotation() {
    var viewer = document.getElementById('pdfviewer').ej2_instances[0];
    viewer.annotation.addAnnotation("Highlight", {
      bounds: [{ x: 97, y: 110, width: 350, height: 14 }],
      pageNumber: 1
    });
  }
</script>
<button id="set" onclick="addAnnotation()">Add annotation programmatically</button>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   serviceUrl="/api/PdfViewer"
                   documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf">
    </ejs-pdfviewer>
</div>
<script>
  function addAnnotation() {
    var viewer = document.getElementById('pdfviewer').ej2_instances[0];
    viewer.annotation.addAnnotation("Highlight", {
      bounds: [{ x: 97, y: 110, width: 350, height: 14 }],
      pageNumber: 1
    });
  }
</script>

Underline text

There are two ways to underline text:

  1. Using the context menu
    • Select text in the PDF document and right-click it.
    • Select Underline in the context menu.

Underline from context menu

  1. Using the annotation toolbar
    • Click the Edit Annotation button in the PDF Viewer toolbar to open the annotation toolbar.
    • Select Underline to enable underline mode.
    • Select text to add the underline annotation.
    • Alternatively, select text first and then click Underline.

Underline button

In the pan mode, if the underline mode is entered, the PDF Viewer control will switch to text select mode to enable the text selection for underlining the text.

Refer to the following code sample to switch to underline mode.

<!--Element to set text markup annotation mode-->
<button id="set" onclick="addAnnot()">Underline</button>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf">
    </ejs-pdfviewer>
</div>
<script>
    function addAnnot() {
        var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
        pdfViewer.annotation.setAnnotationMode('Underline');
    }
</script>
<!--Element to set text markup annotation mode-->
<button id="set" onclick="addAnnot()">Underline</button>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   serviceUrl="/api/PdfViewer"
                   documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf">
    </ejs-pdfviewer>
</div>
<script>
    function addAnnot() {
        var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
        pdfViewer.annotation.setAnnotationMode('Underline');
    }
</script>

Refer to the following code sample to switch back to normal mode from underline mode.

<!--Element to set text markup annotation mode-->
<button id="set" onclick="addAnnot()">Underline</button>
<!--Element to set normal mode-->
<button id="setNone" onclick="setNone()">Normal Mode</button>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf">
    </ejs-pdfviewer>
</div>
<script>
    function addAnnot() {
        var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
        pdfViewer.annotation.setAnnotationMode('Underline');
    }

    function setNone() {
        var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
        pdfViewer.annotation.setAnnotationMode('None');
    }
</script>
<!--Element to set text markup annotation mode-->
<button id="set" onclick="addAnnot()">Underline</button>
<!--Element to set normal mode-->
<button id="setNone" onclick="setNone()">Normal Mode</button>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   serviceUrl="/api/PdfViewer"
                   documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf">
    </ejs-pdfviewer>
</div>
<script>
    function addAnnot() {
        var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
        pdfViewer.annotation.setAnnotationMode('Underline');
    }

    function setNone() {
        var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
        pdfViewer.annotation.setAnnotationMode('None');
    }
</script>

Underline text programmatically

Programmatically add underlines using the addAnnotation() method.

Example:

<button id="set" onclick="addAnnotation()">Add annotation programmatically</button>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf">
    </ejs-pdfviewer>
</div>
<script>
  function addAnnotation() {
    var viewer = document.getElementById('pdfviewer').ej2_instances[0];
    viewer.annotation.addAnnotation("Underline", {
      bounds: [{ x: 250, y: 148, width: 345, height: 14 }],
      pageNumber: 2
    })
  }
</script>
<button id="set" onclick="addAnnotation()">Add annotation programmatically</button>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   serviceUrl="/api/PdfViewer"
                   documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf">
    </ejs-pdfviewer>
</div>
<script>
  function addAnnotation() {
    var viewer = document.getElementById('pdfviewer').ej2_instances[0];
    viewer.annotation.addAnnotation("Underline", {
      bounds: [{ x: 250, y: 148, width: 345, height: 14 }],
      pageNumber: 2
    })
  }
</script>

Strikethrough text

There are two ways to strikethrough text:

  1. Using the context menu
    • Select text in the PDF document and right-click it.
    • Select Strikethrough in the context menu.

Strikethrough from context menu

  1. Using the annotation toolbar
    • Click the Edit Annotation button in the PDF Viewer toolbar to open the annotation toolbar.
    • Select Strikethrough to enable strikethrough mode.
    • Select text to add the strikethrough annotation.
    • Alternatively, select text first and then click Strikethrough.

Strikethrough button

In the pan mode, if the strikethrough mode is entered, the PDF Viewer control will switch to text select mode to enable the text selection for striking through the text.

Refer to the following code sample to switch to strikethrough mode.

<!--Element to set text markup annotation mode-->
<button id="set" onclick="addAnnot()">Strikethrough</button>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf">
    </ejs-pdfviewer>
</div>
<script>
    function addAnnot() {
        var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
        pdfViewer.annotation.setAnnotationMode('Strikethrough');
    }
</script>
<!--Element to set text markup annotation mode-->
<button id="set" onclick="addAnnot()">Strikethrough</button>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   serviceUrl="/api/PdfViewer"
                   documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf">
    </ejs-pdfviewer>
</div>
<script>
    function addAnnot() {
        var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
        pdfViewer.annotation.setAnnotationMode('Strikethrough');
    }
</script>

Refer to the following code sample to switch back to normal mode from strikethrough mode.

<!--Element to set text markup annotation mode-->
<button id="set" onclick="addAnnot()">Strikethrough</button>
<!--Element to set normal mode-->
<button id="setNone" onclick="setNone()">Normal Mode</button>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf">
    </ejs-pdfviewer>
</div>
<script>
    function addAnnot() {
        var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
        pdfViewer.annotation.setAnnotationMode('Strikethrough');
    }

    function setNone() {
        var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
        pdfViewer.annotation.setAnnotationMode('None');
    }
</script>
<!--Element to set text markup annotation mode-->
<button id="set" onclick="addAnnot()">Strikethrough</button>
<!--Element to set normal mode-->
<button id="setNone" onclick="setNone()">Normal Mode</button>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   serviceUrl="/api/PdfViewer"
                   documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf">
    </ejs-pdfviewer>
</div>
<script>
    function addAnnot() {
        var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
        pdfViewer.annotation.setAnnotationMode('Strikethrough');
    }

    function setNone() {
        var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
        pdfViewer.annotation.setAnnotationMode('None');
    }
</script>

Strikethrough text programmatically

Programmatically add strikethrough using the addAnnotation() method.

Here is an example showing how to add strikethrough programmatically using addAnnotation():

<button id="set" onclick="addAnnotation()">Add annotation programmatically</button>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf">
    </ejs-pdfviewer>
</div>
<script>
  function addAnnotation() {
    var viewer = document.getElementById('pdfviewer').ej2_instances[0];
    viewer.annotation.addAnnotation("Strikethrough", {
      bounds: [{ x: 250, y: 144, width: 345, height: 14 }],
      pageNumber: 2
    });
  }
</script>
<button id="set" onclick="addAnnotation()">Add annotation programmatically</button>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   serviceUrl="/api/PdfViewer"
                   documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf">
    </ejs-pdfviewer>
</div>
<script>
  function addAnnotation() {
    var viewer = document.getElementById('pdfviewer').ej2_instances[0];
    viewer.annotation.addAnnotation("Strikethrough", {
      bounds: [{ x: 250, y: 144, width: 345, height: 14 }],
      pageNumber: 2
    });
  }
</script>

Add squiggly to text

There are two ways to add squiggly to text:

  1. Using the context menu
    • Select text in the PDF document and right-click it.
    • Select Squiggly in the context menu.

Squiggly from context menu

  1. Using the annotation toolbar
    • Click the Edit Annotation button in the PDF Viewer toolbar to open the annotation toolbar.
    • Select Squiggly to enable squiggly mode.
    • Select text to add the squiggly annotation.
    • Alternatively, select text first and then click Squiggly.

Squiggly button

In the pan mode, if the squiggly mode is entered, the PDF Viewer control will switch to text select mode to enable the text selection for adding squiggly to the text.

Refer to the following code sample to switch to squiggly mode.

<!--Element to set text markup annotation mode-->
<button id="set" onclick="addAnnot()">Squiggly</button>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf">
    </ejs-pdfviewer>
</div>
<script>
    function addAnnot() {
        var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
        pdfViewer.annotation.setAnnotationMode('Squiggly');
    }
</script>
<!--Element to set text markup annotation mode-->
<button id="set" onclick="addAnnot()">Squiggly</button>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   serviceUrl="/api/PdfViewer"
                   documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf">
    </ejs-pdfviewer>
</div>
<script>
    function addAnnot() {
        var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
        pdfViewer.annotation.setAnnotationMode('Squiggly');
    }
</script>

Refer to the following code sample to switch back to normal mode from squiggly mode.

<!--Element to set text markup annotation mode-->
<button id="set" onclick="addAnnot()">Squiggly</button>
<!--Element to set normal mode-->
<button id="setNone" onclick="setNone()">Normal Mode</button>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf">
    </ejs-pdfviewer>
</div>
<script>
    function addAnnot() {
        var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
        pdfViewer.annotation.setAnnotationMode('Squiggly');
    }

    function setNone() {
        var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
        pdfViewer.annotation.setAnnotationMode('None');
    }
</script>
<!--Element to set text markup annotation mode-->
<button id="set" onclick="addAnnot()">Squiggly</button>
<!--Element to set normal mode-->
<button id="setNone" onclick="setNone()">Normal Mode</button>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   serviceUrl="/api/PdfViewer"
                   documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf">
    </ejs-pdfviewer>
</div>
<script>
    function addAnnot() {
        var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
        pdfViewer.annotation.setAnnotationMode('Squiggly');
    }

    function setNone() {
        var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
        pdfViewer.annotation.setAnnotationMode('None');
    }
</script>

Add squiggly to text programmatically

Programmatically add squiggly using the addAnnotation() method.

Example:

<button id="set" onclick="addAnnotation()">Add annotation programmatically</button>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf">
    </ejs-pdfviewer>
</div>
<script>
  function addAnnotation() {
    var viewer = document.getElementById('pdfviewer').ej2_instances[0];
    viewer.annotation.addAnnotation("Squiggly", {
      bounds: [{ x: 250, y: 144, width: 345, height: 14 }],
      pageNumber: 2
    });
  }
</script>
<button id="set" onclick="addAnnotation()">Add annotation programmatically</button>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   serviceUrl="/api/PdfViewer"
                   documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf">
    </ejs-pdfviewer>
</div>
<script>
  function addAnnotation() {
    var viewer = document.getElementById('pdfviewer').ej2_instances[0];
    viewer.annotation.addAnnotation("Squiggly", {
      bounds: [{ x: 250, y: 144, width: 345, height: 14 }],
      pageNumber: 2
    });
  }
</script>

Delete a text markup annotation

The selected annotation can be deleted in the following ways:

  1. Using the Delete key
    • Select the annotation to delete.
    • Press the Delete key. The selected annotation is removed.
  2. Using the annotation toolbar
    • Select the annotation.
    • Click the Delete Annotation button in the annotation toolbar. The selected annotation is removed.

Delete annotation

Edit text markup annotation properties

The color and the opacity of the text markup annotation can be edited using the Edit Color and Edit Opacity tools in the annotation toolbar.

Edit color

Use the color palette in the Edit Color tool to change the annotation color.

Edit color

Edit opacity

Use the range slider in the Edit Opacity tool to change annotation opacity.

Edit opacity

Set default properties during control initialization

Set default properties before creating the control using highlightSettings, underlineSettings, strikethroughSettings, and squigglySettings.

NOTE

After editing the default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings.

Refer to the following code sample to set the default annotation settings.

<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
                   highlightSettings="@(new Syncfusion.EJ2.PdfViewer.PdfViewerHighlightSettings
            {Author="Guest User", Color="#ffff00", Opacity=0.9})"
                   underlineSettings="@(new Syncfusion.EJ2.PdfViewer.PdfViewerUnderlineSettings
            {Author="Guest User", Color="#00ffff", Opacity=0.9})"
                   strikethroughSettings="@(new Syncfusion.EJ2.PdfViewer.PdfViewerStrikethroughSettings
            {Author="Guest User", Color="#ff00ff", Opacity=0.9})"
                  squigglySettings="@(new Syncfusion.EJ2.PdfViewer.PdfViewerSquigglySettings
            {Author="Guest User", Color="#00ff00", Opacity=0.9})">
    </ejs-pdfviewer>
</div>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   serviceUrl="/api/PdfViewer"
                   documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
                   highlightSettings="@(new Syncfusion.EJ2.PdfViewer.PdfViewerHighlightSettings
            {Author="Guest User", Color="#ffff00", Opacity=0.9})"
                   underlineSettings="@(new Syncfusion.EJ2.PdfViewer.PdfViewerUnderlineSettings
            {Author="Guest User", Color="#00ffff", Opacity=0.9})"
                   strikethroughSettings="@(new Syncfusion.EJ2.PdfViewer.PdfViewerStrikethroughSettings
            {Author="Guest User", Color="#ff00ff", Opacity=0.9})"
                 squigglySettings="@(new Syncfusion.EJ2.PdfViewer.
                 PdfViewerSquigglySettings
            {Author="Guest User", Color="#00ff00", Opacity=0.9})">
    </ejs-pdfviewer>
</div>

Perform undo and redo

The PDF Viewer supports undo and redo for changes. For text markup annotations, undo and redo are provided for:

  • Inclusion of the text markup annotations.
  • Deletion of the text markup annotations.
  • Change of either color or opacity of the text markup annotations.

Undo and redo actions can be performed in the following ways:

  1. Using keyboard shortcuts:
    After performing a text markup annotation action, press Ctrl + Z to undo and Ctrl + Y to redo.
  2. Using the toolbar:
    Use the Undo and Redo tools in the toolbar.

Refer to the following code sample to call undo and redo actions from the client side.

<!--Element to call undo-->
<button id="undo" onclick="Undo()">Undo</button>
<!--Element to call redo-->
<button id="redo" onclick="Redo()">Redo</button>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf">
    </ejs-pdfviewer>
</div>
<script>
    function Undo() {
        var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
        pdfViewer.undo();
    }

    function Redo() {
        var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
        pdfViewer.redo();
    }
</script>
<!--Element to call undo-->
<button id="undo" onclick="Undo()">Undo</button>
<!--Element to call redo-->
<button id="redo" onclick="Redo()">Redo</button>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   serviceUrl="/api/PdfViewer"
                   documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf">
    </ejs-pdfviewer>
</div>
<script>
    function Undo() {
        var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
        pdfViewer.undo();
    }

    function Redo() {
        var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
        pdfViewer.redo();
    }
</script>

Save text markup annotations

Click the download tool in the toolbar to save text markup annotations to the PDF document. The original document is not modified.

Print text markup annotations

Click the print tool in the toolbar to print the PDF document with text markup annotations. The original document is not modified.

Disable text markup annotation

Disable text markup annotations using the enableTextMarkupAnnotation property.

<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   enableTextMarkupAnnotation=false
                   documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf">
    </ejs-pdfviewer>
</div>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   enableTextMarkupAnnotation=false
                   serviceUrl="/api/PdfViewer"
                   documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf">
    </ejs-pdfviewer>
</div>