Skip to main content
D
DylanGG
Participant
July 23, 2020
Question

embedding PDF from document cloud using view sdk., but pdf fails to load in my website

  • July 23, 2020
  • 1 reply
  • 736 views

So I have got my domain setup with a client ID, used sample code from the quickstart copy-it-run-it page. The only thing I am changing in the code (that works just fine from my local machine with the sample Bodea Brochure or Benchmark pdf files) is the URL to my document cloud PDF, the pdf fileName, and the clientId (api key).

{location: {url: "https://documentcloud.adobe.com/link/track?uri=urn:aaid:scds:US:a71b7f93-830a-4a23-ba33-246ae31db4e7/EmployeeHandbook_compressed.pdf"}},
          metaData: {fileName: "EmployeeHandbook_compressed.pdf"}

Note that in the above sample - for the shareable link I generate in document cloud, it doesn't actually have a /EmployeeHandbook_compressed.pdf at the end, but from what I have seen it looks like that is supposed to be attached to the end.

Got my code on my website, and it looks like it will bring the adobe viewer up, but instead it gives me an adobe error like file preview error or failed to load. It will sit with the spinning blue circle and say Opening Document 0% and then pepper in failed to load previer errors.

The PDF I am using is large, BUT, I tried it all with a 3KB super simple PDF and got the same results.

Not sure where to go here, so any help is appreciated, also I am pretty inexerprienced so the more you spell it out for me, the more I will shower praises upon you!


    This topic has been closed for replies.

    1 reply

    Joel Geraci
    Community Expert
    Joel GeraciCommunity Expert
    Community Expert
    July 23, 2020

    That link isn't to a PDF file. It's a Share Link that goes to a presentation of the PDF file that was shared. The location.url needs to be a link to an actual PDF file. To test if your link is to a PDF file, right-click on the link and select "Save As", if you get a PDF when it downloads, that's the right kind of link to use.

      D
      DylanGGAuthor
      Participant
      July 23, 2020

      Ok gotcha, thanks. So if I upload a PDF file to my document cloud, how do I get a link to the actual file rather than the share link?

      Joel Geraci
      Community Expert
      Joel GeraciCommunity Expert
      Community Expert
      July 23, 2020

      There currently is no direct download link for Adobe Document Cloud files. You might consider using Box.net or Dropbox if you can't host the PDF on your own server. If you use Dropbox, get the link to the PDF file as it is viewed in the Dropbox UI then...

      1. Change “www.dropbox.com” to “dl.dropboxusercontent.com”
      2. Delete the “?dl=0” at the end of the link

       

      Because the PDF file that you are trying to view is in a different domain than the one you are credentialed for, you'll need to use a Promise for the content rather than a url. It might look something like the code below. You can see a running example and try it with your own Dropbox files at this CodePen.

       

       

      document.addEventListener("adobe_dc_view_sdk.ready", function () {
    fetch("https://dl.dropboxusercontent.com/s/ai5fqyxkpkxn1zv/bodea-survey.pdf")
        .then((res) => res.blob())
        .then((blob) => {
            var adobeDCView = new AdobeDC.View({
                clientId: "5ed235db8754477390ec02f26d6dba8a",
                divId: "embeddedView"
            });
            adobeDCView.previewFile(
                {
                    content: { promise: Promise.resolve(blob.arrayBuffer()) },
                    metaData: { fileName: "bodea-survey.pdf" }
                },
                embedOptions
            );
        })
});

       

       

       

       

       

       

       

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices