Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/angular/31.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何在素数表中创建打印方法_Javascript_Angular_Typescript_Primeng - Fatal编程技术网

Javascript 如何在素数表中创建打印方法

Javascript 如何在素数表中创建打印方法,javascript,angular,typescript,primeng,Javascript,Angular,Typescript,Primeng,在我的angular项目中,我使用了一个素数表,我想打印这个表中的所有数据和选定的数据,我不知道我是如何做到的,如果有任何方式或方法来处理它的话? 我的模板 <div class="mainTbl"> <p-table #filterT [columns]="cols" [value]="clients" [scrollable]="true" [paginator]="false" [rows]="2"

在我的angular项目中,我使用了一个素数表,我想打印这个表中的所有数据和选定的数据,我不知道我是如何做到的,如果有任何方式或方法来处理它的话? 我的模板

<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>

{{col.header}}
{{rowData[col.field]}

primeNg表格文档[

我一年前在我的一个项目中实现了它。我探索了以下选项,最后得到了最后一个本机选项

  • 我使用HtmlToCanvas插件生成一个画布,并将其导出为dom树的图像

    缺点:加工量大

  • 我已经使用jspdf根据我的内容生成了一个pdf文件,并根据需要设计了该pdf,它非常有用,并且具有丰富的插件功能

    缺点:它不能直接打印,它在新窗口中打开pdf,用户必须发出打印命令

  • 我在我的资产中保留了一个空的html文件,获取您想要打印的任何数据,在新选项卡中打开该html页面,在加载期间,您可以传递数据并生成html内容,在页面加载后触发打印命令

    优点:它可以用来绕过打印(直接打印),本机实现,但这需要一点时间


  • 希望有帮助!

    PrimeNg有一个内置的导出功能,格式不同。我知道,所以根据你的回答,导出和打印方法是一样的?不完全一样,但现在没有直接打印功能。那么我怎么做呢?这是个好主意;),顺便说一句,在搜索中我找到了这个插件ngx print[,这很有帮助,而且效果很好,无论如何,非常感谢你的回答。