web-dev-qa-db-ja.com

Angular 2でPDFを印刷する方法

ExaのpdfファイルのURLがあります。「test.example.com/incoice/1/download?auth_token= "some_token"」です。このURLにアクセスすると、URLに「PDF inブラウザ。

次に、この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();

印刷用のPDF用のデモをplunkerで作成しました。 http://embed.plnkr.co/WvaB9HZicxK6tC3OAUEw/ このプランカーでは、新しいウィンドウでpdfを開きますが、そのpdfを直接印刷します。どうやってやるの ？

どんな提案でも感謝します、そして、私が間違っているならば、あなたは修正することができます。ありがとう

javascriptangularpdf
7
Vishal

だからここで私の問題の解決策を得ました私の状況では、私のAPIはbinary data of pdfを返していて、ブラウザはそのバイナリデータをwindow.printに印刷しませんでしたので、このために最初にbinaryデータをblob dataを作成し、印刷用に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();
});

どうぞ！！これが誰もがこの問題を抱えているのを助けることができることを願っています:)

20
Vishal