Please help with JS and PDF Embed API

New Here ,
Aug 12, 2020 Aug 12, 2020

Copy link to clipboard

Copied

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

 

Views

250

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Aug 12, 2020 Aug 12, 2020

Copy link to clipboard

Copied

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

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Aug 12, 2020 Aug 12, 2020

Copy link to clipboard

Copied

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>

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Aug 12, 2020 Aug 12, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Aug 12, 2020 Aug 12, 2020

Copy link to clipboard

Copied

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. 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Aug 13, 2020 Aug 13, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Aug 13, 2020 Aug 13, 2020

Copy link to clipboard

Copied

Thank you so much Joel! It's working!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Aug 13, 2020 Aug 13, 2020

Copy link to clipboard

Copied

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"?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Aug 13, 2020 Aug 13, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Aug 13, 2020 Aug 13, 2020

Copy link to clipboard

Copied

Thank you Joel, it works!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Aug 13, 2020 Aug 13, 2020

Copy link to clipboard

Copied

LATEST

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines