Angular 2에서 HTML 템플릿 인쇄(Angular 2에서 ng-print)
HTML 템플릿을 angular 2로 인쇄하고 싶습니다.나는 이것에 대해 조사했다. 나는 Angularjs 1에서 솔루션을 얻었다. Angularjs 1에서 HTML 템플릿 인쇄
어떤 제안이라도 해주시면 감사하겠습니다.
angular2에서는 그렇게 하고 있습니다(플런치 솔루션과 비슷합니다).HTML 파일:
<div id="print-section">
// your html stuff that you want to print
</div>
<button (click)="print()">print</button>
및 TS 파일:
print(): void {
let printContents, popupWin;
printContents = document.getElementById('print-section').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();
}
갱신:
또한 일관성이 없는 코딩(JS와 TS의 혼재)을 줄이고 보다 즉시 제어 가능하고 안전한 인쇄 케이스를 위해 경로를 단축하고 ngx 인쇄 라이브러리를 사용할 수도 있습니다.
만약 다른 사람이 이 문제를 발견했을 경우, 이미 페이지를 레이아웃하고 있다면, 인쇄 페이지를 설정하기 위해 매체 쿼리를 사용하는 것을 권장합니다.그런 다음 html 버튼과 컴포넌트 호출창()에 인쇄 기능을 첨부할 수 있습니다.
component.component:
<div class="doNotPrint">
Header is here.
</div>
<div>
all my beautiful print-related material is here.
</div>
<div class="doNotPrint">
my footer is here.
<button (click)="onPrint()">Print</button>
</div>
component.ts:
onPrint(){
window.print();
}
component.css:
@media print{
.doNotPrint{display:none !important;}
}
용지 쿼리에 인쇄하지 않을 다른 요소/섹션을 추가할 수도 있습니다.
문서 여백 및 인쇄 질의의 모든 내용을 변경할 수 있으므로 매우 강력합니다.온라인에는 많은 기사가 있다.여기 포괄적으로 보이는 것이 있다: https://www.sitepoint.com/create-a-customized-print-stylesheet-in-minutes/ 이것은 또한 페이지의 '인쇄 버전'을 작성하기 위해 별도의 스크립트를 작성하거나 많은 javascript를 사용할 필요가 없다는 것을 의미한다.
앵글2에서 이렇게 하면 돼요.
ts 파일로
export class Component{
constructor(){
}
printToCart(printSectionId: string){
let popupWinindow
let innerContents = document.getElementById(printSectionId).innerHTML;
popupWinindow = window.open('', '_blank', 'width=600,height=700,scrollbars=no,menubar=no,toolbar=no,location=no,status=no,titlebar=no');
popupWinindow.document.open();
popupWinindow.document.write('<html><head><link rel="stylesheet" type="text/css" href="style.css" /></head><body onload="window.print()">' + innerContents + '</html>');
popupWinindow.document.close();
}
}
html로
<div id="printSectionId" >
<div>
<h1>AngularJS Print html templates</h1>
<form novalidate>
First Name:
<input type="text" class="tb8">
<br>
<br> Last Name:
<input type="text" class="tb8">
<br>
<br>
<button class="button">Submit</button>
<button (click)="printToCart('printSectionId')" class="button">Print</button>
</form>
</div>
<div>
<br/>
</div>
</div>
편집: 보다 일반적인 접근방식을 위해 스니펫 업데이트
인정된 답변의 연장선상에서
대상 컴포넌트의 외관을 유지하기 위해 기존 스타일을 가져오려면 다음을 수행할 수 있습니다.
문의하다
<style>그리고.<link>최상위 문서의 요소HTML 문자열에 삽입합니다.
HTML 태그를 가져오려면:
private getTagsHtml(tagName: keyof HTMLElementTagNameMap): string
{
const htmlStr: string[] = [];
const elements = document.getElementsByTagName(tagName);
for (let idx = 0; idx < elements.length; idx++)
{
htmlStr.push(elements[idx].outerHTML);
}
return htmlStr.join('\r\n');
}
그 후 기존 스니펫에서 다음을 수행합니다.
const printContents = document.getElementById('print-section').innerHTML;
const stylesHtml = this.getTagsHtml('style');
const linksHtml = this.getTagsHtml('link');
const popupWin = window.open('', '_blank', 'top=0,left=0,height=100%,width=auto');
popupWin.document.open();
popupWin.document.write(`
<html>
<head>
<title>Print tab</title>
${linksHtml}
${stylesHtml}
^^^^^^^^^^^^^ add them as usual to the head
</head>
<body onload="window.print(); window.close()">
${printContents}
</body>
</html>
`
);
popupWin.document.close();
기존 스타일(각형 컴포넌트 자체에서 민트 스타일 생성)과 기존 스타일 프레임워크(부트스트랩, Material Design, Bulma 등)를 사용하면 기존 화면의 일부처럼 보일 수 있습니다.
인쇄 서비스
import { Injectable } from '@angular/core';
@Injectable()
export class PrintingService {
public print(printEl: HTMLElement) {
let printContainer: HTMLElement = document.querySelector('#print-container');
if (!printContainer) {
printContainer = document.createElement('div');
printContainer.id = 'print-container';
}
printContainer.innerHTML = '';
let elementCopy = printEl.cloneNode(true);
printContainer.appendChild(elementCopy);
document.body.appendChild(printContainer);
window.print();
}
}
②인쇄하고 싶은 컴포넌트
@Component({
selector: 'app-component',
templateUrl: './component.component.html',
styleUrls: ['./component.component.css'],
encapsulation: ViewEncapsulation.None
})
export class MyComponent {
@ViewChild('printEl') printEl: ElementRef;
constructor(private printingService: PrintingService) {}
public print(): void {
this.printingService.print(this.printEl.nativeElement);
}
}
최선의 선택은 아니지만, 효과가 있다.
라이브러리 ngx-print 를 사용합니다.
설치 중:
yarn add ngx-print
or
npm install ngx-print --save
모듈 변경:
import {NgxPrintModule} from 'ngx-print';
...
imports: [
NgxPrintModule,
...
템플릿:
<div id="print-section">
// print content
</div>
<button ngxPrint printSectionId="print-section">Print</button>
같은 문제에 부딪혀 다른 방법을 찾았습니다.저 같은 경우에는 비교적 작은 어플리케이션이기 때문에 효과가 있었습니다.
먼저 사용자는 인쇄해야 하는 컴포넌트의 클릭 버튼을 클릭합니다.그러면 앱 구성 요소가 액세스할 수 있는 플래그가 설정됩니다.그렇게
.disc 파일
<button mat-button (click)="printMode()">Print Preview</button>
.ts 파일
printMode() {
this.utilities.printMode = true;
}
앱 컴포넌트의 html에서는 라우터 아웃렛을 제외한 모든 것을 숨깁니다.이하와 같은 것
<div class="container">
<app-header *ngIf="!utilities.printMode"></app-header>
<mat-sidenav-container>
<mat-sidenav *ngIf="=!utilities.printMode">
<app-sidebar></app-sidebar>
</mat-sidenav>
<mat-sidenav-content>
<router-outlet></router-outlet>
</mat-sidenav-content>
</mat-sidenav-container>
</div>
유사한 ngIf 설정을 사용하여 컴포넌트의 html 템플릿을 조정하여 print Mode의 표시 또는 숨기기만 할 수 있습니다.인쇄 미리보기를 클릭했을 때 사용자에게 인쇄해야 할 항목만 표시되도록 합니다.
아래 코드를 사용하여 간단하게 인쇄하거나 일반 모드로 돌아갈 수 있습니다.
.disc 파일
<button mat-button class="doNotPrint" (click)="print()">Print</button>
<button mat-button class="doNotPrint" (click)="endPrint()">Close</button>
.ts 파일
print() {
window.print();
}
endPrint() {
this.utilities.printMode = false;
}
.css 파일(인쇄 및 닫기 버튼이 인쇄되지 않도록 함)
@media print{
.doNotPrint{display:none !important;}
}
창을 타이프스크립트 변수에 할당하고 인쇄 메서드를 호출하는 최단 솔루션. 다음과 같습니다.
템플릿 파일로
<button ... (click)="window.print()" ...>Submit</button>
그리고 타이프스크립트 파일로
window: any;
constructor() {
this.window = window;
}
스타일에 구애받지 않고 이 문제를 해결할 수 있는 최선의 방법은 인쇄 출력에 다른 경로를 사용하여 이 경로를 iframe에 로드하는 것입니다.
주변 컴포넌트가 탭 페이지로 표시됩니다.
@Component({
template: '<iframe id="printpage" name="printpage" *ngIf="printSrc" [src]="printSrc"></iframe>',
styleUrls: [ 'previewTab.scss' ]
})
export class PreviewTabPage {
printSrc: SafeUrl;
constructor(
private navParams: NavParams,
private sanitizer: DomSanitizer,
) {
// item to print is passed as url parameter
const itemId = navParams.get('itemId');
// set print page source for iframe in template
this.printSrc = this.sanitizer.bypassSecurityTrustResourceUrl(this.getAbsoluteUrl(itemId));
}
getAbsoluteUrl(itemId: string): string {
// some code to generate an absolute url for your item
return itemUrl;
}
}
iframe에 합니다.이 페이지에서는 보기가 완전히 초기화되면 인쇄가 트리거될 수 있습니다.하면, 할 수 .window.frames["printpage"].print();.
@Component({
templateUrl: './print.html',
styleUrls: [ 'print.scss' ]
})
export class PrintPage implements AfterViewInit {
constructor() {}
ngAfterViewInit() {
// wait some time, so all images or other async data are loaded / rendered.
// print could be triggered after button press in the parent component as well.
setTimeout(() => {
// print current iframe
window.print();
}, 2000);
}
}
Windows 어플리케이션에는 보통 인쇄 기능이 포함되어 있습니다만, Web 어플리케이션의 경우는, PDF 파일을 생성하는 것만으로 끝납니다.
제가 찾은 가장 간단한 방법은 PDFMake(www.pdfmake.org)를 사용하여 PDF 파일을 생성하는 것입니다.그런 다음 생성된 PDF 파일을 열거나 다운로드할 수 있습니다.
커스텀 HTML 를 인쇄할 필요가 있는 경우는, 다음의 방법을 사용할 수 있습니다.
ts:
let control_Print;
control_Print = document.getElementById('__printingFrame');
let doc = control_Print.contentWindow.document;
doc.open();
doc.write("<div style='color:red;'>I WANT TO PRINT THIS, NOT THE CURRENT HTML</div>");
doc.close();
control_Print = control_Print.contentWindow;
control_Print.focus();
control_Print.print();
html:
<iframe title="Lets print" id="__printingFrame" style="width: 0; height: 0; border: 0"></iframe>
언급URL : https://stackoverflow.com/questions/41379274/print-html-template-in-angular-2-ng-print-in-angular-2
'programing' 카테고리의 다른 글
| 외부 부품 개발 시 리액트 2부 로드 오류를 방지하려면 어떻게 해야 합니까? (0) | 2023.03.11 |
|---|---|
| Typescript에서의 인터페이스와 클래스의 차이 (0) | 2023.03.11 |
| DataTables: 정의되지 않은 속성 '길이'를 읽을 수 없습니다. (0) | 2023.03.11 |
| Jackson을 사용한 두 개의 JSON 문서 병합 (0) | 2023.03.11 |
| 웹 스크랩 - Angular.js를 통해 JavaScript에 렌더링된 콘텐츠에 액세스하는 방법 (0) | 2023.03.11 |