• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
1

Displaying Multiple PDFs on the Same Page

Community Beginner ,
Feb 19, 2021 Feb 19, 2021

Copy link to clipboard

Copied

I have a page containing five policies, each one a PDF, and I want to display them in an accordion where expanding each one brings up the corresponding embedded PDF using PDF Embed API.  I've tried changing the name of the variable and the ID of the div, but only the first PDF shows, and the rest are blank.

 

How is this accomplished?

Views

2.0K

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

Copy link to clipboard

Copied

Did you figure this out?

Votes

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

Copy link to clipboard

Copied

No, I had to use a different PDF embedder.  Shame because Adobe's is so nice.  Wish someone would help a girl out lol.

Votes

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

Copy link to clipboard

Copied

Hi, Thanks for trying out PDF Embed API. Ideally, it should work by creating a new object of AdobeDC.View for each of the PDFs. It would be great for us to debug if you can share your snippet or website.

Votes

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

Copy link to clipboard

Copied

I'm using the standard recommended code:

<div id="adobe-dc-view" style="width: 100%;"></div>
<p><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: "--client id removed-", divId: "adobe-dc-view"});
    adobeDCView.previewFile({
      content:{location: {url: "<span id="tb-shortcode-6" data-tb-shortcode-id="6" class="tb-fields-and-text-shortcode-render tb-fields-and-text-shortcode-render-types"><!-- TBINNERSTART 6 -->Loading…<!-- TBINNEREND 6 --></span>"}},
      metaData:{fileName: "Committee File"}
    }, {embedMode: "IN_LINE"});
  });
  </script>

I just need to know how to manipulate the code to make multiple iterations work on one page.  How do I create a new object?

 

Thanks for your help. 

Votes

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

Copy link to clipboard

Copied

The code I actually used didn't have the shortcode as the URL.  It just had the direct path to each file. As in:

<div id="adobe-dc-view" style="width: 100%;"></div>
<p><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: "-client-id-removed-", divId: "adobe-dc-view"});
    adobeDCView.previewFile({
      content:{location: {url: "-url-to-file-"}},
      metaData:{fileName: "Committee File"}
    }, {embedMode: "IN_LINE"});
  });
  </script>

Votes

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

Copy link to clipboard

Copied

I got it to work with multiple instances in a ginle page.

 

Change the id to be unique:

adobe-dc-view

Becomes

adobe-dc-view-1

 Then update the var in each instance to match the new unique id 

var adobeDCView = new AdobeDC.View({clientId: "-client-id-removed-", divId: "adobe-dc-view-1"});

 

Votes

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

Copy link to clipboard

Copied

Thank you I will give this a try and post what happens.

Votes

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

Copy link to clipboard

Copied

Just to confirm, this DOES work.  My accordion plugin is acting a bit finicky with it, but that's another matter.  Thanks for the help!

Votes

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 ,
Aug 24, 2021 Aug 24, 2021

Copy link to clipboard

Copied

Thank you! This just saved me hours of troubleshooting. Super appreciate your followup!!

Votes

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 ,
Oct 05, 2022 Oct 05, 2022

Copy link to clipboard

Copied

Thank you!! I had been struggling to figure this out all day, and your post saved me!

Votes

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 ,
Jun 17, 2021 Jun 17, 2021

Copy link to clipboard

Copied

Surely there is a way to pass it dynamically instead of having to create one for every pdf? What if there are many pdfs on a page..in my case I wanted to have a list of pdfs that will open in a modal when clicked, but not have to create this code for each one.  I'm not sure how to pass the pdf url..but I'm thinking there must be some way to do it.

Votes

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
Feb 11, 2023 Feb 11, 2023

Copy link to clipboard

Copied

LATEST

Button to trigger the popup of a modal.

 

 

<button type="button" class="btn btn-success" onclick="openModal('http://example.com/sample.pdf', 'sample.pdf');">

 

 

Use a looping logic in the HTML view to load multiple buttons for multiple file support.

 

On click event of one of the buttons, pass the URL endpoint, and the File name of the PDF document as arguments to openModal method

 

 

 

<script>
    var viewer;

    function openModal(endpoint, name) {
        // Show the modal
        document.getElementById("modal_id").style.display = "block";

        viewer = new AdobeDC.View({
            clientId: 'XXX-XXX-XXX,
            divId: "adobe-dc-view"
        });

        // Load the PDF document into the viewer
        viewer.previewFile({
            content: {
                location: {
                    url: endpoint
                }
            },
            metaData: {
                fileName: name
            }
        }, {
            embedMode: "SIZED_CONTAINER",
            showFullScreen: true
        });
    }

    function closeModal() {
      // Hide the modal
      document.getElementById("modal_id").style.display = "none";

      // Destroy the viewer
      viewer.destroy();
    }
  </script>

 

 

The function initializes the Adobe Document Cloud View SDK, loads the PDF document into the viewer, and displays the modal. When you click the "Close" button in the modal, the closeModal method is called, which hides the modal and destroys the viewer

Votes

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