如何通过Firebase存储中存储的Google文档查看器在iframe中显示pdf文档?

问题描述：

我有一个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文档?

相关推荐