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

Question

我试图在将网格导出为 pdf 时排除最后一列。

这是我在不同组件中使用的 pdf 导出组件。
本应用剑道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-pdf 组件中使用 kendo-grid-column 组件来做到这一点，如下所示：

<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> 添加到app-kendoPDF 组件内的kendo-grid-pdf 组件内，并在需要时将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 导出的更多信息。