Embed PDFs in webpages using Adobe View not working

Community Beginner ,
Jul 03, 2020 Jul 03, 2020

Copy link to clipboard

Copied

Hi there,

I'm trying to use 'Adobe View' to embed a PDF on a webpage. 

I've followed the process detailed on this page, which leads me to the 'Document Cloud View SDK Demo' page, then I can copy the code generated.

After pasting this into my webpage and previewing it, I can see the Adobe hosted PDF fine, however when I replace the URL under content option with the URL to my own PDF, then reload my web page, I recieve the following error message... "File preview error. File preview not available, please reload to try again"

 

I've tried adding other PDF's hosted in other locations but to no avail. 

Does anyone know how I use my own PDF?

 

I've attached some screen shots of the code working, albeit with the Adobe Preview PDF, and another when it fails after I try to use my own hosted PDF. 

TOPICS
How to, View SDK

Views

1.7K

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

Adobe Employee , Jul 06, 2020 Jul 06, 2020
Hi, Thanks for using View SDK, There might be CORS related problem with the PDF URL you are providing. Could you please go through the official documentation, and look for Cross-origin resource sharing under section "Passing file content"?

Likes

Translate

Translate
Community Beginner ,
Jul 06, 2020 Jul 06, 2020

Copy link to clipboard

Copied

I have the exact same problem. The code generated by the demo doesn't work except with the Adobe hosted PDF. I have used alternative coding using a separate js file and it works fine for the INLINE_VIEW only.

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 ,
Jul 06, 2020 Jul 06, 2020

Copy link to clipboard

Copied

Hi duncara1, 

Thanks for your reply, glad to hear its not just me (...sort of!). Would you be able to share the code that worked for you please?

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 ,
Jul 07, 2020 Jul 07, 2020

Copy link to clipboard

Copied

Hi Seb,
This code with a separate js file does work. You can see the resultant page
here: https://www.njgl.co.uk/2021-league-results.html. Let me know how you
get on with it.
Bob


HTML:







JAVASCRIPT file: league-scores.js:

const viewerConfig = {
embedMode: "IN_LINE"
};
document.addEventListener("adobe_dc_view_sdk.ready", function () {
var adobeDCView = new AdobeDC.View({
clientId: "3499ec2e11a942bdbda3488f063b2c44",
divId: "adobe-dc-view",
});
adobeDCView.previewFile({
content: {
location: {
url: "https://www.njgl.co.uk/scores/2021-League - scores.pdf",
header: [
{
key: "",
value: "",
}
]
},
},
metaData: {
fileName: "2021-League - scores.pdf"
}
}, viewerConfig);
});

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 ,
Jul 20, 2020 Jul 20, 2020

Copy link to clipboard

Copied

Thanks! I used google docs in the end but I'll let you know if I use your code in the future.

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 Employee ,
Jul 06, 2020 Jul 06, 2020

Copy link to clipboard

Copied

Hi, Thanks for using View SDK, There might be CORS related problem with the PDF URL you are providing. Could you please go through the official documentation, and look for Cross-origin resource sharing under section "Passing file content"?

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 ,
Jul 06, 2020 Jul 06, 2020

Copy link to clipboard

Copied

Hi Shubhanshu, 

Thank you for your reply and the link to the documentation.
I can now see that for me the issue is that the PDF from my client is hosted on another domain and it is indeed causing an issue as it's not on the same domain as my webpage. I will try to upload the PDF to my website and try again. 

Thanks, Seb.

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 ,
Feb 03, 2021 Feb 03, 2021

Copy link to clipboard

Copied

Is there any way to use the Adobe Embed API on a Google Blogger hosted blog?  I have trouble seeing any way in which I can host the pdf on the blog for the API to access.  Thanks.

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 ,
Sep 26, 2021 Sep 26, 2021

Copy link to clipboard

Copied

I have the same problem with a bit of a twist. 

 

It works fine on my mac using safari, works fine on my iphone, my android phone. Deployed it and my windows customers are all getting the preview error.

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 Employee ,
Sep 27, 2021 Sep 27, 2021

Copy link to clipboard

Copied

Can you share your website link so we can 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
Community Beginner ,
Sep 28, 2021 Sep 28, 2021

Copy link to clipboard

Copied

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 ,
Sep 28, 2021 Sep 28, 2021

Copy link to clipboard

Copied

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 Employee ,
Sep 29, 2021 Sep 29, 2021

Copy link to clipboard

Copied

LATEST

I tried opening the website on a Windows 10 machine and it worked fine. Could you share more details:

1. Is it specific to any browser. If yes, then please share the browser version.

2. Does it happen on any specific Windows machine or happening on multiple machines?

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