Adobe Embed API showing 2 files side by side

adobe-embed-api-showing-2-files-side-by-side.markdown

Adobe Embed API showing 2 files side by side

This Pen uses the free Adobe Embed API to display a PDF file in an HTML page.

The Adobe Embed API delivers JavaScript-based interfaces designed to help developers harness the power of integrated PDF in their web content. With the ability to natively display PDF in an environment you control, you no longer need to rely on Reader download buttons, 3rd party apps, and PDF viewers that care little for PDF standards.

Get the Adobe Embed API here: https://www.adobe.io/apis/documentcloud/dcsdk/pdf-embed.html

A Pen by Joel Geraci on CodePen.

License.

index.html

<div class="grid-container">
  <div id="leftPDF" class="grid-item"></div>
  <div id="rightPDF" class="grid-item"></div> 
</div>
  <script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>

script.js

/* This pen shows how to use the Embed API to display two PDF files side by side. */

var leftUrlToPDF =
  "https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf";

var rightUrlToPDF =
  "https://documentcloud.adobe.com/view-sdk-demo/PDFs/Overview.pdf";

const viewerOptions = {
  embedMode: "SIZED_CONTAINER",
  defaultViewMode: "FIT_PAGE",
  showDownloadPDF: true,
  showPrintPDF: true,
  showLeftHandPanel: true,
  showAnnotationTools: true
};

const clientID = "e800d12fc12c4d60960778b2bc4370af";

document.addEventListener("adobe_dc_view_sdk.ready", function () {
  var leftEmbeddedView = new AdobeDC.View({
    clientId: clientID,
    divId: "leftPDF"
  });
  var rightEmbeddedView = new AdobeDC.View({
    clientId: clientID,
    divId: "rightPDF"
  });

  previewPDF(leftEmbeddedView, leftUrlToPDF);
  previewPDF(rightEmbeddedView, rightUrlToPDF);
});

function previewPDF(embeddedView, pdfURL) {
  fetch(pdfURL)
    .then((res) => res.blob())
    .then((blob) => {
      embeddedView.previewFile(
        {
          // The file content
          content: { promise: Promise.resolve(blob.arrayBuffer()) },
          metaData: { fileName: pdfURL.split("/").slice(-1)[0] }
        },
        viewerOptions
      );
    });
}

// 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);
    });
  }
})();

style.css

body {
  width: 100%;
  height: calc(100vh - 20px);
  overflow-x: hidden;
  margin: 0;
  background-color: red;
}
.grid-container {
  display: grid;
  grid-template-columns: auto auto;
  height:100%;
  margin:10px;
  column-gap:10px;
}