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

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

7.1K

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

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
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. 

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
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

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
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

 

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
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.

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
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

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
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

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
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,

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
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

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
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 

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

Copy link to clipboard

Copied

I've posted a working CodePen here.

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

Copy link to clipboard

Copied

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. 

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 ,
Jul 28, 2021 Jul 28, 2021

Copy link to clipboard

Copied

I tried replicating this, but it does not load the viewer at all. Neither an I getting any errors or console logs. 
Am I doing something wrong?
The viewer was working perfectly for the URL
@Shubhanshu Dixit 
@Joel_Geraci  - your codepen is not showing the viewer

 

var resp : {"content": "JVBERi0xLjMKJcTl8uXrp/Og0MTGCjQgMCBvYmoKPDwgL0xlbmd0aCA1IDAgUiAvRmlsdGVyIC9GbGF0ZURlY29kZSA+PgpzdHJlYW0KeAGtnOtv5MaRwL/PX8HLl5OANc3345AEcBwfcsZdgtgCcsBtPmhHs9bauzOyHnaMQ/....."
};

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;
}  

 var previewFilePromise = adobeDCView.previewFile(
       {
        content: { promise: Promise.resolve(base64ToArrayBuffer(resp.content)) },
          metaData: {fileName: "Bodea Brochure.pdf", id: "12345ghb"}
       }, {
         enableSearchAPIs:true,
       });

 

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 ,
Jul 28, 2021 Jul 28, 2021

Copy link to clipboard

Copied

LATEST

@vedika0101  - I'm seeing the viewer just fine in Chrome. What browser are you using? 

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