Annotation tools tools allow you to add information to a PDF without altering the document. When proofreading a document you can add notes, mark important information, or circle corrections. Additional features include sound annotation, redact annotation, and file attachment. Annotation tools help you create and review PDF documents, design, fill-out and submit forms online, load a PDF into the viewer, edit it, and save the document to the server with all of the annotations in place.
PDF Viewer Annotation Tools
The GrapeCity Documents PDF Viewer (GcPdf Viewer) v3.1 includes annotation tools. This article describes how to use annotation features in the GcPdf Viewer.
The left panel of the GcPdfViewer control has a new option known as Annotation Editor added. When opened, it shows all the annotation tools available in GcPdfViewer as listed:
- 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 of multiple edges
- Polygon Annotation: Adds a polygon
- File Attachment Annotation: Attach a file to the document, and embedded 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 viewer includes other general editing features, such as add/remove annotations, select annotations, undo/redo operations, add a PDF document and add/delete pages.
Learn more about editing options here.
Consider a scenario where 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 Viewerprovides a solution.
If an 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 demonstrate how to set up this system.
Using PDF Editing Tools
Refer to the following tutorial for help getting 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
Open Microsoft Visual Studio and select Create a new project | ASP.NET Core Web Application. Next, in 'Configure your new project' dialog, uncheck the 'Place solution and the project in the same directory' checkbox to keep SupportApi and sample project side by side.
2. Install GcDocs PDF Viewer
Run the following command to install GcDocs PDF Viewer. Make sure that the directory location in command prompt is set to lib folder. The GcDocs PDF Viewer will be installed in <app_name>\<app_name>\wwwroot\lib:
npm install @grapecity/gcpdfviewer
3. Get the SupportApi
Get the SupportApi (from GcPdf Distribution zip or from GcPdfViewer Sample zip) and copy 'SupportApi' into <app_name>\SupportApi.
4. Add the SupportApi project to application
Add the SupportApi project to your application solution. Right click the solution, Add | Existing Project and then select <app_name>\SupportApi\SupportApi.csproj
5. Modify Index.cshtml to render GcPdfViewer
To initialize the GcPdfViewer control, add the following javascript code to replace the default content of <app_name>\<app_name>\Pages\Index.cshtml in the newly created project.
@page
@model IndexModel
@{ 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/node_modules/@@grapecity/gcpdfviewer/gcpdfviewer.js" asp-append-version="true"></script>
<script>
var viewer = new GcPdfViewer("#host",
{ supportApi: 'api/pdf-viewer' }
);
viewer.addDefaultPanels();
viewer.addAnnotationEditorPanel();
viewer.addFormEditorPanel();
viewer.beforeUnloadConfirmation = true;
viewer.open("api/pdf-viewer/get-sample-pdf");
</script>
6. Add SupportApi project reference
The SupportApi has been created to enable the annotation tools in the GcPdfViewer control, so a reference to the same must be added to your project. In web application project, right click the Dependencies | Add Project Reference to SupportApi.csproj.
7. Add GcPdfViewerController
Create a 'Controllers' folder in WebApplication2 project and add a class file 'SupportApiController.cs' to it as shown below:
8. Modify Startup.cs
Modify Startup.cs by adding the following lines of code to default ConfigureServices() method:
services.AddMvc((opts) => { opts.EnableEndpointRouting = false; });
services.AddRouting();
and following line of code to Configure() method:
app.UseMvcWithDefaultRoute();
The final startup.cs will look like this:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
namespace WebApplication2
{
public class Startup
{
public Startup(IConfiguration configuration)
{
Configuration = configuration;
}
public IConfiguration Configuration { get; }
// This method gets called by the runtime. Use this method to add services to the container.
public void ConfigureServices(IServiceCollection services)
{
services.AddRazorPages();
// Enable routing:
services.AddMvc((opts) => { opts.EnableEndpointRouting = false; });
services.AddRouting();
}
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
else
{
app.UseExceptionHandler("/Error");
}
app.UseStaticFiles();
app.UseRouting();
app.UseAuthorization();
app.UseEndpoints(endpoints =>
{
endpoints.MapRazorPages();
});
// Enable routing:
app.UseMvcWithDefaultRoute();
}
}
}
9. Replace the code in 'SupportApiController.cs' with below code snippet:
using System;
using System.Reflection;
using System.IO;
using GcPdfViewerSupportApi.Controllers;
using Microsoft.AspNetCore.Mvc;
namespace WebApplication2
{
[Route("api/pdf-viewer")]
[ApiController]
public class SupportApiController : GcPdfViewerController
{
static SupportApiController()
{ #if DEBUG // VS's F5 sets the current working directory to project dir rather than bin dir,
// we set it to bin dir so that we can fetch files from the Resources/ sub-dir:
var exePath = new Uri(Assembly.GetEntryAssembly().CodeBase).LocalPath;
var directory = Path.GetDirectoryName(exePath);
Directory.SetCurrentDirectory(directory);
#endif
}
/// <summary>
/// This will be called on startup. You can serve any PDF from the server.
/// This method does not override any SupportApi method, it is just placed here
/// as an example.
/// The full route to it is used in Index.cshtml: api/pdf-viewer/get-sample-pdf
/// </summary>
[Route("get-sample-pdf")]
public virtual IActionResult GetSamplePdf()
{ Response.Headers["Content-Disposition"] = $"inline; filename='GcPdfViewerDemo.pdf'"; // Note: provide the correct path to GcPdfViewerDemo.pdf
FileStreamResult result = new FileStreamResult(System.IO.File.OpenRead("GcPdfViewerDemo.pdf"), "application/pdf");
return result;
}
/// <summary>
/// As an example, override one of the base Support API methods.
/// </summary>
/// <returns></returns>
public override string Ping(string docId)
{ return base.Ping(docId); }
}
}
10. Build and run
Build and run the application to view GcDocs PDF Viewer in your browser which contains the annotation and form editor tools to edit PDF documents.
After performing the steps mentioned above, the Annotation Editor option starts appearing in the left panel of the GcPdfViewer. You can click on it to open the Annotation Editor and edit the PDF file loaded in the viewer.
Add Employee Queries with the PDF Editing Tool
We used three different annotations to achieve the above scenario:
Redact annotation: Hides the salary figures and added the "redacted" overlay text
Text annotation: Provides a written request for clarification on one of the components
Circle annotation: Markes a potential error
Finally, the altered PDF is saved 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 opened in Adobe Reader:
Reply to Employee Queries With the PDF Editing Tool
When HR receives the modified PDF, they can open it in the viewer and add replies to the employee queries.
Attached is a sample application implementing the steps and scenario described above.
Hope this feature provides editing functionality through GcPdf Viewer. Let us know what type of applications are most relevant to this new feature.
Thanks for following along! If you have any questions about the new features, please leave them in the comments below.
Happy Coding!
Manpreet Kaur