Исключить последние столбцы при экспорте в 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>

Я хочу исключить поле редактирования / удаления при экспорте

Редактировать: это то, что я пробовал, но не сделалt работают

в компонентах заказа:

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>

Поместите компонент kendo-grid-column для каждого столбца, который вы хотите отобразить в PDF.

Поскольку вы используете один и тот же компонент экспорта 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>

Вы можете узнать больше об экспорте в PDFв документации кендо здесь .