Highlighted

Embed PDFs in webpages using Adobe View not working

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

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

Topics

How to, View SDK

Views

183

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

Embed PDFs in webpages using Adobe View not working

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

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

Topics

How to, View SDK

Views

184

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
Jul 03, 2020 0
New Here ,
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
Reply
Loading...
Jul 06, 2020 1
Community Beginner ,
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
Reply
Loading...
Jul 06, 2020 0
New Here ,
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
Reply
Loading...
Jul 07, 2020 1
SebDrew LATEST
Community Beginner ,
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
Reply
Loading...
Jul 20, 2020 0
Adobe Employee ,
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
Reply
Loading...
Jul 06, 2020 1
Community Beginner ,
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
Reply
Loading...
Jul 06, 2020 0