如何通过存储在 Firebase 存储中的谷歌文档查看器在 iframe 中显示 pdf 文档？

Question

我有一个 iframe，我想通过 google docs viewer 预览托管在 firebase 存储中的 pdf 文档。我在javascript中动态创建html视图并通过jquery的('.someClass').html()方法添加它。

我尝试将文档的下载 url 直接插入 iframe，它工作正常并显示预览。

但我无法通过谷歌文档显示预览。

我的意思是这很好用：

....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'

Answer 1

我只需要对 URI 进行编码并将 '%26' 更改为 '&'：

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

Answer 2

试试这个：

<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"  />

然后转到Link