Please help with JS and PDF Embed API

10 replies
1916 views
Translate

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 is closed to new replies. Start a new post to keep the conversation going.

Joel Geraci

Community Expert

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

Translate

A

Anonymous

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>

Translate

Joel Geraci

Community Expert

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.

Translate

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.