Collaborate and annotate PDF using FlowPaper Classic
Annotations refer to the marks, highlights, notes, pointers, drawings, etc., inserted or written on a PDF document. You can use many software to access PDF extension files, with Adobe Acrobat being the best of all.
PDF files can also be accessed online on a browser with in-built tools depending on the browser you are using. However, adding is easy in offline software, but doing the same online is not straightforward.
For customizing the online PDF annotations, you can utilize FlowPaper, which lets you collaborate PDFs in the browser. This article defines how to annotate PDF files using the FlowPaper tool.
Why FlowPaper?
FlowPaper also provides various functionalities in terms of editing a PDF document. We will see how we can collaborate with PDF files using browsers and make notes, High-Light text, and draw figures.
Working on web annotations in FlowPaper is done by utilizing a full set of API methods. We can set viewers with easy-to-setup scripts in ASP.NET, PHP, and JSP.
This is fully responsive with other functionality like saving annotation in the database, searching content inside the PDF file, print, and many more. Here we will see how we can use FlowPaper in ASP.NET.
Benefits of FlowPaper Classic
- It is fully responsive and easy to configure.
- API methods available to perform different annotation operations
- We can store annotation in Database
- FlowPaper Classic can be set up within minutes.
- It supports touch gestures.
How to Configure FlowPaper Classic?
Create a simple HTML page and place a DIV (see below)
<divid="documentViewer"class="flowpaper_viewer"></div>Add the below code when you want to configure the PDF viewer.
$('#documentViewer').FlowPaperViewer
(
{
config:
{
PDFFile: {your Document Path},
Scale: 0.6,
ZoomTransition: 'easeOut',
ZoomTime: 0.5,
ZoomInterval: 0.1,
FitPageOnLoad: false,
FitWidthOnLoad: true,
FullScreenAsMaxWindow: false,
ProgressiveLoading: false,
MinZoomSize: 0.2,
MaxZoomSize: 5,
SearchMatchAll: false,
InitViewMode: 'Portrait',
RenderingOrder: 'html5,html',
ViewModeToolsVisible: true,
ZoomToolsVisible: true,
NavToolsVisible: true,
CursorToolsVisible: true,
SearchToolsVisible: true,
StickyTools: true,
BottomToolbar: '/UI_flowpaper_annotations.html',
key: '',
localeChain: 'en_US'
}
}
)
In the above code, you can set the configuration as per your need. However, we are going to highlight some configurations that you must do.
- PDF File: Specify a path of your PDF file which you want to show in the viewer.
- BottomToolbar: Specify a path of HTML which contains the design of the bottom toolbar of the viewer. Using this toolbar, you can add annotations and delete the existing ones.
- When you download the sample code from the official website, you can get this HTML.
- Key: For the development aspect, it is not required, but it’s required when you go live.
- localeChain: Sets the language which you want to use.
- You can check the description of other parameters on https://flowpaper.com/parameters/.
After configuring your PDF, Viewer will be viewed as given below:
How to Manage Annotation
There are several events in the document viewer, and to create a mark (annotation) on a document, you must use the “onMarkCreated” event of the viewer.
Here is a sample code for adding the annotation:
$("#documentViewer").bind('onMarkCreated', function (e, mark) {
$.ajax({
url: "/services/annotations/create_mark.ashx",
data: {
'DOCUMENT_FILENAME': startDocument,
'DocumentId': PrimarySupplementId,
'UserId': UserId,
'MARK': JSON.stringify(mark, null, 2)
},
context: document.body,
type: 'POST',
success: function (data) {
TrackingLog(window.location.href, "page", "Supplement - PDF Viewer", "Mark Created", PrimaryFileName, mark.note, "", "1", PrimarySupplementId);
}
});
});
This code script refers to the service file.
publicvoidProcessRequest(HttpContext context)
{
mark = create_mark.Deserialise<JSONDict>(context.Request["MARK"]);
try
{
stringconectionString ={Your Connection String};
using (SqlConnection con = newSqlConnection(conectionString))
{
using (SqlCommandcmd = newSqlCommand("{Your Store Procedure Name}", con))
{
cmd.CommandType = CommandType.StoredProcedure;
decimalpositionX = Convert.ToString(getDictVariable("positionX")) == "" ?
0 :Convert.ToDecimal(getDictVariable("positionX"));
decimalpositionY = Convert.ToString(getDictVariable("positionY")) == "" ?
0 :Convert.ToDecimal(getDictVariable("positionY"));
decimal width = Convert.ToString(getDictVariable("width")) == "" ?
0 :Convert.ToDecimal(getDictVariable("width"));
decimal height = Convert.ToString(getDictVariable("height")) == "" ?
0 :Convert.ToDecimal(getDictVariable("height"));
cmd.Parameters.Add("@document_filename", SqlDbType.VarChar).Value = context.Request["DOCUMENT_FILENAME"];
cmd.Parameters.Add("@document_relative_path", SqlDbType.VarChar).Value = getDictVariable("XX");
cmd.Parameters.Add("@selection_text", SqlDbType.VarChar).Value = getDictVariable("selection_text");
cmd.Parameters.Add("@has_selection", SqlDbType.Int).Value = (getDictVariable("has_selection") == "true") ? 1 : 0;
cmd.Parameters.Add("@color", SqlDbType.VarChar).Value = getDictVariable("color");
cmd.Parameters.Add("@selection_info", SqlDbType.VarChar).Value = getDictVariable("selection_info");
cmd.Parameters.Add("@readonly", SqlDbType.Int).Value = (getDictVariable("readonly") == "true") ? 1 : 0;
cmd.Parameters.Add("@type", SqlDbType.VarChar).Value = getDictVariable("type");
cmd.Parameters.Add("@displayFormat", SqlDbType.VarChar).Value = getDictVariable("displayFormat");
cmd.Parameters.Add("@note", SqlDbType.VarChar).Value = getDictVariable("note");
cmd.Parameters.Add("@pageIndex", SqlDbType.Int).Value = getDictVariable("pageIndex");
cmd.Parameters.Add("@positionX", SqlDbType.Decimal).Value = positionX;
cmd.Parameters.Add("@positionY", SqlDbType.Decimal).Value = positionY;
cmd.Parameters.Add("@width", SqlDbType.Decimal).Value = width;
cmd.Parameters.Add("@height", SqlDbType.Decimal).Value = height;
cmd.Parameters.Add("@collapsed", SqlDbType.Int).Value = (getDictVariable("collapsed") == "true") ? 1 : 0;
cmd.Parameters.Add("@points", SqlDbType.VarChar).Value = getDictVariable("points");
cmd.Parameters.Add("@author", SqlDbType.VarChar).Value = getDictVariable("author");
con.Open();
cmd.ExecuteNonQuery();
context.Response.Write("1");
}
}
}
catch (Exception ex)
{
context.Response.Write(ex.ToString());
}
}
Pro Tip: You can pass different parameters according to your requirements.
As in the above examples, we have used “onMarkChanged” even to edit an annotation; we must use the “onMarkDeleted” event to delete an annotation.
See the sample below.
$("#documentViewer").bind('onDocumentLoaded', function (e, totalPages) {
BeginLoading();
$.ajax({
url: '{API URL}',
type: 'GET',
data: {
{Pass Your Parameters}
},
contentType: "application/json;charset=utf-8",
success: function (data) {
if (data != null&&data.length> 0) {
for (var a = 0; a <data.length; a++) {
varcollepsed = ((data[a].collapsed == "1") ? "true" :"false");
if (data[a].type == "note") {
var mark = {
id: data[a].id,
type: 'note',
note: data[a].note,
positionX: data[a].positionX,
positionY: data[a].positionY,
width: data[a].width,
height: data[a].height,
pageIndex: data[a].pageIndex,
collapsed: collepsed,
readonly: false,
color: data[a].color,
points: data[a].points,
displayFormat: 'html'
};
$FlowPaper('documentViewer').addMark(mark);
}
Conclusion
FlowPaper PDF viewer and editor is an excellent tool for customizing PDF files at your convenience. Provided you know your way around using this tool, it will be easy to add annotations, notes, and other components to a PDF document.
FlowPaper is also compatible with modern operating systems and devices, which means that you can collaborate and annotate PDF documents on Apple devices and operating systems easily.
While you have access to the tool and our guide, let us know if you still want to know more about adding annotations with FlowPaper. DEV IT developers will help you to understand the nuances of editing PDF documents and make the process easier.