Addobe PDF embed API js

Report · Aug 11, 2021

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

Report · Aug 17, 2021

@droliff

Just change your content location correctly.

Currently its not configured properly and returning 404

Report · Aug 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>

Report · 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.

Report · Aug 18, 2021

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

Report · Aug 19, 2021

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

Report · Aug 19, 2021

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.

Addobe PDF embed API js

1 Correct answer

Photos