ng-zorro-antd-extension 17.1.0 → 17.3.0

package/fesm2022/ng-zorro-antd-extension-print.mjs

@@ -1,27 +1,35 @@
+import * as i1$1 from '@angular/common';
 import { DOCUMENT, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Directive, ElementRef, Component, Inject, Input, ContentChild, HostListener, NgModule } from '@angular/core';
+import { Directive, Input, ElementRef, Component, Inject, ViewChild, ContentChild, EventEmitter, Output, ContentChildren, HostListener, NgModule } from '@angular/core';
+import { getElementByTag } from 'ng-zorro-antd-extension/util';
 import * as i1 from '@angular/cdk/platform';
-
-function getElementTag(tag) {
-    const html = [];
-    const elements = document.getElementsByTagName(tag);
-    for (let index = 0; index < elements.length; index++) {
-        html.push(elements[index].outerHTML);
-    }
-    return html.join('\r\n');
-}
+import { Navigation, PageViewMode, CoreViewer } from '@vivliostyle/core';
+import * as i2 from 'ng-zorro-antd/grid';
+import { NzGridModule } from 'ng-zorro-antd/grid';
+import * as i3 from 'ng-zorro-antd/pagination';
+import { NzPaginationModule } from 'ng-zorro-antd/pagination';
 
 class NzxPrintContentDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: NzxPrintContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.3", type: NzxPrintContentDirective, selector: "[nzxPrintContent]", ngImport: i0 }); }
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+        this.identifierStr = '';
+        this.customStyle = '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: NzxPrintContentDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.3", type: NzxPrintContentDirective, selector: "[nzxPrintContent]", inputs: { identifierStr: "identifierStr", customStyle: "customStyle" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: NzxPrintContentDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[nzxPrintContent]',
                 }]
-        }] });
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { identifierStr: [{
+                type: Input
+            }], customStyle: [{
+                type: Input
+            }] } });
+
 /**
  * 使用Paged.js打印
  */
