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

【问题标题】：Embed Azure blob pdf file in iframe with google gview使用 google gview 在 iframe 中嵌入 Azure blob pdf 文件
【发布时间】：2016-05-19 20:55:55
【问题描述】：

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

它告诉我：

请注意：

在 Azure blob 存储中，我的 pdf 的 content type 设置为 application/pdf

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

谁能指出正确的方向，这里发生了什么？

【问题讨论】：

您在 url 中有一个嵌入的 url，在 querystrings 中有查询字符串。

标签： azure pdf iframe google-drive-api azure-blob-storage

【解决方案1】：

不确定您是否意识到，但您的 url 包含一个查询字符串，而该查询字符串又包含一个查询字符串。一个sn-p：

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 进行编码，以便正确解析该 URL。

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

【讨论】：

你找到我了。嵌入的 blob url 需要编码。得到了预览。谢谢:)

【解决方案2】：

这段代码对我有用

<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

【讨论】：