如何通过Firebase存储中存储的Google文档查看器在iframe中显示pdf文档? [英] How to display a pdf document within an iframe by google docs viewer stored in firebase storage?
问题描述
我有一个iframe,我想在其中通过google docs查看器预览托管在Firebase存储中的pdf文档.我正在用javascript动态创建html视图,并通过jquery的('.someClass').html()
方法添加它.
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.
我试图将文档的下载URL直接插入iframe,它可以正常工作并显示预览.
I tried to plug in the download url of the document to the iframe directly and it works just fine and displays the preview.
但是我无法通过Google文档显示预览.
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);
但这给我一个错误:
....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);
我得到的错误是:
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'
推荐答案
我只需要编码URI并将'%26'更改为'&':
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);
这篇关于如何通过Firebase存储中存储的Google文档查看器在iframe中显示pdf文档?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!