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

Nat*_*oss 6 javascript printing rest typescript angular

我正在为我的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();
});
Run Code Online (Sandbox Code Playgroud)

HTML 元素:

<iframe id="printFile" style="display:none"></iframe>
Run Code Online (Sandbox Code Playgroud)

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

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

在浏览器中打印 blob 有哪些选项?

Nat*_*oss 5

根据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();
}
Run Code Online (Sandbox Code Playgroud)