iframe src 中的 blob 对象答案

【问题标题】：blob object in an iframe srciframe src 中的 blob 对象
【发布时间】：2019-03-17 12:49:37
【问题描述】：

我正在尝试做一些看起来很简单的事情：我正在尝试在 iframe 中显示 window.URL.createObjectURL（*.pdf 文件 - Blob）。我试图通过将 iframe src 属性绑定到 window.URL.createObjectURL 函数的输出来做到这一点。查看我的代码：组件 HTML：

<iframe [src]="safeResourceUrl" class="iframe"></iframe>

在组件中绑定属性：

safeResourceUrl : SafeResourceUrl;
this.safeResourceUrl = this.sanitizer.bypassSecurityTrustResourceUrl(url);

网址看起来像这样（示例）：

"blob:http://localhost:4200/84999abe-5a02-48e0-bf61-f693eb5e0f6b"

这是它的内容（没错，这些是保存为 PDF 的 HTML 标签，但任何其他内容也应该没问题）：

<html>
  <body>
     <label style="color:red;"> test file (HTML) </label>
  </body>
</html>

文件路径由从 webApi 获取请求生成的 Blob 生成。请求配置为：

responseType: 'blob'

并且blob类型是

 type: 'application/octet-stream'

我在这里缺少什么？正在下载的文件内容正确，但 iframe 内容（在开发人员工具中包含空 HTML 标记）：

<html><head></head><body></body></html>

请支持

【问题讨论】：

请尝试不使用blob 部分“localhost:4200/84999abe-5a02-48e0-bf61-f693eb5e0f6b”

标签： angular asp.net-web-api iframe httpresponse

【解决方案1】：

经过几次测试后弄清楚了：我将 blob 类型设置为“application/pdf”，而不是用于下载的“application/octet-stream”。

const blob = new Blob([res.body], { type: obj.action == FileAction.save ?  'application/octet-stream' : 'application/pdf' }); // preview in a PDF format

【讨论】：