How to create a PDF viewer template

New Here ,
Mar 13, 2021 Mar 13, 2021

Copy link to clipboard

Copied

I have many PDF documents for my website.

 

Instead of creating a seprate html page for each of them, I wish to use one html page, and as a visitor clicks on any link, that specific pdf document name will be passed into the script to invoke a view

 

How can I do that? Below is my page sample

Thanks

 

<!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"/>
</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: "MY KEY", divId: "adobe-dc-view"});
adobeDCView.previewFile(
{
// content: {location: {url: "https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf"}},
content: {location: {url: "https://squadron-125.org.il/mypdf/bugi.pdf"}},
// metaData: {fileName: "Bodea Brochure.pdf"}
metaData: {fileName: "bugi.pdf"}
});
});
</script>

</body>
</html>

Views

80

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 Community Professional ,
Mar 13, 2021 Mar 13, 2021

Copy link to clipboard

Copied

I have a working example of what you are looking to do at this CodePen.

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 ,
Mar 21, 2021 Mar 21, 2021

Copy link to clipboard

Copied

Yes, all OK now and I have a template that works the way I wanted it

 

I have one problem left. Some of the PDF documents are large and take a long time to lad into view

Is there a way to make it load asynchronuosly - load the first page into vie and continue loading the rest of the pages in the background?

 

If so, how?

 

Thanks again

Alex

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
LEGEND ,
Mar 21, 2021 Mar 21, 2021

Copy link to clipboard

Copied

That is "page at a time loading", which Adobe invented over 20 years ago to solve this problem. Unfortunately, the new online services have chosen to ignore this wonderful invention, presumably because all the developers involved have incredibly fast internet, unlike much of the rest of the world... ! The best you can do is place a "document loading" sort of message in your page first. 

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 Community Professional ,
Mar 21, 2021 Mar 21, 2021

Copy link to clipboard

Copied

At this time, Embed API needs to download the entire file before rendering it but I have another CodePen here that shows how to display your own loading screen and then show the PDf only once the is ready. 

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 ,
Mar 21, 2021 Mar 21, 2021

Copy link to clipboard

Copied

Hi Joel,

 

This option also takes a long time to load 30 pages.

Is there any option (embed or otherwise) to just load a page at a time, when the visitor click Next on to control bar?

 

Thanks again

Alex

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 Community Professional ,
Mar 22, 2021 Mar 22, 2021

Copy link to clipboard

Copied

LATEST

Not at this time.

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