使用google gview在iframe中嵌入Azure blob pdf文件

时间:2016-05-19 20:55:56

标签: azure pdf iframe google-drive-api azure-storage-blobs

我将pdf文件存储在this URL的azure blob服务中。

我可以通过此网址从浏览器正常下载。

现在我想使用google gview将这个pdf嵌入到html页面中。

我输入了

<iframe src="https://drive.google.com/viewerng/viewer?url=https://hoxrostorage.blob.core.windows.net/hoxro/Matter_545/266408d1-309c-4258-808e-6bccdfc840c8.pdf?sv=2015-04-05&sr=b&sig=x8VhYOUGSNp9AJfV%2BT%2BybcBkPQknqNXdolq4Xo0ZAXU%3D&se=2016-06-29T20%3A58%3A52Z&sp=r&rsct=application%2Fpdf&embedded=true" width="400px" height="300px"  />

它告诉我:

enter image description here

请注意:

在Azure blob存储中,我的pdf的内容类型设置为 application / pdf

enter image description here

我已经从很多地方检查了很多帖子,但无法得出任何结论。

有谁能请我指出正确的方向,这是怎么回事?

2 个答案:

答案 0 :(得分:3)

不确定你是否意识到它,但是你的url包含一个查询字符串,而查询字符串又包含一个查询字符串。一个片段:

src="https://drive.google.com/viewerng/viewer?
url=https://hoxrostorage.blob.core.windows.net/hoxro/Matter_545/266408d1-309c-4258-808e-6bccdfc840c8.pdf?
sv=2015-04-05&sr=b&sig=x8VhYOUGSNp9AJfV%2BT%2BybcBkPQknqNXdolq4Xo0ZAXU%3D&se=2016-06-29T20%3A58%3A52Z&sp=r&rsct=application%2Fpdf
&embedded=true"

&embedded=true之前,其余部分是blob的查询字符串(后者包含一个用于处理共享访问签名的查询字符串)。

您需要对嵌入的blob网址进行编码,以便URL正确解析。

我不知道这是否会解决您的嵌入式预览问题,但至少它会纠正您的网址格式。

答案 1 :(得分:1)

此代码对我有用

<iframe src="https://docs.google.com/viewer?embedded=true&url=<<previewUri>>" 
        frameborder="no" style="width:100%;height:500px"></iframe>

var blobUri=$"{blob.Uri}{sasToken}";

var previewUri = Uri.EscapeDataString(blobUri);

此PreviewUri将在iframe中使用

View result