Embed Azure blob pdf file in iframe with google gview

Question

I have pdf file stored in azure blob service at this URL.

I can download it normally from browser from this URL.

Now i want to embed this pdf into html page using google gview.

I have typed:

<iframe src="https://drive.google.com/viewerng/viewer?url=https://hoxrostorage.blob.core.windows.net/hoxro/Matter_545/266408d1-309c-4258-808e-6bccdfc840c8.pdf?sv=2015-04-05&sr=b&sig=x8VhYOUGSNp9AJfV%2BT%2BybcBkPQknqNXdolq4Xo0ZAXU%3D&se=2016-06-29T20%3A58%3A52Z&sp=r&rsct=application%2Fpdf&embedded=true" width="400px" height="300px"  />

It shows me:

Please note:

In Azure blob storage my pdf's content type is set to application/pdf

I have already checked so many post's from many location but not able to come to any conclusion.

Could anyone please point me to the right direction, that what is going on here?

Answer 1

Not sure if you realized it, but your url contains a querystring, which in turn contains a querystring. A snippet:

src="https://drive.google.com/viewerng/viewer?
url=https://hoxrostorage.blob.core.windows.net/hoxro/Matter_545/266408d1-309c-4258-808e-6bccdfc840c8.pdf?
sv=2015-04-05&sr=b&sig=x8VhYOUGSNp9AJfV%2BT%2BybcBkPQknqNXdolq4Xo0ZAXU%3D&se=2016-06-29T20%3A58%3A52Z&sp=r&rsct=application%2Fpdf
&embedded=true"

Prior to &embedded=true, the rest is the querystring for your blob (which in turn contains a querystring to deal with the Shared Access Signature).

You'll need to encode the embedded blob url , so that the URL parses correctly.

I don't know if that will solve your embedded-preview problem, but at least it will correct your URL formatting.

Answer 2

this code is working for me

<iframe src="https://docs.google.com/viewer?embedded=true&url=<<previewUri>>" 
        frameborder="no" style="width:100%;height:500px"></iframe>

var blobUri=$"{blob.Uri}{sasToken}";

var previewUri = Uri.EscapeDataString(blobUri);

this previewUri will use in the iframe

View result