How to create print method in primeNg table

问题

In my angular project, I used a table of PrimeNg and I want to print all data and selected data of this table I don't know how I do it so if there any way or method to handle it? my template

<div class="mainTbl">
            <p-table #filterT
            [columns]="cols" [value]="clients" 
            [scrollable]="true" [paginator]="false" [rows]="2"
            scrollHeight="200px" [resizableColumns]="false">

                    <ng-template pTemplate="colgroup" let-columns>
                            <colgroup>
                                <col *ngFor="let col of columns" >
                            </colgroup>
                    </ng-template>   
                    <ng-template pTemplate="caption"> <!--global search-->
                        <div style="text-align: right"> 
                            <i class="fa fa-search" style="margin:4px 4px 0 0"></i>
                            <input type="text" pInputText size="50" placeholder="بحث" (input)="filterT.filterGlobal($event.target.value, 'contains')" style="width:auto">
                        </div>
                    </ng-template> <!--end global search-->
                <ng-template pTemplate="header" let-columns>
                    <tr>
                        <th *ngFor="let col of columns" pResizableColumn [pSortableColumn]="col.field">
                                {{col.header}}
                                <p-sortIcon  [field]="col.field" 
                                            ariaLabel="Activate to sort" 
                                            ariaLabelDesc="Activate to sort in descending order"
                                            ariaLabelAsc="Activate to sort in ascending order">
                                </p-sortIcon>
                        </th>
                        <!-- <th>إجراءات
                            <button class="btn btn-success">
                                <i class="fa fa-plus"></i>
                            </button>
                        </th> -->
                    </tr>
                    <tr>
                        <th *ngFor="let col of columns" [ngSwitch]="col.field">
                            <input class="filterInput" *ngSwitchCase="'id'" pInputText type="text" (input)="filterT.filter($event.target.value, col.field, 'contains')">
                            <input class="filterInput" *ngSwitchCase="'name'" pInputText type="text" (input)="filterT.filter($event.target.value, col.field, 'contains')">
                            <input class="filterInput" *ngSwitchCase="'phone'" pInputText type="text" (input)="filterT.filter($event.target.value, col.field, 'contains')">
                            <input class="filterInput" *ngSwitchCase="'address'" pInputText type="text" (input)="filterT.filter($event.target.value, col.field, 'contains')">
                            <input class="filterInput" *ngSwitchCase="'account'" pInputText type="text" (input)="filterT.filter($event.target.value, col.field, 'contains')">
                            <input class="filterInput" *ngSwitchCase="'nots'" pInputText type="text" (input)="filterT.filter($event.target.value, col.field, 'contains')">
                        </th>
                    </tr>
                </ng-template>
                <ng-template pTemplate="body" let-rowData let-columns="columns">
                    <tr>
                        <td *ngFor="let col of columns" class="ui-resizable-column" >
                                {{rowData[col.field]}}
                        </td>
                        <!-- <td class="text-center">
                            <button class='btn btn-info'>
                                <span class="fa fa-edit"></span>
                            </button>
                            <button class="btn btn-danger">
                                <span class="fa fa-trash"></span>
                            </button>
                        </td> -->
                    </tr>
                </ng-template>
            </p-table>

        </div>

primeNg table documentation [https://www.primefaces.org/primeng/#/table]

回答1:

I have implemented it a year ago, in one of my project. I have explored below options and lastly ended up with the last option that is native.

I have used HtmlToCanvas plugin to generate, A canvas and export it as image of dom tree.

CONS: To heavy processing
I have used jspdf to generate a pdf file, based on my content, and design that pdf as per requirement, it is very helpful and feature rich plugin.

CONS : It can not do direct printing, it open the pdf in new window and user have to give the print command.
I have kept a empty html file in my assets, get the data whatever you want to print, open that html page in new tab, and during on load you can pass the data and generate the html content, and after page load trigger the print command.

PROS: It can be use to bypass printing (direct print) , native implementation, but a bit time taking process.

Hope this help!

来源：https://stackoverflow.com/questions/58686406/how-to-create-print-method-in-primeng-table

标签

javascript

angular

typescript

primeng