1

I have an iframe in which I want to put a preview of my pdf document hosted in firebase storage through google docs viewer. I am creating the html view in javascript dynamically and adding it by jquery's ('.someClass').html() method.

I tried to plug in the download url of the document to the iframe directly and it works just fine and displays the preview.

But I can't get it to display the preview through google docs.

What I meant is that this works just fine:

....making  my html on the fly in javascript

myHtml+='<iframe src="'+downloadUrlFirebaseStorage+'" width="100%"   frameborder="0"/>'

....making remaining  rest of my html on the fly in javascript

$('.someClass').html(myHtml);

But this gets me an error:

....making  my html on the fly in javascript

myHtml+='<iframe src="https://docs.google.com/viewer?url='+downloadUrlFirebaseStorage+'&embedded=true" width="100%"   frameborder="0"/>'

....making remaining  rest of my html on the fly in javascript

$('.someClass').html(myHtml);

The error I get is this: 

Refused to display 'https://docs.google.com/gview?url=https://firebasestorage.googleapis.com/v0/b/habiganjmedicalcollege.appspot.com/o/documents%2FSampleDoc.pdf?alt=media&token=51df7c93-0c59-46a4-9229-267bc527705b%26embedded=true' in a frame because it set 'X-Frame-Options' to 'sameorigin'
abu obaida
  • 75
  • 1
  • 10

2 Answers2

3

I just had to encode the URI and change the '%26' to '&':

var encodedUrl = encodeURIComponent(downloadUrlFirebaseStorage);

....making  my html on the fly in javascript

myHtml+='<iframe src="https://docs.google.com/viewer?url='+encodedUrl+'&embedded=true" width="100%"   frameborder="0"/>'

....making remaining  rest of my html on the fly in javascript

$('.someClass').html(myHtml);
abu obaida
  • 75
  • 1
  • 10
0

try this :

<iframe src="https://drive.google.com/viewerng/viewer?url=https://library.osu.edu/assets/Documents/SEL/QuickConvertWordPDF.pdf?pid=explorer&efh=false&a=v&chrome=false&embedded=true" width="400px" height="300px"  />

and go to Link

  • it does not work, unfortunately. Gives me "runtime.lastError: Could not establish connection. Receiving end does not exist" error in console. I tried like this: – abu obaida May 31 '19 at 06:55