Posted on • Originally published atraymondcamden.com
Using the PDF Embed API with Vue.js
I've recently become acquainted with Adobe'sPDF 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 theDocument 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 thelink 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 domainand 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 theGetting Started to quickly test. Here it is in its entirety as it's pretty short:
<!--Get the samples from https://www.adobe.com/go/pdfembedapi_samples--><!DOCTYPE html><html><head><title>Adobe Document Services PDF Embed API Sample</title><metacharset="utf-8"/><metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1"/><metaid="viewport"name="viewport"content="width=device-width, initial-scale=1"/></head><bodystyle="margin: 0px"><divid="adobe-dc-view"></div><scriptsrc="https://documentcloud.adobe.com/view-sdk/main.js"></script><scripttype="text/javascript">document.addEventListener("adobe_dc_view_sdk.ready",function(){varadobeDCView=newAdobeDC.View({clientId:"<YOUR_CLIENT_ID>",divId:"adobe-dc-view"});adobeDCView.previewFile({content:{location:{url:"https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf"}},metaData:{fileName:"Bodea Brochure.pdf"}});});</script></body>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 thepreviewFile method to add it the PDF viewer to the page. Here's a screen shot of this particular example:
I realize that screen shot 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 forumnoted that you can check forwindow.AdobeDC to see if the library is ready. I wrote my code such that thecreated method of my Vue app can check that and still handle the library being loaded library. Broadly I did it by using a variable,pdfAPIReady. Mycreated method does this:
created(){//credit: https://community.adobe.com/t5/document-services-apis/adobe-dc-view-sdk-ready/m-p/11648022#M948if(window.AdobeDC)this.pdfAPIReady=true;},I then add a watcher for that variable:
watch:{pdfAPIReady(val){// should only be called when true, but be sureif(val){this.adobeDCView=newAdobeDC.View({clientId:ADOBE_KEY,divId:"pdf-view"});}}}And the final bit is a listeneroutside my Vue application. Remember that you can access thedata variable using the Vue instance. This is how I handled that:
// In theory I'm not needed on CodePen, but in the real world I would be.document.addEventListener("adobe_dc_view_sdk.ready",()=>{app.pdfAPIReady=true;});Now, in theory, my Vue app can make use of the library. The Adobe docs describe how to uselocal 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:
<divid="app"v-cloak><strong>Select a PDF to Preview</strong><inputtype="file"accept="application/pdf"@change="previewPDF"ref="fileInput"><h3v-if="pdfSelected">PDF Preview:</h3><divid="pdf-view"></div></div>Notice thepdfSelected 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 (pdf-view), but the embed viewer didn't like its div being hidden by Vue. (I could probably change how I hide the div, but for now I'm leaving it.) Now for the #"pdf-view"});}}}})// In theory I'm not needed on CodePen, but in the real world I would be.document.addEventListener("adobe_dc_view_sdk.ready",()=>{app.pdfAPIReady=true;});
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.
Top comments(0)
For further actions, you may consider blocking this person and/orreporting abuse
