Please help with JS and PDF Embed API

Report · Aug 12, 2020

Hello,

I am creating a button on my html website that when you click it - it opens up a lightbox embedded pdf just like in the Demo .

Here is my code. It doesn't work in safari and when I do the web inspector is says "unable to find variable AcrobatDC" - Please help

<html lang="en">
  <head>
        <script type="text/javascript" src="https://website.ca/js/index.js"></script>
        <script type="text/javascript" src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
  </head>
  <body>

            <div class="Button-Icon-1">
              <button id="iconButton" type="button" onclick="previewFileIcon()"><img src="https://website/icons/icon1.png" alt="Icon1">
            </button>
            </div>

const viewerConfig = {
  embedMode: "LIGHT_BOX",
  defaultViewMode: "FIT_PAGE",
  showPageControls: false,
  showDownloadPDF: false,
  showPrintPDF: false
};

var adobeDCView = document.getElementById("iconButton").onclick = previewFileIcon();

function previewFileTools() {
  var adobeDCView = new AdobeDC.View({
    clientId: "My-api-key"
  });
  adobeDCView.previewFile({
    content: {
      location: {
        url: "https://website/documents/Icon.pdf"
      }
    },
    metaData: {
      fileName: "Icon.pdf"
    }
  }, viewerConfig);
}

Report · Aug 12, 2020

Your code as is is trying to use the AdobeDC object before it's ready. Load the Embed API JavaScript first and put your code to display your file inside a function triggered by the ready event.

document.addEventListener("adobe_dc_view_sdk.ready", function(){ 
// Your code here
})

Report · Aug 12, 2020

Thank you Joel,

Please bear with me because I am still very new at this and again thank you for helping. Here is my new code that I inserted into just my index.html - I discarded my separate index.js file. This is inserted in the body of my html below the button I created with an onclick:

              <button id="toolsButton" type="button" onclick="previewFileTools()"><img src="https://website/icons/icon1.png" alt="Icon1">
            </button>

I have a "tools.pdf" that I want the public to have access to on my website. With this code below, once I click my tools icon, nothing happens:

            <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 = document.getElementById("toolsButton").onclick = previewFileTools();
	    
	    function previewFileTools() {
		var adobeDCView = new AdobeDC.View({clientId: "clientID"});
		adobeDCView.previewFile({
			content:{location: {url: "https://website.ca/documents/Tools.pdf"}},
			metaData:{fileName: "Tools.pdf"}
		}, {embedMode: "LIGHT_BOX", defaultViewMode: "FIT_PAGE", showPageControls: false, 
			showDownloadPDF: false, showPrintPDF: false});
	});
</script>

Report · Aug 12, 2020

I put a functioning CodePen example here. In my example, I load the PDF from a different domain than what the credential was created for so I use a Promise to pass the content but other than that, you should be able to use what I have there.

The main thing to be sure of is that the button isn't clickable until the AdobeDC object is ready.

Report · Aug 12, 2020

Hi Joel,

Thank you and I tried applying your codepen code into my html and js in my domain but it's still not working. I think it's because of the promise because I am hosting the pdf file in same domain so I don't need to use that. I've updated the url and all the api codes and still nothing. I've tried deleting the promise codes. The farthest I've gone is getting the spinning wheel after I've inputted your code.

Report · Aug 13, 2020

Try duplicating my CodePen on your site and just update the clientId to yours and tell me what happens.

Report · Aug 13, 2020

Thank you so much Joel! It's working!

Report · Aug 13, 2020

If I wanted to add multiple buttons and PDFs to my site - how would I modify the code? I am guessing I need to change "showPDF" element ID for each button. In the javascript can I just duplicate the entire code and change the element ID to something like "showPDFTwo"?

Report · Aug 13, 2020

You're pretty much correct. I've updated the CodePen to demonstrate multiple buttons. Take a look.

Report · Aug 13, 2020

Thank you Joel, it works!

Report · Aug 13, 2020

Send a link to the final product. I'm super curious to see what you are putting together.