Addobe PDF embed API js

Explorer ,
Aug 11, 2021 Aug 11, 2021

Copy link to clipboard

Copied

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

 

TOPICS
PDF Embed API , PDF Services API

Views

700

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

correct answers 1 Correct answer

Community Beginner , Aug 18, 2021 Aug 18, 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.

Likes

Translate

Translate
Community Beginner ,
Aug 17, 2021 Aug 17, 2021

Copy link to clipboard

Copied

@droliff 

 

Just change your content location correctly.

Currently its not configured properly and returning 404

 

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
Explorer ,
Aug 18, 2021 Aug 18, 2021

Copy link to clipboard

Copied

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>

 

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
Community Beginner ,
Aug 18, 2021 Aug 18, 2021

Copy link to clipboard

Copied

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.

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
Explorer ,
Aug 18, 2021 Aug 18, 2021

Copy link to clipboard

Copied

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

 

DRC-photologo-300px.png  

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
Explorer ,
Aug 19, 2021 Aug 19, 2021

Copy link to clipboard

Copied

for anyone else who might be having this issue...

 

my webserver provider mddhosting.com added some code to the .htaccess file on my server which fixed

the CORS issue. It looks as though this is the code that they added:

# BEGIN WordPress
# The directives (lines) between "BEGIN WordPress" and "END WordPress" are
# dynamically generated, and should only be modified via WordPress filters.
# Any changes to the directives between these markers will be overwritten.
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress

 

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
Explorer ,
Aug 19, 2021 Aug 19, 2021

Copy link to clipboard

Copied

LATEST

i spoke too soon on this .htaccess fix. it fixed the issue for local access but I was still unable to open the pdf on my website page.

 

Access to fetch at 'https://viewlicense.adobe.io/viewsdklicense/jwt' from origin 'https://dennisroliff.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
viewlicense.adobe.io/viewsdklicense/jwt:1 Failed to load resource: net::ERR_FAILED

 

will look into this further. so frustrating.

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
Resources