Как создать метод печати в таблице PrimeNg - PullRequest
Новая
       10

Как создать метод печати в таблице PrimeNg

0 голосов
/ 04 ноября 2019

В своем угловом проекте я использовал таблицу PrimeNg, и я хочу напечатать все данные и выбранные данные этой таблицы. Я не знаю, как мне это сделать, и есть ли способ или способ справиться с этим? мой шаблон 

<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 таблица документации [https://www.primefaces.org/primeng/#/table]

1 Ответ

1 голос
/ 05 ноября 2019

Я реализовал это год назад, в одном из моих проектов. Я изучил ниже параметры и, наконец, в конечном итоге с последним, который является родным.

  1. Я использовал плагин HtmlToCanvas для генерации, холста и экспорта его как изображение дерева DOM.

    CONS: к тяжелой обработке

  2. Я использовал jspdf для создания PDF-файла, основываясь на моем контенте, и спроектировал этот PDF-файл в соответствии с требованиями, он очень полезен и полезенБогатый плагин.

    CONS: Он не может выполнять прямую печать, он открывает PDF в новом окне, и пользователь должен дать команду печати. ​​

  3. Я сохранилПустой HTML-файл в моих ресурсах, получите данные, которые вы хотите распечатать, откройте эту HTML-страницу на новой вкладке, и во время загрузки вы можете передать данные и сгенерировать HTML-контент, а после загрузки страницы активировать команду печати. ​​

    PROS: Может использоваться для обхода печати (прямой печати), нативной реализации, но требует немного времени.

Надеюсь, эта помощь!

...