Examples on CodePen
Best practices for loading files using Adobe PDF Embed API
The Adobe PDF Embed API playground code generator shows how to pass the PDF file via a direct URL to the PDF as shown below.
<div id="adobe-dc-view"></div>
<script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
<script type="text/javascript">
document.addEventListener("adobe_dc_view_sdk.ready", function(){
var adobeDCView = new AdobeDC.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>
However, your client ID is linked to the domain you provided when you registered to get it. Because of this, you can easily load any PDF that is stored within your domain but if you try to load a PDF from another domain, cross-origin resource sharing (CORS) issues may occur when you pass PDF content as a URL. Additionally, Embed API does no verification that the URL is valid or that when it is valid, the target is actually a PDF file. In fact, if you rely on the location/url to define the content to be displayed, you’ll need to instantiate the AdobeDC.View object before you even know if the location you specify will actually load.
Complicating this issue is the fact that the error message in Embed API when it tries to load an invalid URL is somewhat cryptic, see image below. The end user will know there’s an error in previewing the file but they see no indication that the URL to the PDF is invalid. With a bad URL, you can press that reload button as often as you like, you won’t ever see a PDF.
A slightly more problematic error is when developers who are less experienced with the PDF ecosystem try to load PDF files from URLs that present PDF experiences thinking that these are links to the bytes of the PDF files. For example, links to PDF files on Adobe Document Cloud, Dropbox, and Google Drive are links to experiences, not direct links to a PDF. When the URL is valid, but the returned content is not a PDF file, Embed API will attempt to parse the file as though it were PDF, warn you of a parsing error, and then after clicking OK, you will just see the blue loading indicator spinning until you close the window.
The pen below includes the pPDFEmbedAPIWrapper
utility object that will retrieve the PDF file from any publicly accessible URL, convert the result to an ArrayBuffer, and return a Promise that can be used as the value of the content field.
The utility object allows you to use a single method of loading PDF files from URLs regardless of where they are hosted as long as they are publicly accessible. If the PDF file is within your domain, you’d pass a relative URL to the function. If the PDF is outside your domain, you need to supply a fully qualified URL. Additionally, it will throw errors if the URL is invalid or if the URL is not targeting a PDF file. If an error is thrown, you can then manipulate your HTML DOM as you see fit rather than rely on the built-in error messages from Embed API.
The CodePen below is editable so you can try out your own PDF file by changing the value of the urlToPDF
variable and modifying the viewerOptions
. Hover over the buttons to see the URL it is trying to load.