각도 2 구성 요소 인쇄

일반 JavaScript에서는 요소 ID를 가져 와서 새 창에 넣고 window.print()를 사용하여 요소를 인쇄 할 수 있습니다.각도 2 구성 요소 인쇄

그런 일을하는 "각도 2"방법은 무엇입니까? 지금까지 인쇄하고 싶은 컴포넌트의 ViewChild를 얻는 것으로 보았습니다.하지만 html에 액세스하고 이후에 인쇄하는 방법이나 그것이 내가해야 할 일이 무엇인지 확실하지 않습니다.

출처

2017-02-01 Alex Palacios

의 사용 가능한 복제 [각도 2에서 인쇄 HTML 템플릿 (에서 NG-인쇄 각도 2)] (http://stackoverflow.com/questions/41379274/print-html-template-in-angular-2-ng-print-in-angular-2) – sloth

내가 찾은 가장 좋은 방법은 인쇄 구성 요소를 작성하여 라우팅에서 가장 높은 계층으로 경로를 지정하는 것입니다. window.open (url)을 사용하여 경로를 엽니 다. 그리고 그 컴포넌트에 대해 window.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 구성 요소 인쇄

답변

관련 문제