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

PDF Embed API "An error was encountered while processing the file. Some features might not work."

New Here ,
Aug 08, 2020 Aug 08, 2020

Copy link to clipboard

Copied

I'm trying to embed a PDF on my Squarespace site using the API PDF Embed tool.

 

I've spent hours trying to figure this out, but no matter what I do I get this error message. It all seems to stem from the url. When I use a different url/PDF source (Google Drive, a seperate page on my website, etc.) I get another error that wants me to force reload the page. Sending the url to documentcloud.adobe.com has been the closest I've gotten to making this work, but still nothing. Any help is appreciated. 

 

Here's my code:

 

<div id="adobe-dc-view" style="height: 360px; width: 500px;"></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: "e4235918972b49e4982970007f80b8bd",
divId: "adobe-dc-view"
});
adobeDCView.previewFile({
content:{ location: {url: "https://documentcloud.adobe.com/link/track?uri=urn:aaid:scds:US:6d5449b0-b543-494d-ad59-d39a92f4f1da"} },
metaData: { fileName: "Pop Music USA" }
}, {
embedMode: "SIZED_CONTAINER",
showDownloadPDF: false,
showPrintPDF: false
});
});
</script>

 

Screen Shot 2020-08-08 at 9.32.35 AM.png

Views

13.8K

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

Community Expert , Aug 08, 2020 Aug 08, 2020

Your url is not a link to a PDF file. It is a share link that displays a PDF file. The url needs to be a direct link to a PDF which, unfortunately, is not possible when you store the file in Adobe's Document Cloud... ironic... I know... sigh. Anyway, you can construct a direct link to a PDF that is stored in Dropbox. I've created a CodePen here that shows how. Be sure to read the comments to see how to turn the Dropbox link into a direct link.

Votes

Translate

Translate
Community Expert ,
Aug 08, 2020 Aug 08, 2020

Copy link to clipboard

Copied

Your url is not a link to a PDF file. It is a share link that displays a PDF file. The url needs to be a direct link to a PDF which, unfortunately, is not possible when you store the file in Adobe's Document Cloud... ironic... I know... sigh. Anyway, you can construct a direct link to a PDF that is stored in Dropbox. I've created a CodePen here that shows how. Be sure to read the comments to see how to turn the Dropbox link into a direct link.

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 09, 2020 Aug 09, 2020

Copy link to clipboard

Copied

Joel,

THANK YOU. After 10+ hours of bashing my head into the wall...


That did 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
New Here ,
Sep 24, 2020 Sep 24, 2020

Copy link to clipboard

Copied

Hi Joel, can you do this with Google Drive files?

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 Expert ,
Sep 24, 2020 Sep 24, 2020

Copy link to clipboard

Copied

Yes - sort of. Google doesn't let you get or even construct a direct link. You need to use the Google Drive API to get the file contents as a Blob but then you can just pass it to Embed API after converting it to a ByteArray. Same with Box.net

 

I'm actually behind on creating that sample.  

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

Copy link to clipboard

Copied

I would be very much interested in this tutorial/codepen for adapting to Google Drive

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

Copy link to clipboard

Copied

Thank you @Joel_Geraci. This snippet helped me, though after a few modifications; I was able to apply it on my site - ashutoshtripathy.com.

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 ,
Nov 19, 2021 Nov 19, 2021

Copy link to clipboard

Copied

Hi Joel,

 

I am not a coder, so please be gentle.

 

I'm trying to embed the API onto a Squarespace site using a pdf on Dropbox. I'm just getting a blank page. Please help????

 

Here's my code:

 

<div id="adobe-dc-view"></div>
<script type="text/javascript">
document.addEventListener("adobe_dc_view_sdk.ready", function(){ 
var adobeDCView = new AdobeDC.View({clientId: "cdb98ffb676e44ac880d48fed629fc00", divId: "adobe-dc-view"});
adobeDCView.previewFile({
metaData:{fileName: "Alex_FINAL.pdf"}
 
const clientId = "cdb98ffb676e44ac880d48fed629fc00";
const viewerOptions = {
    embedMode: "FULL_WINDOW",
    defaultViewMode: "FIT_PAGE",
    showDownloadPDF: false,
    showPrintPDF: false,
    showLeftHandPanel: true,
    showAnnotationTools: true
 
  };
 
document.addEventListener("adobe_dc_view_sdk.ready", function () {
    var urlToPDF = directLinkFromDropboxLink(dropboxLink);
    var adobeDCView = new AdobeDC.View({
        clientId: clientId, // This clientId can be used for any CodePen example
        divId: "embeddedView"
    });
    adobeDCView.previewFile(
        {
            content: { promise: fetchPDF(urlToPDF) },
            metaData: { fileName: urlToPDF.split("/").slice(-1)[0] }
        },
        viewerOptions
    );
});
 
// Utility Functions:
// Return a Promise that fetches the PDF. 
function fetchPDF(urlToPDF) {
    return new Promise((resolve) => {
        fetch(urlToPDF)
            .then((resolve) => resolve.blob())
            .then((blob) => {
                resolve(blob.arrayBuffer());
            })
    })
}
 
// Converts a standar Dropbox link to a direct download link
function directLinkFromDropboxLink(dropboxLink) {
    return dropboxLink.replace("www.dropbox.com", "dl.dropboxusercontent.com").replace("?dl=0", "");
}
 
// Add arrayBuffer if necessary i.e. Safari
(function () {
    if (Blob.arrayBuffer != "function") {
        Blob.prototype.arrayBuffer = myArrayBuffer;
    }
 
    function myArrayBuffer() {
        return new Promise((resolve) => {
            let fileReader = new FileReader();
            fileReader.onload = () => {
                resolve(fileReader.result);
            };
            fileReader.readAsArrayBuffer(this);
        });
    }
})();
  
</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 ,
Aug 30, 2022 Aug 30, 2022

Copy link to clipboard

Copied

LATEST

I'm trying for hourrs to make this pdf embedding work. I got the demo working (after deleting the < >). But now I'm walking into the next problem. I think it has to do with the dropbox link I use. Could you help me with the right code to use in combination with a dropbox link? I cannot find the comments your talking about in the answer above. Hope you can help 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
New Here ,
Mar 30, 2021 Mar 30, 2021

Copy link to clipboard

Copied

I get the same error if I try to use link to PDF from a different domain. I found in documentation that it might be a problem due to CORS https://www.adobe.io/apis/documentcloud/dcsdk/docs.html?view=view

 

Try to use a direct link to pdf from the same domain. It helped 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
Resources