How to display a pdf document within an iframe by google docs viewer stored in firebase storage?

问题

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'

回答1:

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

回答2:

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

来源：https://stackoverflow.com/questions/56388987/how-to-display-a-pdf-document-within-an-iframe-by-google-docs-viewer-stored-in-f