@@ -36,6 +44,8 @@ class NzxPrintComponent {
         this.width = 814;
         this.height = 1143;
         this.enablePreview = true;
+        this.identifierStr = '';
+        this.pagedCDN = '';
         this._title = this.document.title;
         this.afterPrint = () => {
             this.iframeEl.contentWindow.parent.document.title = this._title;
@@ -44,6 +54,11 @@ class NzxPrintComponent {
             this.iframeEl.contentWindow.parent.document.title = this.printTitle;
         };
     }
+    ngOnInit() {
+        if (!this.pagedCDN) {
+            throw new Error('pagedCDN is required');
+        }
+    }
     ngAfterViewInit() {
         this.render();
     }
@@ -59,10 +74,11 @@ class NzxPrintComponent {
         }, 100);
     }
     render() {
-        const container = this.document.getElementById('nzx-print-iframe-content');
         this.iframeEl = this.document.createElement('iframe');
         this.iframeEl.height = this.height + '';
         this.iframeEl.width = this.width + '';
+        this.iframeEl.style.border = '1px solid #ccc';
+        this.iframeEl.style.background = '#fff';
         if (!this.enablePreview) {
             this.iframeEl.style.visibility = 'hidden';
             if (this.platform.FIREFOX) {
@@ -72,9 +88,9 @@ class NzxPrintComponent {
                 this.iframeEl.setAttribute('style', 'visibility: hidden; height: 0; width: 0; position: absolute; border: 0');
             }
         }
-        if (container) {
-            container.innerHTML = '';
-            container.appendChild(this.iframeEl);
+        if (this.containerRef) {
+            this.containerRef.nativeElement.innerHTML = '';
+            this.containerRef.nativeElement.appendChild(this.iframeEl);
         }
         if (this.iframeEl.contentWindow) {
             this.iframeEl.contentWindow.document.open();
@@ -86,9 +102,9 @@ class NzxPrintComponent {
         }
     }
     getTemplateStr() {
-        const styles = getElementTag('style');
+        const styles = getElementByTag('style', this.identifierStr);
         const scripts = `
-        <script src="https://winkong-frontend.oss-cn-qingdao.aliyuncs.com/javascript/paged/paged.polyfill.min.js"></script>
+        <script src="${this.pagedCDN}"></script>
         <script>
           class RepeatingTableHeaders extends Paged.Handler {
             constructor(chunker, polisher, caller) {
@@ -113,7 +129,7 @@ class NzxPrintComponent {
           Paged.registerHandlers(RepeatingTableHeaders);
         </script>
       `;
-        const html = `
+        let html = `
         <!DOCTYPE html>
         <html>
           <head>
@@ -157,20 +173,24 @@ class NzxPrintComponent {
           </body>
         </html>
       `;
+        html = html.replace(/<!---->/g, ' ');
         return html;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: NzxPrintComponent, deps: [{ token: i1.Platform }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.3", type: NzxPrintComponent, selector: "nzx-print", inputs: { printTitle: "printTitle", width: "width", height: "height", enablePreview: "enablePreview" }, queries: [{ propertyName: "_printEl", first: true, predicate: NzxPrintContentDirective, descendants: true, read: ElementRef, static: true }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.3", type: NzxPrintComponent, selector: "nzx-print", inputs: { printTitle: "printTitle", width: "width", height: "height", enablePreview: "enablePreview", identifierStr: "identifierStr", pagedCDN: "pagedCDN" }, queries: [{ propertyName: "_printEl", first: true, predicate: NzxPrintContentDirective, descendants: true, read: ElementRef, static: true }], viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["iframeContainer"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: `
     <ng-content select="[nzxPrintHeader]"></ng-content>
-    <div id="nzx-print-iframe-content"></div>
-  `, isInline: true, styles: ["#nzx-print-iframe-content iframe{background:#fff;border:1px solid #ccc}\n"] }); }
+    <div #iframeContainer></div>
+  `, isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: NzxPrintComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nzx-print', template: `
+            args: [{
+                    selector: 'nzx-print',
+                    template: `
     <ng-content select="[nzxPrintHeader]"></ng-content>
-    <div id="nzx-print-iframe-content"></div>
-  `, styles: ["#nzx-print-iframe-content iframe{background:#fff;border:1px solid #ccc}\n"] }]
+    <div #iframeContainer></div>
+  `,
+                }]
         }], ctorParameters: () => [{ type: i1.Platform }, { type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -182,17 +202,319 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImpor
                 type: Input
             }], enablePreview: [{
                 type: Input
+            }], identifierStr: [{
+                type: Input
+            }], pagedCDN: [{
+                type: Input
+            }], containerRef: [{
+                type: ViewChild,
+                args: ['iframeContainer', { read: ElementRef, static: true }]
             }], _printEl: [{
                 type: ContentChild,
                 args: [NzxPrintContentDirective, { read: ElementRef, static: true }]
             }] } });
 
+/**
+ * Vivliostyle 打印
+ */
+class NzxPrintVComponent {
+    constructor(cd) {
+        this.cd = cd;
+        this.printTitle = 'pdf';
+        /**
+         * a4 794px1123px
+         */
+        this.width = 814;
+        this.height = 1143;
+        this.enablePreview = true;
+        this.pixelRatio = 8;
+        this.pageRenderComplete = new EventEmitter();
+        this.pageTotal = 0;
+        this._title = document.title;
+        this._isRenderComplete = false;
+        this.handleError = (payload) => {
+            console.log('error::', payload);
+        };
+        this.handleReadyStateChange = (payload) => {
+            this._isRenderComplete = false;
+            this.pageRenderComplete.emit(false);
+            if (this.viewer && this.viewer.readyState === 'complete') {
+                const intervalTag = setInterval(() => {
+                    if (this.iframeEl &&
+                        this.iframeEl.contentWindow &&
+                        this.iframeEl.contentWindow.document) {
+                        const images = this.iframeEl.contentWindow.document.getElementsByTagName('img');
+                        let allImagesLoaded = true;
+                        for (let i = 0; i < images.length; i++) {
+                            if (!images[i].complete) {
+                                allImagesLoaded = false;
+                                break;
+                            }
+                        }
+                        if (allImagesLoaded) {
+                            console.log('All images in iframe loaded successfully');
+                            this.pageRenderComplete.emit(true);
+                            this._isRenderComplete = true;
+                            clearInterval(intervalTag);
+                        }
+                    }
+                }, 1000);
+            }
+        };
+        this.handleHyperlink = (payload) => {
+            console.log('handleHyperlink::', payload);
+        };
+        this.handleLoaded = (payload) => {
+            console.log('handleLoaded::', payload);
+        };
+        this.handleNavigation = (payload) => {
+            this.pageTotal = payload.epageCount;
+            this.cd.markForCheck();
+        };
+    }
+    ngAfterViewInit() {
+        setTimeout(() => {
+            this.createIframeWrapper();
+        }, 1000);
+    }
+    ngOnDestroy() {
+        if (this.viewer) {
+            this.clearView();
+        }
+    }
+    onPageIndexChange(num) {
+        if (this.viewer) {
+            this.viewer.navigateToPage(Navigation.EPAGE, num - 1);
+        }
+    }
+    print() {
+        if (this._isRenderComplete) {
+            this.iframeEl.contentWindow.print();
+        }
+        else {
+            console.warn('rending...');
+        }
+    }
+    refresh() {
+        setTimeout(() => {
+            this.createIframeWrapper();
+        }, 100);
+    }
+    createIframeWrapper() {
+        if (this.vivViewRef) {
+            this.clearView();
+            this.iframeEl = document.createElement('iframe');
+            this.iframeEl.height = this.height + '';
+            this.iframeEl.width = this.width + '';
+            this.iframeEl.style.border = '1px solid #ccc';
+            this.iframeEl.style.background = '#fff';
+            const template = `
+        <!DOCTYPE html>
+        <html data-vivliostyle-paginated="true">
+          <head>
+            <meta charset="utf-8" />
+            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+            <base href="/" />
+            <title>${this.printTitle}</title>
+            <style>
+              html[data-vivliostyle-paginated] {
+                width: 100%;
+                height: 100%;
+              }
+              html[data-vivliostyle-paginated] body,
+              html[data-vivliostyle-paginated] [data-vivliostyle-viewer-viewport] {
+                width: 100% !important;
+                height: 100% !important;
+                background: #fff;
+              }
+              html[data-vivliostyle-paginated],
+              html[data-vivliostyle-paginated] body {
+                margin: 0;
+                padding: 0;
+              }
+            </style>
+            <style id="vivliostyle-page-rules"></style>
+          </head>
+          <body>
+            <div id="vivliostyle-viewer-viewport"></div>
+          </body>
+        </html>
+      `;
+            this.iframeEl.srcdoc = template;
+            this.vivViewRef.nativeElement.appendChild(this.iframeEl);
+            this.iframeEl.contentWindow.onbeforeprint = () => {
+                this.iframeEl.contentWindow.parent.document.title = this.printTitle;
+            };
+            this.iframeEl.contentWindow.onafterprint = () => {
+                this.iframeEl.contentWindow.parent.document.title = this._title;
+            };
+            this.createVivViewer();
+        }
+    }
+    createVivViewer() {
+        this.iframeEl.onload = () => {
+            const els = this._printElQueryList.toArray();
+            const templates = this.getVivTemplates(els);
+            const options = [];
+            templates.forEach((template) => {
+                const docBlob = new Blob([template], {
+                    type: 'text/html',
+                });
+                const docURL = URL.createObjectURL(docBlob);
+                options.push({ url: docURL });
+            });
+            this.viewer = new CoreViewer({
+                viewportElement: this.iframeEl.contentWindow?.document.body
+                    .firstElementChild,
+            }, {
+                pageViewMode: PageViewMode.SINGLE_PAGE,
+                pixelRatio: this.pixelRatio,
+            });
+            this.viewer.loadDocument(options);
+            this.createListener(this.viewer);
+        };
+    }
+    createListener(viewer) {
+        viewer.addListener('error', this.handleError);
+        viewer.addListener('readystatechange', this.handleReadyStateChange);
+        viewer.addListener('loaded', this.handleLoaded);
+        viewer.addListener('hyperlink', this.handleHyperlink);
+        viewer.addListener('nav', this.handleNavigation);
+    }
+    removeListeners(viewer) {
+        viewer.removeListener('error', this.handleError);
+        viewer.removeListener('readystatechange', this.handleReadyStateChange);
+        viewer.removeListener('loaded', this.handleLoaded);
+        viewer.removeListener('hyperlink', this.handleHyperlink);
+        viewer.removeListener('nav', this.handleNavigation);
+    }
+    getStyles(identifierStr) {
+        const stylesArray = [];
+        const styleElements = document.getElementsByTagName('style');
+        const length = styleElements.length;
+        let identifiers = [];
+        if (Array.isArray(identifierStr)) {
+            identifiers = [...identifierStr];
+        }
+        else {
+            identifiers = [identifierStr];
+        }
+        for (let index = 0; index < length; index++) {
+            identifiers.forEach((s) => {
+                if (styleElements[index].outerHTML.includes(s)) {
+                    const formateStr = styleElements[index].outerHTML.replace(/\/\*[\s\S]*?\*\//g, '');
+                    stylesArray.push(formateStr);
+                }
+            });
+        }
+        return stylesArray.join('\r\n');
+    }
+    getVivTemplates(directives) {
+        const templates = [];
+        directives.forEach((d) => {
+            let styles = '';
+            if (d.identifierStr || d.identifierStr.length > 0) {
+                styles = this.getStyles(d.identifierStr);
+            }
+            let html = `
+          <!DOCTYPE html>
+          <html>
+            <head>
+            <meta charset="utf-8" />
+            <title>${this.printTitle}</title>
+            <base href="/" />
+            <meta name="viewport" content="width=device-width, initial-scale=1" />
+             ${d.customStyle}
+             ${styles}
+            </head>
+            <body>
+              ${d.elementRef.nativeElement.outerHTML}
+            </body>
+          </html>
+        `;
+            html = html.replace(/<!---->/g, ' ');
+            templates.push(html);
+        });
+        return templates;
+    }
+    clearView() {
+        if (this.viewer) {
+            this.removeListeners(this.viewer);
+        }
+        this.vivViewRef.nativeElement.innerHTML = '';
+        this.viewer = undefined;
+        this._isRenderComplete = false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: NzxPrintVComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.3", type: NzxPrintVComponent, selector: "nzx-print-v", inputs: { printTitle: "printTitle", width: "width", height: "height", enablePreview: "enablePreview", pixelRatio: "pixelRatio" }, outputs: { pageRenderComplete: "pageRenderComplete" }, queries: [{ propertyName: "_printElQueryList", predicate: NzxPrintContentDirective }], viewQueries: [{ propertyName: "vivViewRef", first: true, predicate: ["vivView"], descendants: true }], ngImport: i0, template: `
+    <ng-content select="[nzxPrintHeader]"></ng-content>
+
+    <div #vivView [ngStyle]="{ margin: '10px 0' }"></div>
+
+    <div nz-row nzJustify="end">
+      <ng-template #totalTemplate let-total>共 {{ total }} 页</ng-template>
+      <nz-pagination
+        [nzPageIndex]="1"
+        [nzTotal]="pageTotal"
+        [nzPageSize]="1"
+        [nzSize]="'small'"
+        [nzShowTotal]="totalTemplate"
+        nzShowQuickJumper
+        (nzPageIndexChange)="onPageIndexChange($event)"
+      ></nz-pagination>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "component", type: i3.NzPaginationComponent, selector: "nz-pagination", inputs: ["nzShowTotal", "nzItemRender", "nzSize", "nzPageSizeOptions", "nzShowSizeChanger", "nzShowQuickJumper", "nzSimple", "nzDisabled", "nzResponsive", "nzHideOnSinglePage", "nzTotal", "nzPageIndex", "nzPageSize"], outputs: ["nzPageSizeChange", "nzPageIndexChange"], exportAs: ["nzPagination"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: NzxPrintVComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'nzx-print-v',
+                    template: `
+    <ng-content select="[nzxPrintHeader]"></ng-content>
+
+    <div #vivView [ngStyle]="{ margin: '10px 0' }"></div>
+
+    <div nz-row nzJustify="end">
+      <ng-template #totalTemplate let-total>共 {{ total }} 页</ng-template>
+      <nz-pagination
+        [nzPageIndex]="1"
+        [nzTotal]="pageTotal"
+        [nzPageSize]="1"
+        [nzSize]="'small'"
+        [nzShowTotal]="totalTemplate"
+        nzShowQuickJumper
+        (nzPageIndexChange)="onPageIndexChange($event)"
+      ></nz-pagination>
+    </div>
+  `,
+                }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { printTitle: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], enablePreview: [{
+                type: Input
+            }], pixelRatio: [{
+                type: Input
+            }], pageRenderComplete: [{
+                type: Output
+            }], vivViewRef: [{
+                type: ViewChild,
+                args: ['vivView']
+            }], _printElQueryList: [{
+                type: ContentChildren,
+                args: [NzxPrintContentDirective]
+            }] } });
+
 /**
  * 常规打印
  */
 class NzxPrintDirective {
     constructor() {
         this.printTitle = 'pdf';
+        this.identifierStr = '';
     }
     ngOnInit() {
         if (!this.printEl) {
@@ -205,9 +527,9 @@ class NzxPrintDirective {
     print() {
         const newWin = window.open('', '_blank');
         if (newWin) {
-            const styles = getElementTag('style');
-            const links = getElementTag('link');
-            const baseTag = getElementTag('base');
+            const styles = getElementByTag('style', this.identifierStr);
+            const links = getElementByTag('link');
+            const baseTag = getElementByTag('base');
             const scripts = `
       <script>
         window.onload = function () {
@@ -218,7 +540,7 @@ class NzxPrintDirective {
         };
       </script>
       `;
-            const html = `
+            let html = `
       <!DOCTYPE html>
         <html>
           <head>
@@ -233,6 +555,7 @@ class NzxPrintDirective {
           </body>
         </html>
       `;
+            html = html.replace(/<!---->/g, ' ');
             newWin.document.open();
             newWin.document.write(html);
             newWin.document.close();
@@ -256,7 +579,7 @@ class NzxPrintDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: NzxPrintDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.3", type: NzxPrintDirective, selector: "button[nzxPrint]", inputs: { printEl: "printEl", printTitle: "printTitle" }, host: { listeners: { "click": "print()" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.3", type: NzxPrintDirective, selector: "button[nzxPrint]", inputs: { printEl: "printEl", printTitle: "printTitle", identifierStr: "identifierStr" }, host: { listeners: { "click": "print()" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: NzxPrintDirective, decorators: [{
             type: Directive,
@@ -267,6 +590,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImpor
                 type: Input
             }], printTitle: [{
                 type: Input
+            }], identifierStr: [{
+                type: Input
             }], print: [{
                 type: HostListener,
                 args: ['click']
@@ -275,20 +600,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImpor
 class NzxPrintModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: NzxPrintModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.3", ngImport: i0, type: NzxPrintModule, declarations: [NzxPrintComponent,
+            NzxPrintVComponent,
+            NzxPrintDirective,
+            NzxPrintContentDirective], imports: [CommonModule, NzGridModule, NzPaginationModule], exports: [NzxPrintComponent,
+            NzxPrintVComponent,
             NzxPrintContentDirective,
-            NzxPrintDirective], imports: [CommonModule], exports: [NzxPrintComponent, NzxPrintContentDirective, NzxPrintDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: NzxPrintModule, imports: [CommonModule] }); }
+            NzxPrintDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: NzxPrintModule, imports: [CommonModule, NzGridModule, NzPaginationModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: NzxPrintModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
                         NzxPrintComponent,
+                        NzxPrintVComponent,
+                        NzxPrintDirective,
+                        NzxPrintContentDirective,
+                    ],
+                    imports: [CommonModule, NzGridModule, NzPaginationModule],
+                    exports: [
+                        NzxPrintComponent,
+                        NzxPrintVComponent,
                         NzxPrintContentDirective,
                         NzxPrintDirective,
                     ],
-                    imports: [CommonModule],
-                    exports: [NzxPrintComponent, NzxPrintContentDirective, NzxPrintDirective],
                 }]
         }] });
 
@@ -301,5 +636,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { NzxPrintComponent, NzxPrintContentDirective, NzxPrintDirective, NzxPrintModule };
+export { NzxPrintComponent, NzxPrintContentDirective, NzxPrintDirective, NzxPrintModule, NzxPrintVComponent };
 //# sourceMappingURL=ng-zorro-antd-extension-print.mjs.map