Embed API using base64 string of PDF

Explorer ,
Jul 30, 2020 Jul 30, 2020

Copy link to clipboard

Copied

 

adobeDCView.previewFile({
      content: base64str,
      metaData:{fileName: "check.pdf"}
    },

 

I have not been successful in using the EmbedAPI when the PDF is a base64hex string. Does the content object of the Preview method support it. If so how? I tried some of the options but it gives content error

Thanks,

TOPICS
PDF Embed API

Views

995

Likes

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 ,
Jul 30, 2020 Jul 30, 2020

Copy link to clipboard

Copied

Can you please send me more information about this

Likes

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 ,
Jul 31, 2020 Jul 31, 2020

Copy link to clipboard

Copied

No, PDF Embed APIs don't support base64 encoded PDF. Please find more information on Embed APIs here - https://www.adobe.io/apis/documentcloud/dcsdk/docs.html. You can however, open file in your application, convert from base 64 and pass converted blob to Embed APIs. Help documentation also describes how to pass file blob. 

Likes

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
Explorer ,
Jul 31, 2020 Jul 31, 2020

Copy link to clipboard

Copied

Hello Brajesh:

 

Thanks for this. In fact, I am doing something similar but I seem stuck at understanding the content promise.

 

Here is what I am doing. I am reading the file (from a secure drive with auth) as a blob. I tried serving it as:

 

adobeDCView.previewFile({
 content: blob,
 metaData: { fileName: "test.pdf" }
 },
 {
   embedMode: "SIZED_CONTAINER"
 });

 

It gives a content error

Likes

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
Explorer ,
Jul 31, 2020 Jul 31, 2020

Copy link to clipboard

Copied

I even tried

 

var filePromise = blob.arrayBuffer();
..
adobeDCView.previewFile({
  content: {promise: filePromise},
  metaData: { fileName: "test.pdf" }
}

This too brought up the adobe viewer with a content error

 

Likes

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
Explorer ,
Jul 31, 2020 Jul 31, 2020

Copy link to clipboard

Copied

I would have thought that the previewfile method would accept a blob as a file object when it is stored in indexed.db of the browser.

 

Here is what I do. I read the PDF from the secured drive and keep it in local storage of the browser. Then, when the user wishes to see the file, I would like to pass it to this function. I tried using the 

var fileObj = URL.createObjectURL(_content). _content be the content in local storage viz. PDF as a blob object. I would have thought that preview would support this. But it did not.

Likes

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 ,
Jul 31, 2020 Jul 31, 2020

Copy link to clipboard

Copied

Hi Raghu,


If you refer the documentation, you will get the snippet of passing file promise. That might help your cause.

https://www.adobe.io/apis/documentcloud/dcsdk/docs.html?view=view

Likes

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
Explorer ,
Jul 31, 2020 Jul 31, 2020

Copy link to clipboard

Copied

I did try ... as you can see above ... because in your example you have written a function that works with array buffers. I did my best in understanding the example and applying it for my use-case. Unfortunately, I was not successfully .., and so currently am using the mozillas PDF.js project that supports what I want.

 

Thanks

Likes

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 ,
Jul 31, 2020 Jul 31, 2020

Copy link to clipboard

Copied

Hi Raghu, 

You are not passing the filePromise correctly in your snippet. It should be a Javascript Promise https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise. If you check our documentation and snippet given there, you will get to know the difference.

In your case, 

 

var filePromise = Promise.resolve(ArrayBuffer);
..
adobeDCView.previewFile({
  content: {promise: filePromise},
  metaData: { fileName: "test.pdf" }
}

 


Thanks,

Likes

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
Explorer ,
Jul 31, 2020 Jul 31, 2020

Copy link to clipboard

Copied

Thanks Shubhanshu Dixit for your quick response. When I try there is a loading icon that appears and they it says 100% document read and then a message: "An error occured". Nothing is showing up in console.

 

Screenshot from 2020-07-31 18-28-09.png

Like the above. When I click OK it just shows a blank screen

Likes

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 ,
Jul 31, 2020 Jul 31, 2020

Copy link to clipboard

Copied

Hi Raghu, 

Please use the below snippet for using PDF Embed API, when your PDF is base64

<div id="adobe-dc-view"></div>
<script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
<script type="text/javascript">
	function base64ToArrayBuffer(base64) {
// Refer the function implementation in link provided.
	}
	document.addEventListener("adobe_dc_view_sdk.ready", function(){ 
		var adobeDCView = new AdobeDC.View({clientId: "<YOUR_CLIENT_ID>", divId: "adobe-dc-view"});
		adobeDCView.previewFile({
			content:{ promise: Promise.resolve(base64ToArrayBuffer(base64str)) },
			metaData:{fileName: "check.pdf"}
		}, {});
	});
</script>

 https://stackoverflow.com/questions/21797299/convert-base64-string-to-arraybuffer

PS: I checked with a sample PDF and it's working fine. I hope the same for you 

Likes

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 Community Professional ,
Jul 31, 2020 Jul 31, 2020

Copy link to clipboard

Copied

I've posted a working CodePen here.

Likes

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
Explorer ,
Jul 31, 2020 Jul 31, 2020

Copy link to clipboard

Copied

LATEST

Thanks Joel. That looks helpful. It's rather late this part of the world. I will give this a try in my web component tomorrow. 

Likes

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