Angular 11에서 HTML 페이지를 PDF로 변환하는 방법은 무엇입니까?

이 자습서에서는 jspdf, html2canvas 및 jspdf 패키지를 사용하여 HTML에서 pdf 파일을 생성합니다. 모든 프로젝트 사용자 이메일에 보고서를 여러 번 보내기 위해 이미지 형식이나 PDF 형식으로 저장하기 위해 각진 콘텐츠에서 HTML을 PDF로 변환해야 하는 요구 사항이 자주 발생합니다. 그래서 여기에서는 Angular HTML을 PDF 콘텐츠로 Angular 응용 프로그램에서 PDF 파일로 변환하는 방법에 대해 설명하겠습니다. 그리고 PDF Angular 11 앱에 HTML을 생성하는 방법에 대해 단계별로 도움을 줄 것입니다.

How To Convert HTML Page To PDF In Angular 11?



종속성 설치
npm install jspdfnpm install html2canvas
app.component.ts 파일 업데이트

import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
import * as jspdf from 'jspdf';
import html2canvas from 'html2canvas';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'html-to-pdf-angular-application';
    public convetToPDF() {
        var data = document.getElementById('contentToConvert');
        html2canvas(data).then(canvas => {
            // Few necessary setting options
            var imgWidth = 208;
            var pageHeight = 295;
            var imgHeight = canvas.height * imgWidth / canvas.width;
            var heightLeft = imgHeight;

            const contentDataURL = canvas.toDataURL('image/png')
            let pdf = new jspdf('p', 'mm', 'a4'); // A4 size page of PDF
            var position = 0;
            pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight)
            pdf.save('new-file.pdf'); // Generated PDF
        });
    }
}

위의 파일에서 HTML을 pdf 각도로 변환할 때 ts 파일에 jspdf 및 html2canvas 라이브러리를 가져왔습니다. 그 아래에는 HTML 파일에서 버튼 클릭을 생성하는 방법이 있습니다...

원본 출처: https://www.phpcodingstuff.com/blog/how-to-convert-html-page-to-pdf-in-angular-11.html