Javascript - 打印从 API 返回的 Blob 内容答案

【问题标题】：Javascript - Print Blob Content Returned from APIJavascript - 打印从 API 返回的 Blob 内容
【发布时间】：2017-01-06 16:53:52
【问题描述】：

我正在为我的 angular2 Web 应用程序构建一个页面，用户可以在其中从列表中选择客户并打印出信件以邮寄给他们。这些信件被上传为PDFs，并在数据库中存储为varbinary。

在多选的情况下，我只是附加字节[]，这样用户将打印一份包含所有要发送给客户的信件的文档。

我能够成功地从 API 中提取 blob 并使用内容类型 application-pdf 返回它，但是我不知道从那里如何处理它。

这是我的 Angular2 组件 API 调用：

this.printQueueService.getPrintContent(printRequests) //customers to receive letters
            .subscribe((data: Blob) => {
                var element: HTMLIFrameElement = <HTMLIFrameElement>document.getElementById('printFile');
                element.innerText = data + ""; //what do I do with the blob?
                element.contentWindow.print();
});

HTML 元素：

<iframe id="printFile" style="display:none"></iframe>

我知道我可以下载 PDF 并提示用户使用 PDF 查看器进行打印，但我不想强迫用户执行额外的步骤。

我也不想尝试在浏览器中呈现 PDF 并打印，因为它假定用户拥有适当的插件并且浏览器支持它。

我有哪些选项可以在浏览器中打印 blob？

【问题讨论】：

您可以将其用作 iframe 的 src 的一部分。
更好。不要那样设计你的 api - 在 iframe 中使用请求来获取 pdf 否则它会为你的 js 上下文处理大量额外的内存。
@DanielA.White 如何在 IFrame 中向 API 发出 post 请求？ PDF 是动态生成的。
发布您的帖子，但返回 iframe 可以使用的网址。
那将是第一种方式是的。

标签： javascript rest angular typescript printing

【解决方案1】：

根据 Daniel A. White 的建议，我解决了这个问题。我决定不使用 IFrame，因为这些打印文件可能很大，而且 print() 函数将页面名称作为脚注。

相反，我选择在新选项卡中打开生成的 PDF，如下所示：

if (window.navigator.msSaveOrOpenBlob) {
     window.navigator.msSaveOrOpenBlob(data, "PrintedLetters.pdf"); //IE is the worst!!!
}
else {
     var fileURL = URL.createObjectURL(data);
     var a: HTMLAnchorElement = document.createElement('a');
     a.href = fileURL;
     a.target = '_blank';
     document.body.appendChild(a);
     a.click();
}

【讨论】：