Are you looking to integrate Adobe Acrobat into your Angular application? You've come to the right place! In this comprehensive guide, we will walk you through the process of integrating Adobe Acrobat into your Angular application, step-by-step. We will cover everything you need to know, from installing the necessary dependencies to implementing the Acrobat viewer in your Angular application.
Prerequisites
Before we begin, it is important to note that this guide assumes that you have a basic understanding of Angular and TypeScript. Additionally, you will need to have the following tools and libraries installed:
- Node.js and npm (version 6.0.0 or higher)
- Angular CLI (version 8.0.0 or higher)
- Adobe Acrobat DC (version 20.011.20034 or higher)
- Adobe Acrobat JavaScript API (version 2.0 or higher)
Installing the Necessary Dependencies
To get started, you will need to install the necessary dependencies for your Angular application. You can do this by running the following command in your terminal:
ng add @adobe/acrobat-embed-angular
This will install the Adobe Acrobat Embed Angular library, which provides the necessary components and services for integrating Adobe Acrobat into your Angular application. Once the installation is complete, you can import the AcrobatModule in your AppModule to enable the Acrobat integration in your application.
Implementing the Acrobat Viewer
Now that you have the necessary dependencies installed, you can start implementing the Acrobat viewer in your Angular application. To do this, you can use the AcrobatViewerComponent, which is provided by the Adobe Acrobat Embed Angular library. This component allows you to embed the Acrobat viewer in your Angular application, and provides a number of options and events for controlling the viewer.
To use the AcrobatViewerComponent, you can add it to your Angular template as follows:
<acrobat-viewer [src]="pdfSrc" (ready)="onViewerReady($event)"></acrobat-viewer>
In this example, the [src] input property is used to specify the URL of the PDF document that you want to display in the viewer. The (ready) output property is used to listen for the viewer's ready event, which is fired when the viewer has finished loading the PDF document.
You can also use the AcrobatViewerComponent to control the viewer's appearance and behavior. For example, you can use the AcrobatViewerComponent's toolbar property to show or hide the viewer's toolbar, or you can use the AcrobatViewerComponent's page property to specify the initial page that you want to display in the viewer.
Handling the Acrobat Viewer's Events
The AcrobatViewerComponent provides a number of events that you can use to handle the viewer's actions and interactions. For example, you can use the AcrobatViewerComponent's pageChanged event to detect when the user has changed the viewer's current page, or you can use the AcrobatViewerComponent's print event to detect when the user has printed the PDF document.
To handle the AcrobatViewerComponent's events, you can use the Angular event binding syntax. For example, you can handle the AcrobatViewerComponent's pageChanged event as follows:
<acrobat-viewer [src]="pdfSrc" (pageChanged)="onPageChanged($event)"></acrobat-viewer>
In this example, the onPageChanged() method is called whenever the viewer's current page changes. The $event argument provides information about the event, such as the new page number.
Using the Acrobat JavaScript API
If you need to interact with the PDF document programmatically, you can use the Adobe Acrobat JavaScript API. This API provides a number of functions and properties that you can use to manipulate the PDF document, such as adding annotations, filling forms, and extracting text. To use the Acrobat JavaScript API in your Angular application, you can use the AcrobatViewerComponent's eval() method to execute JavaScript code in the context of the PDF document.
For example, you can use the AcrobatViewerComponent's eval() method to add a new annotation to the PDF document as follows:
<acrobat-viewer [src]="pdfSrc" (ready)="onViewerReady($event)"></acrobat-viewer>
ngOnInit() {
this.onViewerReady({
viewer: this.viewer
});
}</p>
onViewerReady(event: AcrobatViewerReadyEvent) {
const { viewer } = event;
viewer.eval("this.addAnnotati
In this example, the onViewerReady() method is called when the viewer is ready. The method then uses the AcrobatViewerComponent's eval() method to add a new annotation to the PDF document. The eval() method takes a string argument that contains the JavaScript code to be executed. In this example, the JavaScript code uses the Acrobat JavaScript API to add a new annotation to the PDF document.
In this comprehensive guide, we have shown you how to integrate Adobe Acrobat into your Angular application. We have covered everything you need to know, from installing the necessary dependencies to implementing the Acrobat viewer in your Angular application. We have also shown you how to handle the Acrobat viewer's events and use the Acrobat JavaScript API to interact with the PDF document programmatically. With this knowledge, you can now add powerful and interactive PDF functionality to your Angular application.
References
| Title | URL |
|---|---|
| Adobe Acrobat Embed Angular | https://www.npmjs.com/package/@adobe/acrobat-embed-angular |
| Adobe Acrobat JavaScript API | https://www.adobe.com/devnet/acrobat/javascript.html |