Skip to main content
A
Anonymous
August 12, 2020
Question

Please help with JS and PDF Embed API

  • August 12, 2020
  • 1 reply
  • 1892 views

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);
}

 

    This topic has been closed for replies.

    1 reply

    Joel Geraci
    Community Expert
    Joel GeraciCommunity Expert
    Community Expert
    August 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
})

     

    A
    Anonymous
    August 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>

     

    Joel Geraci
    Community Expert
    Joel GeraciCommunity Expert
    Community Expert
    August 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.

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices