This is a migrated thread and some comments may be shown as answers.

Export to PDF issue

1 Answer 182 Views
PDF Export
This is a migrated thread and some comments may be shown as answers.
Sam
Top achievements
Rank 1
Sam asked on 06 May 2020, 04:35 AM

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>

 

 

 

1 Answer, 1 is accepted

Sort by
0
Martin
Telerik team
answered on 07 May 2020, 01:38 PM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
PDF Export
Asked by
Sam
Top achievements
Rank 1
Answers by
Martin
Telerik team
Share this question
or