Introducing GrapeCity PDF Viewer Annotation Tools

GrapeCity Documents PDF Viewer (GcPdf Viewer) v3.1 includes annotation tools. Annotation tools help you add information to a PDF without altering the document.

When proofreading a document, add notes, mark important information, or circle corrections. Additional features include sound annotation, redact annotation, and file attachment. These tools will help you create and review PDF documents, and design, fill-out and submit forms online. Load a PDF into the viewer, edit it, and save the document to the server with the annotations in place.

Both GcPdf and GcPdf Viewer must be connected to the server to enable the editing tools. Once connected, the annotation editor appears in the left panel of GcPdf Viewer v3.1, and provides the following annotation tools:

• Text Annotation (Sticky note): Adds text or sticky notes
• Free Text Annotation: Adds a note that is always visible
• Ink Annotation: Draws free-hand scribble
• Square Annotation: Adds a rectangle shape
• Circle Annotation: Adds a circle shape
• Line Annotation: Adds a straight line
• Polyline Annotation: Adds closed or open shapes with multiple edges
• Polygon Annotation: Adds a polygon
• File Attachment Annotation: Attach a file to the document, and embed it into the PDF
• Sound Annotation: Import from a .au, .aiff, or .wav file or record from your computer's microphone, and attach it to a file
• Redact Annotation: Marks and removes specific content

In addition to the annotation options, the GcPdf viewer includes general editing features. Learn more about editing options here.

Use Cases for Annotation Tools

Consider a scenario in which the HR department of an organization wants employees to have the ability to ask questions and communicate about official documents. The documents are PDFs, but most employees do not have Adobe Acrobat. In this case, GcPdf Viewer provides a solution.

If a new employee needs clarification on their salary, they can use annotations to hide figures in the PDF document, add queries, and share it with HR. In return, HR can answer the queries on the same document.

The following instructions detail how to set up this system.

Use Case: PDF Annotation in GrapeCity Pdf Viewer

Refer to the following tutorial to get started. If you would like the annotation editor available in the left panel of GcPdf Viewer, perform the following steps:

1. Create a new ASP. NET Core web application

Using Visual Studio's new project/solution wizard, create a new ASP. NET Core web application based on the Web Application (Model-View-Controller) project template.

2. Copy gc-pdfviewer reference files

You would need to include the js files used to render the GcPdf viewer in your project. To accomplish the same, refer to the GcPdf distribution folder. It consists of a sample named GcPdfViewerWeb.

Copy the directory 'GcPdfViewerWeb\SupportApiDemo\wwwroot\lib\gc-pdfviewer' from this sample to the wwwroot\lib directory of the newly created application.

3. Modify Index.cshtml to render GcPdf Viewer

To initialize the GcPdf Viewer control, add the following Javascript code to replace the default content of Views\Home\Index.cshtml in the newly created project.

@{
    ViewData["Title"] = "Home Page";
}
<style>
    .container {
        height: calc(100% - 128px);
        max-width: inherit;
    }
    #host, .pb-3{
        height: 100%;
    }
</style>
<div id="host></div>
<script src="~/lib/gc-pdfviewer/build/gcpdfviewer.js"asp-append-version="true"></script>
<script>
    var viewer = new GcPdfViewer("#host", { supportApi: 'SupportApi/GcPdfViewer' });
    viewer.addDefaultPanels();
    viewer.addAnnotationEditorPanel();
    viewer.beforeUnloadConfirmation = true;
    viewer.open("Home/GetPdf");
</script>

4. Add SupportApi to the solution

Creating the Support API enables the annotation tools in the GcPdf Viewer control, so you must add a reference to your project.

From the GcPdfViewerWeb sample, copy the directory SupportApi to a location near your new application's directory.

Add SupportApi\SupportApi.csproj by right-clicking on your solution in Visual Studio's Solution Explorer. Chose "Add Existing Project" when prompted.

Build the solution and make sure that there are no errors. Next, add a reference of this project to the MVC application created above by right-clicking on the "Dependencies" folder and choosing the "Add Project" option. This action helps reference the methods defined in the SupportApi project.

5. Add GcPdf Viewer Controller

Modify your .Net Core application's default Startup.cs code to add a reference to the GcPdfViewerController defined in the SupportApi project:

// Added usings:
using Microsoft.AspNetCore.MVC.ApplicationParts;
using System.Reflection;
...
//Modify ConfigureServices by adding this call at the top:
publis void ConfigureServices(IServiceCollection services)
{
  services.AddMvc().ConfigureApplicationPartManager(apm=>
  apm.ApplicationParts.Add(new AssemblyPart(typeof(GcPdfViewerSupportApi.Controllers.GcPdfViewerController).
GetTypeInfo().Assembly)));
}

6. Provide the default PDF file (optional)

The code below is used to load a default PDF file in GcPdf Viewer. This step is optional. You can even load a PDF file using the open option available in the GcPdf viewer. So, you can modify your .Net Core application's Controllers\HomeController.cs by adding the following method, in case you want to load a file by default:

//Added method to HomeController class:

[Route("Home/GetPdf")]
public virtual|ActionResultGetSamplePdf()
{
FileStreamfs = newFileStream("SampleSalarySlip.pdf",FileMode.Open);
FileStreamResultresult=newFileStreamResult(fs,"application/pdf");
return result;
}

Note: This step is optional. If you choose to skip it, you must remove the following line from Index.cshtml to avoid the error message: viewer.open("Home/GetPdf");

After performing these steps, the annotation editor option appears in the left panel of the GcPdf viewer upon startup. Click open the annotation editor, and edit the PDF loaded in the viewer.

HR can deploy the viewer for use by employees.

Add Employee Queries with the PDF Editing Tool

We used three different annotations to achieve the above scenario:

Redact annotation: Hidthe salary figures and added the "redacted" overlay text
Text annotation: Provided a written request for clarification on one of the components
Circle annotation: Marked a potential error

Finally, save the altered PDF with the new annotations. The GIF below depicts how we added these annotations to the pay stub with the GcPdf Viewer Annotation Editor.

The image below depicts the modified document when opened in Adobe Reader:

Utilizing the PDF Editing Tools to Add Replies

When HR receives the revised PDF, they open the PDF in the viewer and add responses to the employee queries.

Attached is a sample application implementing the steps and scenario described above.

Visit Help and Demo for more details.

We hope this feature provides editing functionality through the GcPdf viewer. Please let us know what type of applications are most relevant to this new feature.