kiritodeveloper/adobe-pdf-embed-api-using-base64-string-of-the-pdf.markdown

## adobe-pdf-embed-api-using-base64-string-of-the-pdf.markdown

      
    Raw
  

              adobe-pdf-embed-api-using-base64-string-of-the-pdf.markdown
            
          
    Adobe PDF Embed API using base64 string of the PDF

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 id='adobe-dc-view'></div>
<script type='text/javascript' src='https://documentcloud.adobe.com/view-sdk/main.js'></script>

## script.js
const urlToBase64PDF =
  "https://assets.codepen.io/4479906/bodea-summary.pdf.base64";
const clientID = "e800d12fc12c4d60960778b2bc4370af";

const viewOptions = {
  embedMode: "FULL_WINDOW",
  defaultViewMode: "FIT_PAGE",
  showAnnotationTools: false,
  showPrintPDF: false
};

function base64ToArrayBuffer(base64) {
  var bin = window.atob(base64);
  var len = bin.length;
  var uInt8Array = new Uint8Array(len);
  for (var i = 0; i < len; i++) {
    uInt8Array[i] = bin.charCodeAt(i);
  }
  return uInt8Array.buffer;
}

  document.addEventListener("adobe_dc_view_sdk.ready", function () {
    $.get(
      urlToBase64PDF,
      function (pdfData) {
        var adobeDCView = new AdobeDC.View({
          clientId: clientID,
          divId: "adobe-dc-view"
        });
        adobeDCView.previewFile(
          {
            // convert the Base64 encoded PDF and convert it to an ArrayBuffer
            // and pass it as a Promise
            content: { promise: Promise.resolve(base64ToArrayBuffer(pdfData)) },
            // The filename name to display in the View SDK UI
            // and also used as the filename of the PDF when downloaded
            metaData: { fileName: "Bodea Summary.pdf" }
          },
          viewOptions
        );
      },
      "text"
    )
  });

## scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

## style.css
body {
  width: 100%;
  height: 100vh;
  overflow-x: hidden;
  margin: 0;
}
	<div id='adobe-dc-view'></div>
	<script type='text/javascript' src='https://documentcloud.adobe.com/view-sdk/main.js'></script>
	const urlToBase64PDF =
	"https://assets.codepen.io/4479906/bodea-summary.pdf.base64";
	const clientID = "e800d12fc12c4d60960778b2bc4370af";

	const viewOptions = {
	embedMode: "FULL_WINDOW",
	defaultViewMode: "FIT_PAGE",
	showAnnotationTools: false,
	showPrintPDF: false
	};

	function base64ToArrayBuffer(base64) {
	var bin = window.atob(base64);
	var len = bin.length;
	var uInt8Array = new Uint8Array(len);
	for (var i = 0; i < len; i++) {
	uInt8Array[i] = bin.charCodeAt(i);
	}
	return uInt8Array.buffer;
	}

	document.addEventListener("adobe_dc_view_sdk.ready", function () {
	$.get(
	urlToBase64PDF,
	function (pdfData) {
	var adobeDCView = new AdobeDC.View({
	clientId: clientID,
	divId: "adobe-dc-view"
	});
	adobeDCView.previewFile(
	{
	// convert the Base64 encoded PDF and convert it to an ArrayBuffer
	// and pass it as a Promise
	content: { promise: Promise.resolve(base64ToArrayBuffer(pdfData)) },
	// The filename name to display in the View SDK UI
	// and also used as the filename of the PDF when downloaded
	metaData: { fileName: "Bodea Summary.pdf" }
	},
	viewOptions
	);
	},
	"text"
	)
	});
	body {
	width: 100%;
	height: 100vh;
	overflow-x: hidden;
	margin: 0;
	}