如何在Angular 2中打印Pdf

时间:2017-05-29 13:50:04

标签: javascript angular pdf

我有exf url的pdf文件的网址是" 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中为print pdf创建了一个demo。 http://embed.plnkr.co/WvaB9HZicxK6tC3OAUEw/在这个plunker中,我在新窗口中打开pdf,但我想直接打印pdf。我怎么能这样做?

任何建议都会受到重视,如果我错了,你可以纠正。 感谢

3 个答案:

答案 0 :(得分:15)

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

Iframe

你去! 我希望这可以帮助任何人解决这个问题:)

答案 1 :(得分:0)

之前的解决方案可能会在较新的浏览器中导致一些安全问题,因此我们需要使用 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

答案 2 :(得分:-1)