Question

我正在尝试将网格导出到pdf时排除最后一列。

这是我在不同组件中使用的pdf导出组件。
此应用程序kendo pdf组件

<kendo-grid-pdf fileName="{{pdfname}}" [allPages]="true" paperSize="A4" [repeatHeaders]="true" [landscape]="true" >
  <kendo-grid-pdf-margin top="2cm" left="1cm" right="1cm" bottom="2cm"></kendo-grid-pdf-margin>
  <ng-template kendoGridPDFTemplate let-pageNum="pageNum" let-totalPages="totalPages">
   <div class="page-template">
      <div class="header">
        <div style="float: right">Page {{ pageNum }} of {{ totalPages }}</div>
       {{componentName}}
      </div>
      <div class="footer">
        Page {{ pageNum }} of {{ totalPages }}
      </div>
    </div>

  </ng-template>
</kendo-grid-pdf>
<kendo-grid-excel fileName="{{pdfname}}"></kendo-grid-excel>

这是我要导出的网格：

<kendo-grid [data]="gridData" [height]="409" [pageSize]="state.take"
[skip]="state.skip"
[sort]="state.sort"
[filter]="state.filter"
[sortable]="true"
[pageable]="true"
[filterable]="true"
(dataStateChange)="dataStateChange($event)">
<ng-template kendoGridToolbarTemplate>
  <button class="kendo-pdf" kendoGridPDFCommand icon="file-pdf">Export to PDF</button>
  <button class="kendo-excel" type="button" kendoGridExcelCommand icon="file-excel">Export to Excel</button>
</ng-template>
  <kendo-grid-column field="name" title="Name" width="50" filter="text" format="{0:c}">
  </kendo-grid-column>
  <kendo-grid-column field="age" title="Age" width="50" filter="numeric" format="{0:c}">
  </kendo-grid-column>
  <kendo-grid-column field="city" title="City" width="50">
  </kendo-grid-column>
  <kendo-grid-column width="20" field="Edit / Delete" filter="false">
      <ng-template kendoGridCellTemplate let-dataItem  >
        <a (click)="showConfirmation()"> <i class="fa fa-trash" ></i></a>
        <a [routerLink]="['/addEmployee']" routerLinkActive="router-link-active"  > <i class="fa fa-edit"></i></a>
      </ng-template>
  </kendo-grid-column>  
  <app-kendoPDF [componentName]=name></app-kendoPDF>

我要在导出时排除编辑/删除字段

编辑：这是我尝试过的但没起作用的

订购组件：

kendo-grid [data]="gridData" [height]="409" [pageSize]="state.take" [skip]="state.skip" [sort]="state.sort" [filter]="state.filter"
  [sortable]="true" [pageable]="true" [filterable]="true" (dataStateChange)="dataStateChange($event)">
  <ng-template kendoGridToolbarTemplate>
    <button  class="kendo-pdf" kendoGridPDFCommand icon="file-pdf">Export to PDF</button>
    <button class="kendo-excel" type="button" kendoGridExcelCommand icon="file-excel">Export to Excel</button>
  </ng-template>
  <kendo-grid-column field="orderNumber" title="Order Number" width="20" filter="text">
  </kendo-grid-column>
  <kendo-grid-column field="orderTable" title="Order Table" width="20" filter="text" format="{0:c}">
  </kendo-grid-column>
<app-kendoPDF [componentName]=name>
    <kendo-grid-column field="orderNumber" title="Order Number">
    </kendo-grid-column>
    <kendo-grid-column field="orderTable" title="Order Table">
    </kendo-grid-column>
</app-kendoPDF>
</kendo-grid>

KendoPdf组件：

<kendo-grid-pdf fileName="{{pdfname}}" [allPages]="true" paperSize="A4" [repeatHeaders]="true" [landscape]="true" >
  <kendo-grid-pdf-margin top="2cm" left="1cm" right="1cm" bottom="2cm"></kendo-grid-pdf-margin>
  <ng-template kendoGridPDFTemplate let-pageNum="pageNum" let-totalPages="totalPages">
   <div class="page-template">
      <div class="header">
        <div style="float: right">Page {{ pageNum }} of {{ totalPages }}</div>
       {{componentName}}
      </div>
      <div class="footer">
        Page {{ pageNum }} of {{ totalPages }}
      </div>
    </div>
  </ng-template>
  <ng-content></ng-content>
</kendo-grid-pdf>
<kendo-grid-excel fileName="{{pdfname}}"></kendo-grid-excel>

Answer 1

您可以通过使用kendo-grid-column组件内的kendo-grid-pdf组件来做到这一点，就像这样：

<kendo-grid-pdf
    fileName="ProductsPrice.pdf"
    paperSize="A4"
    [scale]="0.8"
    [repeatHeaders]="true"
    [margin]="{ top: '1cm', left: '1cm', right: '1cm', bottom: '1cm' }">
        <kendo-grid-column field="ProductName" title="Name">
        </kendo-grid-column>
        <kendo-grid-column field="UnitPrice" title="Price">
        </kendo-grid-column>
</kendo-grid-pdf>

为要显示在PDF中的每一列放置一个kendo-grid-column组件。

由于您在多个地方使用了相同的PDF导出组件，并且每种情况下的列都会发生变化，因此可以使用ng-content标签为每种情况自定义列。

要执行此操作，请在<ng-content></ng-content>组件内的kendo-grid-pdf组件内添加app-kendoPDF，并在需要时将kendo-grid-column组件放置在使用app-kendoPDF组件的组件，如下所示：

在app-kendoPDF组件的模板中：

<kendo-grid-pdf fileName="{{pdfname}}" [allPages]="true" paperSize="A4" [repeatHeaders]="true" [landscape]="true" >
    <kendo-grid-pdf-margin top="2cm" left="1cm" right="1cm" bottom="2cm"></kendo-grid-pdf-margin>
    <ng-template kendoGridPDFTemplate let-pageNum="pageNum" let-totalPages="totalPages">
        <div class="page-template">
            <div class="header">
                <div style="float: right">Page {{ pageNum }} of {{ totalPages }}</div>
                {{componentName}}
            </div>
            <div class="footer">
                Page {{ pageNum }} of {{ totalPages }}
            </div>
        </div>
    </ng-template>
    <!--Add this to have the kendo-grid-column components from the code below appear here-->
    <ng-content></ng-content>
</kendo-grid-pdf>
<kendo-grid-excel fileName="{{pdfname}}"></kendo-grid-excel>

在您包括的第二个模板中，而不是简单的<app-kendoPDF [componentName]=name></app-kendoPDF>：

<app-kendoPDF [componentName]=name>
    <kendo-grid-column field="<name of column #1>" title="<name of column #1>">
    </kendo-grid-column>
    <kendo-grid-column field="<name of column #2>" title="<name of column #2>">
    </kendo-grid-column>
    <kendo-grid-column field="<name of column #3>" title="<name of column #3>">
    </kendo-grid-column>
    <!--And so on...-->
</app-kendoPDF>

您可以在Kendo文档here中阅读有关PDF导出的更多信息。

导出为pdf时排除最后几列-Angular 6 Kendo

1 个答案: