Question

我想使用打字稿打印blob（pdf）。我尝试了下面的代码，这些代码在Chrome中可用，但在Edge中不可用。

代码1（适用于Chrome，但在Edge中打印时显示空白）-

    const fileURL = URL.createObjectURL(blob);
    const iframe = document.createElement('iframe');
    iframe.style.display = 'none';
    iframe.src = fileURL;
    iframe.name = fileName;
    document.body.appendChild(iframe);
    iframe.contentWindow.print();

代码2（适用于Chrome，但contentWindow为null，因此会为contentWindow.document引发错误）-

    const fileURL = URL.createObjectURL(blob);
    const iframe = document.createElement('iframe');
    iframe.style.display = 'none';
    iframe.src = fileURL;
    iframe.name = fileName;
    document.body.appendChild(iframe);
    document.getElementsByTagName('iframe')[0].contentWindow.document.execCommand('print', false, null)

我见过很多问题，但都没有回答。我使用的是angular 6，是否有直接方法可以实现此目标或可以使用它实现的任何库。

Answer 1

该代码不起作用，因为IE和Edge均不支持将数据url作为src属性的iframe。您可以在caniuse中进行检查。有关更多信息，请参阅another thread中的我的答案。

所以我们不能直接在IE和Edge中打印blob pdf。有两种解决方法：

将其保存在IE和Edge中，然后手动打印。 IE和Edge拥有自己的API，用于创建和下载文件，称为msSaveOrOpenBlob。您可以使用如下代码：

var blob = new Blob([byteArray], { type: 'application/pdf' });
if (window.navigator && window.navigator.msSaveOrOpenBlob) {  //if IE or Edge
    window.navigator.msSaveOrOpenBlob(blob);
}
else {
    var objectUrl = URL.createObjectURL(blob);
    ...
}

使用PDF.js解析和呈现pdf。它使用如下链接显示pdf：

http://your_webserver_address/your_PDFjs_foldername/web/viewer.html?file=your_pdf_address

使用打字稿在IE / Edge中打印Blob（pdf）

1 个答案: