In certain cases, we may need to highlight a text phrase, line, or area in PDF documents. It helps to highlight important text with semitransparent color in an electronic format, the same way we do with a marker on standard paper. We can use the highlight feature programmatically using the highlight annotations within applications. In this article, we will learn how to highlight text in PDF using REST API in Node.js.
The following topics shall be covered in this article:
PDF Text Highlighter REST API and Node.js SDK
For highlighting the text in PDF files, we will be using the Node.js SDK of GroupDocs.Annotation Cloud API. This PDF highlighter API allows adding annotations, watermark overlays, text replacements, redactions, and text markups to the supported document formats. Please install it using the following command in the console:
npm install groupdocs-annotation-cloud
Please get your Client ID and Secret from the dashboard before following the mentioned steps. Once you have your ID and secret, add in the code as shown below:
| // This code example demonstrates how to add your client Id and Secret in the code. | |
| global.clientId = "659fe7da-715b-4744-a0f7-cf469a392b73"; | |
| global.clientSecret = "b377c36cfa28fa69960ebac6b6e36421"; | |
| global.myStorage = ""; | |
| const configuration = new groupdocs_annotation_cloud.Configuration(clientId, clientSecret); | |
| configuration.apiBaseUrl = "https://api.groupdocs.cloud"; |
Highlight Text in PDF using REST API in Node.js
We can highlight text in PDF files by following the simple steps given below:
- Upload the PDF file to the cloud
- Highlight Text in the uploaded PDF
- Download the annotated file
Upload the Document
Firstly, we will upload the PDF file to the cloud using the code sample given below:
| // This code example demonstrates how to upload a PDF file to the cloud. | |
| // Initialize api instance | |
| var fileApi = new groupdocs_annotation_cloud.FileApi(configuration); | |
| // Open file in IOStream from local/disc. | |
| var resourcesFolder = 'C:\\Files\\Annotation\\sample.pdf'; | |
| // Read the file | |
| fs.readFile(resourcesFolder, (err, fileStream) => { | |
| // Upload file request | |
| var request = new groupdocs_annotation_cloud.UploadFileRequest("sample.pdf", fileStream, myStorage); | |
| // Upload file | |
| fileApi.uploadFile(request); | |
| }); |
As a result, the uploaded PDF file will be available in the files section of the dashboard on the cloud.
Highlight Text in PDF Document using Node.js
Now, we will add highlight annotations to highlight the text in the uploaded PDF document by following the steps given below:
- Firstly, create an instance of the AnnotateApi.
- Next, set annotation points positions.
- Then, assign points to AnnotationInfo object and set its background color and type.
- Next, provide the input file path.
- Then, initialize the AnnotateOptions object and set the output file path.
- After that, create the AnnotateRequest with AnnotateOptions as argument.
- Finally, highlight the text in PDF using the AnnotateApi.annotate() method.
The following code sample shows how to highlight text in a PDF document using a REST API in Node.js.
| // This code example demonstrates how to add highlight annotations to PDF file. | |
| // Initialize api instance | |
| let annotateApi = groupdocs_annotation_cloud.AnnotateApi.fromKeys(clientId, clientSecret); | |
| // Define annotation | |
| let a1 = new groupdocs_annotation_cloud.AnnotationInfo(); | |
| // Point 1 | |
| let p1 = new groupdocs_annotation_cloud.Point(); | |
| p1.x = 30; | |
| p1.y = 710; | |
| // Point 2 | |
| let p2 = new groupdocs_annotation_cloud.Point(); | |
| p2.x = 460; | |
| p2.y = 710; | |
| // Point 3 | |
| let p3 = new groupdocs_annotation_cloud.Point(); | |
| p3.x = 30; | |
| p3.y = 690; | |
| // Point 4 | |
| let p4 = new groupdocs_annotation_cloud.Point(); | |
| p4.x = 460; | |
| p4.y = 690; | |
| // Add points | |
| a1.points = [p1, p2, p3, p4]; | |
| // Background color | |
| a1.backgroundColor = 3329434; | |
| // Type | |
| a1.type = groupdocs_annotation_cloud.AnnotationInfo.TypeEnum.TextHighlight; | |
| // Input file | |
| let fileInfo = new groupdocs_annotation_cloud.FileInfo(); | |
| fileInfo.filePath = "sample.pdf"; | |
| // Define AnnotateOptions | |
| let options = new groupdocs_annotation_cloud.AnnotateOptions(); | |
| options.fileInfo = fileInfo; | |
| // Assign annotation | |
| options.annotations = [a1]; | |
| // Output file path | |
| options.outputPath = "output.pdf"; | |
| // Create Annotate request | |
| let request = new groupdocs_annotation_cloud.AnnotateRequest(options); | |
| // Annotate | |
| let result = await annotateApi.annotate(request); | |
| // Done | |
| console.log("AddAreaAnnotation: Area Annotation added: " + result.href); |
Highlight Text in PDF Document using Node.js
You can get the required color value from the following link to use as a background color. https://docs.microsoft.com/en-us/office/vba/api/excel.xlrgbcolor
Download the Annotated File
The above code sample will save the annotated PDF file on the cloud. It can be downloaded using the following code sample:
| // This code example demostrates how to download a PDF file from the cloud. | |
| // Construct FileApi | |
| var fileApi = new groupdocs_annotation_cloud.FileApi(configuration); | |
| // Create download file request | |
| let request = new groupdocs_annotation_cloud.DownloadFileRequest("output.pdf", myStorage); | |
| // Download file | |
| let response = await fileApi.downloadFile(request); | |
| // Save file in your working directory | |
| fs.writeFile("C:\\Files\\Annotation\\output.pdf", response, "binary", function (err) { }); |
Highlight PDF Online
Please try the following free online PDF annotation tool, which is developed using the above API.
Conclusion
In this article, we have learned how to:
- add highlight annotations to a PDF using Node.js;
- programmatically upload the PDF file to the cloud;
- download the annotated PDF file from the cloud.
Besides, you can learn more about PDF highlighter API using the documentation. We also provide an API Reference section that lets you visualize and interact with our APIs directly through the browser. In case of any ambiguity, please feel free to contact us on the forum.