如何在 Angular 2 中打印 Pdf答案

【问题标题】：How to Print Pdf in Angular 2如何在 Angular 2 中打印 Pdf
【发布时间】：2017-10-29 20:39:23
【问题描述】：

我有 pdf 文件的网址，exa 网址是“test.example.com/incoice/1/download?auth_token="some_token"，当我访问这个网址时，网址会在浏览器中显示 PDF。

现在我想用打印功能打开这个pdf，我的意思是用户不必按CTRL+P我想从我这边做。

我尝试了 iframe，但它给了我跨源错误。这是我使用的演示代码

//first try

 let _printIframe;
var iframe = _printIframe;
if (!_printIframe) {
    iframe = _printIframe = document.createElement('iframe');
    document.body.appendChild(iframe);

    iframe.style.display = 'none';
    iframe.id  = "printf";
    iframe.name = "printf";
    iframe.onload = function() {
      setTimeout(function() {
        iframe.focus();
        iframe.contentWindow.print();
      }, 1);
    };
  }

// second try 
   // SRC of pdf
iframe.src = "Some API URl " + "/download?access_token=" + 
this.authenticationService.currentTokenDetails.access_token;
let url = iframe.src + "&output=embed";

window.frames["printf"].focus();
window.frames["printf"].print();
var newWin = window.frames["printf"];
newWin.document.write('<body onload="window.print()">dddd</body>');
newWin.document.close();

我在 plunker 中创建了一个用于打印 pdf 的演示。 http://embed.plnkr.co/WvaB9HZicxK6tC3OAUEw/ 在这个 plunker 中，我在新窗口中打开 pdf，但我想直接打印该 pdf。我该怎么做？

任何建议将不胜感激，如果我错了，您可以纠正。谢谢

【问题讨论】：

标签： javascript angular pdf

【解决方案1】：

所以我在这里找到了解决问题的方法在我的情况下，我的 API 返回 binary data of pdf，并且浏览器没有将该二进制数据打印到 window.print 中，因此首先我将 binary 数据转换为 blob 数据，然后创建 Iframe 用于打印以下是它的代码。

const url = request URL // e.g localhost:3000 + "/download?access_token=" + "sample access token";
this.http.get(url, {
  responseType: ResponseContentType.Blob
}).subscribe(
  (response) => { // download file
    var blob = new Blob([response.blob()], {type: 'application/pdf'});
    const blobUrl = URL.createObjectURL(blob);
      const iframe = document.createElement('iframe');
      iframe.style.display = 'none';
      iframe.src = blobUrl;
      document.body.appendChild(iframe);
      iframe.contentWindow.print();
});

给你！！我希望这可以帮助任何有这个问题的人:)

【讨论】：

非常感谢您
需要注意的是，这不适用于 Microsoft 浏览器（IE 和 Edge）。 Here 是关于如何解决该问题的问题。如果您只是想在保存 blob 时打开，可以参考 this
谢谢，没有打印对话框的打印有什么解决办法吗？
我认为这不适用于 Firefox。查看更多：stackoverflow.com/questions/33254679/print-pdf-in-firefox
如何一键打印多个文件

【解决方案2】：

以前的解决方案可能会在较新的浏览器中引起一些安全问题，因此我们需要使用 DOMSanitizer 使其成为安全资源。

export class PrintPdfService {
  constructor(protected sanitizer: DomSanitizer) {}

  printPdf(res) {
    const pdf = new Blob([res], { type: 'application/pdf' });
    const blobUrl = URL.createObjectURL(pdf);
    const iframe = document.createElement('iframe');
    iframe.style.display = 'none';
    iframe.src = this.sanitizer.sanitize(SecurityContext.RESOURCE_URL, this.sanitizer.bypassSecurityTrustResourceUrl(blobUrl));
    document.body.appendChild(iframe);
    iframe.contentWindow.print();
  }
}

Angular DOMSanitizer

【讨论】：

【解决方案3】：

看https://github.com/devintyler/real-time-angular2/tree/master/plugin/print-pdf

简单而漂亮的实现。

【讨论】：

好的，我试试
我试过了。但对我不起作用。你能创建一个演示 plunker 吗？