Export to PDF issue

[Sam]

Hi, I am using export to PDF on kendo scatter chart. I am getting error  @progress/kendo-drawing/main"' has no exported member 'DrawOptions'.

Component file:

import { pdf, exportPDF } from '@progress/kendo-drawing';
import { saveAs } from '@progress/kendo-file-saver';

 

    onClick(pdf) {
        // enable/show the loader
        pdf.export().then(group => {
         const options = <pdf.PDFOptions>{ paperSize: 'A5', landscape: true };
         exportPDF(group, options).then(data => {
            console.log('PDF ready!');
            // disable/hide the loader
            saveAs(data, 'scene.pdf');
         });
        });
     }

HTML File

<kendo-pdf-export #pdf>

<kendo-chart [pannable]="true" [zoomable]="true">
<kendo-chart-series>
<kendo-chart-series-item type="scatter" [data]="graphData" xField="inc_margin_amt" yField="inc_sales_amt">
</kendo-chart-series-item>
</kendo-chart-series>
<kendo-chart-x-axis>
<kendo-chart-x-axis-item [labels]="valueAxisLabels" [axisCrossingValue]="marginthreshold">
</kendo-chart-x-axis-item>
</kendo-chart-x-axis>
<kendo-chart-y-axis>
<kendo-chart-y-axis-item [labels]="valueAxisLabels" [axisCrossingValue]="salesthreshold">
</kendo-chart-y-axis-item>
</kendo-chart-y-axis>
<!-- <kendo-chart-series-item-tooltip format="Margin {0:c0} - Sales {1:c0}">
</kendo-chart-series-item-tooltip> -->
<kendo-chart-tooltip>
<ng-template kendoChartSeriesTooltipTemplate let-dataItem="dataItem">
<div> {{'Promo Week' | translate:lang}} : {{ dataItem.promoweek_num }} </div>
<div *ngIf="showPromoName">{{'Promo Name' | translate:lang}} : {{ dataItem.internal_promo_desc }}</div>
<div *ngIf="showCIGDesc">{{'CIG Description' | translate:lang}} : {{ dataItem.cig_desc }} </div>
<div> {{'Promotion Detail' | translate:lang}} : {{ dataItem.promotion_Detail }}</div>
<div>
<span class="pull-left">{{'INCR_MARGIN' | translate:lang}} : {{ dataItem.inc_margin_amt | currencyNumber:0:false }}</span>
<span class="pull-right">{{'INCR_SALES' | translate:lang}}: {{ dataItem.inc_sales_amt | currencyNumber:0:false}}</span>
<div class="clearfix"></div>
</div>
</ng-template>
</kendo-chart-tooltip>
</kendo-chart>

 

</kendo-pdf-export>

 

 

 

[Martin Bechev]

Hi Sam,

Thank you for the provided code snippet.

In general, there are two approaches that could be taken to export the Chart into PDF document - using the Drawing library or using our dedicated PDF Export component. Let me provide some general information.

Using the Drawing library to export the Chart into PDF requires using exportPDF function of the library. The function expects as arguments the chart visual and a configuration object from type PDFOptions:

import { ChartComponent } from "@progress/kendo-angular-charts";
import { saveAs } from "@progress/kendo-file-saver";
import { exportPDF } from "@progress/kendo-drawing";
import { PDFOptions } from "@progress/kendo-drawing/pdf";

...

  public options: PDFOptions = { paperSize: "A5", landscape: true };

  public exportChart(): void {
    const visual = this.chart.exportVisual();
    exportPDF(visual, this.options).then(dataURI => {
      saveAs(dataURI, "chart.pdf");
 });
...

Here is an example:

https://stackblitz.com/edit/angular-hrm9y3?file=app/app.component.ts

 

The second approach utilizes our dedicated PDFExport component. The component allows the developer to export any content that is placed between <kendo-pdf-export> tags into PDF files and also provide handy built-in options to set the landscape, paperSize, margin and etc. In order to export the desired content, use saveAs built-in method which accepts only the file name as a parameter:

...
  template: `
    <button (click)="export(pdf)">Export</button>
    
    <kendo-pdf-export #pdf [landscape]="true" [paperSize]="'A5'">
      <kendo-chart>
...
      </kendo-chart>
    ></kendo-pdf-export>
  `
})
export class AppComponent {
...
  export(pdf) {
    pdf.saveAs("chart.pdf");
  }
}

Here is a demo:

https://stackblitz.com/edit/angular-wa2uet?file=app%2Fapp.component.ts

I hope this sheds some light on this case, but if any further questions come up, do not hesitate to write back.

Regards,
Martin
Progress Telerik