sujithvj
commented
2 years ago Hi @ababacar-qc ,
Greetings from Syncfusion.
Based on the query we would like to let you know that the image mentioned in the shared code is a base64 string value of the image to be exported in pdf. So please provide the required image’s base64 string in that place for exporting it as pdf header(as demonstrated in the shared snippet).
We have also prepared a sample based on this for your reference and here you can check the image value used. Please find the sample below,
Sample: https://stackblitz.com/edit/angular-q8bpwc?file=app.component.ts
Documentation: https://ej2.syncfusion.com/angular/documentation/grid/pdf-export/#insert-an-image-in-headerfooter
Let us know if you have any concerns.
Regards, Sujith R
Hi Syncfusion ! I am using ejs since some weeks and I am facing a problem with exporting pdf with an image inserted.
In the documentation, I see this :
import { Component, OnInit, ViewChild } from '@angular/core'; import { data } from './datasource'; import { GridComponent, ToolbarItems, PdfExportProperties } from '@syncfusion/ej2-angular-grids'; import { ClickEventArgs } from '@syncfusion/ej2-angular-navigations'; import { image } from './image';
@Component({ selector: 'app-root', template: `<ejs-grid #grid id='Grid' [dataSource]='data' [toolbar]='toolbarOptions' height='272px' [allowPaging]='true' [allowPdfExport]='true' (toolbarClick)='toolbarClick($event)'>
}) export class AppComponent implements OnInit {
public data: object[]; public toolbarOptions: ToolbarItems[]; @ViewChild('grid') public grid: GridComponent;
ngOnInit(): void { this.data = data; this.toolbarOptions = ['PdfExport']; }
toolbarClick(args: ClickEventArgs): void { if (args.item.id === 'Grid_pdfexport') { // 'Gridpdfexport' -> Grid component id + + toolbar item name const pdfExportProperties: PdfExportProperties = { header: { fromTop: 0, height: 130, contents: [ { type: 'Image', src: image, position: { x: 40, y: 10 }, size: { height: 100, width: 250 }, } ] }, footer: { fromBottom: 160, height: 150, contents: [ { type: 'PageNumber', pageNumberType: 'Arabic', format: 'Page {$current} of {$total}', position: { x: 0, y: 25 }, style: { textBrushColor: '#ffff80', fontSize: 15 } } ] } }; this.grid.pdfExport(pdfExportProperties); } } }
Can I have more informations about ./Image in import { image } from './image'; ?