角2はコンポーネントを印刷する

プレーンJavaScriptでは、要素IDを取得して新しいウィンドウに配置し、window.print（）を使用して要素を印刷することができます。角2はコンポーネントを印刷する

このようなことを行う「角度2」の方法は何ですか？印刷したいコンポーネントのViewChildを取得するまでは得ましたが、htmlにアクセスして印刷する方法や、それを印刷する方法がわかりません。

2017-02-01 Alex Palacios

の可能性のある重複した[角度2で印刷するHTMLテンプレート（でNG-印刷アンギュラ2）]（http://stackoverflow.com/question/41379274/print-html-template-in-angular-2-nag-print-in-angular-2） – sloth

私が見つけた最も良い方法は、プリントコンポーネントを作成し、ルーティング上の最高階層へのルートを与えることです。 window.open（url）でルートを開きます。そして、そのコンポーネントのafterviewinitを呼び出してwindow.print（）を呼び出します。作成したビューを印刷した後、コンポーネントを印刷コンポーネントに含めることができます。 printコンポーネントにcss @media print {}を追加することを忘れないでください。 –

-5

HTML

<div id="printSection"></div> 
    <button (click)="print()">PRINT</button>

print(): void { 
     let printContents, popupWin; 
     printContents = document.getElementById('printSection').innerHTML; 
     popupWin = window.open('', '_blank', 'top=0,left=0,height=100%,width=auto'); 
     popupWin.document.open(); 
     popupWin.document.write(` 
      <html> 
       <head> 
        <title>Print tab</title> 
        <style> 
         //........Customized style....... 
        </style> 
       </head> 
       <body onload="window.print();window.close()">${printContents} 
       </body> 
      </html>` 
     ); 
     popupWin.document.close(); 
    }

出典

2017-05-30 20:09:36

私は誰かがなぜこの答えを下降させるのかを理解することができますが（これは数多くの理由がありますが）、今は完璧なハンマーです！ – MoshMage

しかし、これはスタイルを正しく拾いません – Hacker

どうすればいいですか？スタイルが正しくない。 – Yashasvi

角2はコンポーネントを印刷する

答えて

関連する問題