I’ve recently become acquainted with Adobe’s PDF Embed API. As you can probably guess by the name, it’s a library for embedded PDFs on a web page. Not just a simple viewer, it has APIs for interacting with the PDF as well really good mobile support. This is a part of the Document Cloud service which provides other PDF tools as well (extraction, conversion, and so forth). I’ve been playing with the viewer a bit and wanted to see what Vue.js integration would look like. Here’s my solution, but note that I’m still learning about the product so it could probably be done better.
First off, to use the API you need a key. Clicking the link from the webpage will walk you through the process of generating a key. One important note on this though. You have to lock down your key to a domain and that domain can not be changed either. Also, you can only specify one domain. So if you want your domain and localhost, create two projects, generate two keys, and set them as environment variables for your development and production environment. I did my testing on CodePen and had to use this domain: cdpn.io
Once you have a key, you can copy the code from the Getting Started to quickly test. Here it is in its entirety as it’s pretty short:
Breaking this down, you listen for an event signifying that the library is loaded and then create a new “view” based on a div in your HTML. (In the example above,
adobe-dc-view.) Once that’s done you can use the
previewFile method to add it the PDF viewer to the page. Here’s a screenshot of this particular example:
I realize that screenshot is a bit small, but in case you can’t see it, the viewer includes the tools you would normally expect in Acrobat – navigation, search, as well as annotation tools. You can even save directly from the viewer and include your annotations. Here is my attempt at making life insurance documents more fun.
Cool. So as I said, it’s a pretty powerful embedded viewer, and I want to play with it more later, but I first wanted to take a stab at adding it to a simple Vue.js application. Here’s how I did it.
First off, notice in the code listing above that we listen for an event on the document object,
adobe_dc_view_sdk.ready. For my code to work in Vue I needed something a bit more robust. An Adobian on the support forum noted that you can check for
window.AdobeDC to see if the library is ready. I wrote my code such that the
created method of my Vue app can check that and still handle the library being loaded library. Broadly I did it by using a variable,
created method does this:
And the final bit is a listener outside my Vue application. Remember that you can access the
data variable using the Vue instance. This is how I handled that:
Now, in theory, my Vue app can make use of the library. The Adobe docs describe how to use local file content driven by an HTML input tag. Basically, you can pass a FileReader promise to the embed and it will handle knowing when the local file is read and then render it.
Here’s the HTML I used for my demo:
pdfSelected conditional. This is going to toggle after the user has selected a file. I originally had this in a div around the h3 and the div (
For the most part, all I did was use Adobe’s example of reading a file and moved it inside a Vue method. The end result lets you select a local PDF and have it rendered on my Vue app:
As I said, this is a rather simple integration, but hopefully useful to folks wanting to use it with Vue. I’ve got some more examples coming! You can find the complete source code below.