Skip to main content
Participating Frequently
August 11, 2021
Answered

Addobe PDF embed API js

  • August 11, 2021
  • 1 reply
  • 3602 views

Hello all,

I am attempting to utilize Adobe Document Services pdf Embed API for viewing pdf documents on my website. Following is what I've done so far.
However, as noted below, when I plug in my information, the pdf, which is on my web server, does not open either locally or on the Wordpress web page
that I created on my website. Can anyone see where things are going wrong when I plug my info into the js code?


I added this code to my website header. I must have seen somewhere in the documentation to do this.

 

 

 

<!-- Adobe PDF viewer -->
<script src="[URL]https://documentcloud.adobe.com/view-sdk/main.js[/URL]"></script>

 


adobe’s original code, which when I create an html page with Brackets works locally on my iMac and opens their sample pdf

 

 

 

[I]<!--Get the samples from https://www.adobe.com/go/pdfembedapi_samples-->[/I]
2<!DOCTYPE html>
3<html>
4<head>
5 <title>Adobe Document Services PDF Embed API Sample</title>
6 <meta charset="utf-8"/>
7 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
8 <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1"/>
9</head>
10<body style="margin: 0px">
11 <div id="adobe-dc-view"></div>
12 <script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
13 <script type="text/javascript">
14 document.addEventListener("adobe_dc_view_sdk.ready", function()
15 {
16 var adobeDCView = new AdobeDC.View({clientId: "<YOUR_CLIENT_ID>", divId: "adobe-dc-view"});
17 adobeDCView.previewFile(
18 {
19 content: {location: {url: "https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf"}},
20 metaData: {fileName: "Bodea Brochure.pdf"}
21 });
22 });
23 </script>
24</body>
25</html>

 


my info ( client ID line 16, location URL line 19 and fileName line 20 ) added to the adobe js for pdf viewer, for some reason this code does not open my pdf in the same html page that I created with Brackets application, locally on my iMac

 

[I]<!--Get the samples from https://www.adobe.com/go/pdfembedapi_samples-->[/I]
2<!DOCTYPE html>
3<html>
4<head>
5 <title>Adobe Document Services PDF Embed API Sample</title>
6 <meta charset="utf-8"/>
7 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
8 <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1"/>
9</head>
10<body style="margin: 0px">
11 <div id="adobe-dc-view"></div>
12 <script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
13 <script type="text/javascript">
14 document.addEventListener("adobe_dc_view_sdk.ready", function()
15 {
16 var adobeDCView = new AdobeDC.View({clientId: "[I]9e027e843aed49019268cbfb1f806c1d[/I]", divId: "adobe-dc-view"});
17 adobeDCView.previewFile(
18 {
19 content: {location: {url: "[I]https://dennisroliff.com/inspiration.pdf[/I]"}},
20 metaData: {fileName: “inspiration.pdf"}
21 });
22 });
23 </script>
24</body>
25</html>

 

Does anyone see where things are going wrong with my embed?

 

Thanks.

 

Dennis

 

Correct answer sabarishchokkalingom

Hey @droliff 

Your code is absolutely perfect.

You are just having a CORS issue for the PDF file requested.

I tried using "https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf" file and your code works perfectly.

1 reply

Participating Frequently
August 18, 2021

@droliff 

 

Just change your content location correctly.

Currently its not configured properly and returning 404

 

droliffAuthor
Participating Frequently
August 18, 2021

Hi @sabarishchokkalingom ,

 

Thanks for the response.

I'm not sure how you brought up the info in your screenshot. I've uploaded the pdf straight into a directory in my wordpress site and copied the location URL and plugged it in and made sure the 'Filename:' ( line 22 ) was correct.

I'm still getting 'File preview error'. I'm sure my clientId number is correct. Here is the code:

 

<!--Get the samples from https://www.adobe.com/go/pdfembedapi_samples-->
<!DOCTYPE html>
<html>
<head>
 <title>Adobe Document Services PDF Embed API Sample</title>
 <meta charset="utf-8"/>
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
 <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1"/>
    <!-- Adobe PDF viewer -->
	<script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
</head>
<body style="margin: 0px">
 <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: "9e027e843aed49019268cbfb1f806c1", divId: "adobe-dc-view"});
        adobeDCView.previewFile(
       {
          content:   {location: {url: "https://dennisroliff.com/drp-wordpress-site/wp-content/uploads/2021/08/inspiration.pdf"}},
          metaData: {fileName: "inspiration.pdf"}
       });
    });
 </script>
</body>
</html>

 

droliffAuthor
Participating Frequently
August 19, 2021

Hey @droliff 

Your code is absolutely perfect.

You are just having a CORS issue for the PDF file requested.

I tried using "https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf" file and your code works perfectly.


Hi @sabarishchokkalingom ,

 

Thanks for the input. So a CORS issue would be on my webservice provider side correct? Is there a way

that I can correct this? Perhaps I should talk to tech support at MDDHosting . It wouldn't be the first time

I've had server issues. At least now I know where to start in order to solve the issue.

 

Thanks again.

 

Dennis