@progress/kendo-angular-pdf-export
Version:
Kendo UI for Angular PDF Export Component
311 lines (310 loc) • 11.9 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { Component, ContentChild, ElementRef, Input } from '@angular/core';
import { drawDOM, exportPDF } from '@progress/kendo-drawing';
import { saveAs } from '@progress/kendo-file-saver';
import { validatePackage } from '@progress/kendo-licensing';
import { packageMetadata } from './package-metadata';
import { PDFExportTemplateDirective } from './pdf-export-template.directive';
import { PDFExportMarginComponent } from './pdf-export-margin.component';
import { compileTemplate } from './compile-template';
import * as i0 from "@angular/core";
/**
* Represents the [Kendo UI PDF Export component for Angular](slug:overview_pdfexport).
*
* @example
* ```html
* <button kendoButton (click)="pdf.saveAs('document.pdf')">
* Save As PDF...
* </button>
*
* <kendo-pdf-export #pdf paperSize="A4" margin="2cm">
* Content goes here
* </kendo-pdf-export>
* ```
*
* @remarks
* Supported children components are: {@link PDFExportMarginComponent}
*/
export class PDFExportComponent {
element;
/**
* If `true`, opens the Print dialog immediately after the PDF loads ([see example](slug:autoprint_pdfexport)).
* Requires `@progress/kendo-drawing` v1.9.0 or later.
* @default false
*/
autoPrint;
/**
* Sets the author metadata for the PDF document.
*/
author;
/**
* Specifies whether actual hyperlinks will be produced in the exported PDF file ([see example](slug:hyperlinks_pdfexport)). You can also set a CSS selector to ignore matching links.
*/
avoidLinks;
/**
* Sets a CSS selector for elements that cause page breaks
* ([see example](slug:multipagecontent_pdfexport#toc-manual-page-breaking)).
*/
forcePageBreak;
/**
* Sets a CSS selector for elements that should not split across pages
* ([see example](slug:multipagecontent_pdfexport#toc-preventing-page-breaking-in-elements)).
*/
keepTogether;
/**
* Sets the creator metadata for the PDF document.
* @default "Kendo UI PDF Generator"
*/
creator = 'Kendo UI PDF Generator';
/**
* Sets the creation date for the PDF document. Defaults to `new Date()`.
* @default new Date()
*/
date;
/**
* Sets the image resolution in the exported PDF ([see example](slug:embeddedimages_pdfexport)). By default, images use full resolution.
*/
imageResolution;
/**
* Sets the name of the exported PDF file.
* @default "export.pdf"
*/
fileName = 'export.pdf';
/**
* If `true`, forwards content to `proxyURL` even if the browser supports local file saving.
*/
forceProxy;
/**
* Sets the keywords metadata for the PDF document.
*/
keywords;
/**
* If `true`, sets the page orientation to landscape. The default page orientation is portrait.
* @default false
*/
landscape;
/**
* Sets the page margins. Numbers use points (`"pt"`).
*/
margin;
/**
* Sets the paper size for the PDF document. Defaults to `"auto"`, which means the content determines the size of the document.
* The size of the content in pixels matches the size of the output in points (1 pixel = 1/72 inch).
*
* If set, the content splits across pages, and allows you to use `repeatHeaders`, `scale`, and a template.
*
* The value can be a `PaperSize`, an array of two numbers (width and height in points), or an array of two strings (width and height in units: `"mm"`, `"cm"`, `"in"`, or `"pt"`).
* @default "auto"
*/
paperSize;
/**
* If `true`, repeats the `<thead>` elements of tables on each page. This helps keep table headers visible on every page
* ([see example](slug:recurrenttableheaders_pdfexport)).
*/
repeatHeaders;
/**
* Sets a scale factor for the PDF output. Use this to make the PDF content smaller or larger
* ([see example](slug:scalingofcontent_pdfexport)).
*
* @default 1
*/
scale;
/**
* Sets a key/value dictionary of form values sent to the proxy. Use this to send extra data, like Anti-Forgery tokens.
*/
proxyData;
/**
* Sets the server-side proxy URL for streaming the file to the user. You need to implement a proxy if
* the browser is not capable of saving files locally.
* The proxy returns the decoded file with the `"Content-Disposition"` header set to `attachment; filename="<fileName.pdf>"`.
*
* In the request body, the proxy receives a POST request with the specific parameters
* ([see example](slug:server_proxy#toc-implementations)).
*/
proxyURL;
/**
* Sets where to display the document returned from the proxy. Use `"_self"` to display in the same window.
* To display the document in a new window or iframe,
* the proxy must have the `"Content-Disposition"` header set to `inline; filename="<fileName.pdf>"`.
* @default "_self"
*/
proxyTarget;
/**
* Sets the producer metadata for the PDF document.
*/
producer;
/**
* Sets the subject metadata for the PDF document.
*/
subject;
/**
* Sets the title metadata for the PDF document.
*/
title;
/**
* @hidden
*/
pageTemplateDirective;
/**
* @hidden
*/
marginComponent;
get drawMargin() {
const marginComponent = this.marginComponent;
let margin = this.margin;
if (marginComponent) {
margin = Object.assign(margin || {}, marginComponent.options);
}
return margin;
}
pageTemplate;
constructor(element) {
this.element = element;
validatePackage(packageMetadata);
}
/**
* Saves the content as a PDF file with the specified name.
* @param fileName - The name of the exported file.
*/
saveAs(fileName = this.fileName) {
this.save(this.element.nativeElement, fileName);
}
/**
* Exports the content as a `Group` for further processing.
*
* @return The root group of the exported scene.
*/
export() {
return this.exportElement(this.element.nativeElement);
}
save(element, fileName) {
this.exportElement(element)
.then(group => this.exportGroup(group, this.pdfOptions()))
.then(dataUri => this.saveDataUri(dataUri, fileName, this.saveOptions()));
}
exportElement(element) {
const promise = this.drawElement(element, this.drawOptions());
const cleanup = this.cleanup.bind(this);
promise.then(cleanup, cleanup);
return promise;
}
cleanup() {
if (this.pageTemplate) {
this.pageTemplate.destroy();
delete this.pageTemplate;
}
}
drawOptions() {
if (this.pageTemplateDirective) {
this.pageTemplate = compileTemplate(this.pageTemplateDirective.templateRef);
}
return {
avoidLinks: this.avoidLinks,
forcePageBreak: this.forcePageBreak,
keepTogether: this.keepTogether,
margin: this.drawMargin,
paperSize: this.paperSize,
landscape: this.landscape,
repeatHeaders: this.repeatHeaders,
scale: this.scale,
template: this.pageTemplate
};
}
pdfOptions() {
return {
autoPrint: this.autoPrint,
author: this.author,
creator: this.creator,
date: this.date,
imgDPI: this.imageResolution,
keywords: this.keywords,
landscape: this.landscape,
margin: this.drawMargin,
multiPage: true,
paperSize: this.paperSize,
producer: this.producer,
subject: this.subject,
title: this.title
};
}
saveOptions() {
return {
forceProxy: this.forceProxy,
proxyData: this.proxyData,
proxyTarget: this.proxyTarget,
proxyURL: this.proxyURL
};
}
drawElement(element, options) {
return drawDOM(element, options);
}
exportGroup(group, options) {
return exportPDF(group, options);
}
saveDataUri(dataUri, fileName, options) {
saveAs(dataUri, fileName, options);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PDFExportComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: PDFExportComponent, isStandalone: true, selector: "kendo-pdf-export", inputs: { autoPrint: "autoPrint", author: "author", avoidLinks: "avoidLinks", forcePageBreak: "forcePageBreak", keepTogether: "keepTogether", creator: "creator", date: "date", imageResolution: "imageResolution", fileName: "fileName", forceProxy: "forceProxy", keywords: "keywords", landscape: "landscape", margin: "margin", paperSize: "paperSize", repeatHeaders: "repeatHeaders", scale: "scale", proxyData: "proxyData", proxyURL: "proxyURL", proxyTarget: "proxyTarget", producer: "producer", subject: "subject", title: "title" }, queries: [{ propertyName: "pageTemplateDirective", first: true, predicate: PDFExportTemplateDirective, descendants: true }, { propertyName: "marginComponent", first: true, predicate: PDFExportMarginComponent, descendants: true }], ngImport: i0, template: `<div><ng-content></ng-content></div>`, isInline: true });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PDFExportComponent, decorators: [{
type: Component,
args: [{
selector: 'kendo-pdf-export',
template: `<div><ng-content></ng-content></div>`,
standalone: true
}]
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { autoPrint: [{
type: Input
}], author: [{
type: Input
}], avoidLinks: [{
type: Input
}], forcePageBreak: [{
type: Input
}], keepTogether: [{
type: Input
}], creator: [{
type: Input
}], date: [{
type: Input
}], imageResolution: [{
type: Input
}], fileName: [{
type: Input
}], forceProxy: [{
type: Input
}], keywords: [{
type: Input
}], landscape: [{
type: Input
}], margin: [{
type: Input
}], paperSize: [{
type: Input
}], repeatHeaders: [{
type: Input
}], scale: [{
type: Input
}], proxyData: [{
type: Input
}], proxyURL: [{
type: Input
}], proxyTarget: [{
type: Input
}], producer: [{
type: Input
}], subject: [{
type: Input
}], title: [{
type: Input
}], pageTemplateDirective: [{
type: ContentChild,
args: [PDFExportTemplateDirective, { static: false }]
}], marginComponent: [{
type: ContentChild,
args: [PDFExportMarginComponent, { static: false }]
}] } });