- Home
- Forum
- Angular - EJ 2
- Problem of deformatting PDF text and image in header and footer
Problem of deformatting PDF text and image in header and footer
Hello
I'm implementing Grid PDF generation and I'm noticing a result that I did not like. In the header and in the footer both text and image are getting deformed, that is, stretched. As shown in the picture.
The header is being returned by this function:
generateReportHeaderSyncFusion(title: string): Object {
return {
fromTop: 0,
height: 120,
contents: [
{
type: 'Image',
position: { x: 0, y: 0 },
size: { height: 70, width: 70 },
src: this.imageHeaderSyncFusion
},
{
type: 'Text',
value: title,
position: { x: 90, y: 0 },
style: { textBrushColor: '#466884', fontSize: 20, fontFamily: 'Helvetica', bold: true },
},
{
type: 'Text',
value: 'Tech Shop Software House - Rua São Sebastião, 438 - Centro - Rio Verde - GO',
position: { x: 90, y: 30 },
style: { textBrushColor: '#000000', fontSize: 11, fontFamily: 'Helvetica' }
},
{
type: 'Text',
value: 'Rua São Sebastião, 438 - Centro - Rio Verde - GO',
position: { x: 90, y: 45 },
style: { textBrushColor: '#000000', fontSize: 11, fontFamily: 'Helvetica' }
},
{
type: 'Text',
value: 'Telefones: +55 (64) 3623 4281 / +55 (64) 2101 2393',
position: { x: 90, y: 60 },
style: { textBrushColor: '#000000', fontSize: 11, fontFamily: 'Helvetica' }
},
{
type: 'Line',
style: { penColor: '#000000', penSize: 1, dashStyle: 'Solid' },
points: { x1: 0, y1: 90, x2: 685, y2: 90 }
}
]
}
}
And the footer for this other function:
generateReportFooterSyncFusion(): Object {
return {
fromBottom: 0,
height: 50,
contents: [
{
type: 'PageNumber',
pageNumberType: 'Arabic',
format: `TSW . TECH SHOP WEB . Versão ${environment.version} | Página {$current} de {$total} | Emitido em ${moment().format('DD/MM/YYYY HH:mm:ss')}`,
position: { x: 0, y: 0 },
style: { textBrushColor: '#466884', fontSize: 10, fontFamily: 'Helvetica' }
}
]
}
}
Is there any way around this unconfiguration problem?
Thank you in advance for the help.
Attachment: largura_9bc8ed4c.rar
SIGN IN To post a reply.
6 Replies
TS
Thavasianand Sankaranarayanan
Syncfusion Team
March 13, 2019 07:03 AM UTC
Hi Fabiano,
Greeting from Syncfusion.
We have validated the provided information and checked with our end and its working fine at our sample. Kindly refer the below sample and attached screenshot for more information.
|
|
Could you please provide more or below details regarding your problem that will helpful for us to provide a better solution as soon as possible.
- Share the package version we have checked with our latest version (16.4.55)
- If you are using old version then we suggest you to use latest might resolve the problem.
- Did you faced the problem in all browser and machines ?or else share that particular machine details(browser) too.
- Still you are facing the reported problem then share the sample or reproduce the reported problem in our sample.
Regards,
Thavasianand S.
FM
Fabiano Melo
March 13, 2019 10:46 AM UTC
Hello
I checked and the version is the most current.
...
"@syncfusion/ej2-angular-buttons": "^16.4.55",
"@syncfusion/ej2-angular-documenteditor": "^16.4.54",
"@syncfusion/ej2-angular-grids": "^16.4.55",
"@syncfusion/ej2-angular-inputs": "^16.4.55",
...
I'm using Google Chrome only, and the same problem happens on other computers. I have not tested it on other browsers, as it is a prerequisite to using Google Chrome on what I'm doing.
I made a change to the stackblitz example you sent me. I inserted the page orientation, and the same problem occurred.
pageOrientation: 'Landscape',
I really do not know what could be wrong, I checked my code and there is nothing different that might be causing the problem. What I noticed and that the problem is in the orientation of the page, if it is as landscape occurs the deformation.
I have two other problems, one in PDF generation and one in print. But I prefer to open other and separate requests and with the different title, as this may help the community.
Attachment: landscapeerror_8460f837.rar
FM
Fabiano Melo
March 13, 2019 07:22 PM UTC
Good afternoon.
I still have the same problem of image and text deformation when I choose to use PDF in landscape mode. In portrait mode the problem does not run.
I no longer know where to look for a solution and I have no solution option.
As I wrote in the previous response to this, if I insert in the Stackblitz example that gave me the page orientation parameter the example also gives the same problem.
https://stackblitz.com/edit/angular-f2r1yw-j157ms?file=default-exporting.component.ts
TS
Thavasianand Sankaranarayanan
Syncfusion Team
March 14, 2019 07:35 AM UTC
Hi Fabiano,
Thanks for your udapte.
Query: if I insert in the Stackblitz example that gave me the page orientation parameter the example also gives the same problem.
We have validated the provided information and checked with our end. We suggest you to use the below way to resolve the reported problem. In the below sample, we have bind the created event for Grid and override the default processSectionExportProperties method of pdfExportModule.
Please refer the below code example and updated sample for more information.
|
<ejs-grid #grid [dataSource]='data' allowPaging='true' [pageSettings]='pageSettings'(created)='created($event)' [toolbar]='toolbar' (toolbarClick)='toolbarClick($event)' [allowPdfExport]='true'>
</ejs-grid>
. . . . .
import {PdfPageSettings, PdfPageOrientation, PointF, SizeF, RectangleF, PdfPageTemplateElement} from '@syncfusion/ej2-pdf-export'
export class ExportingComponent implements OnInit {
. . . .
created(){
(this.grid.pdfExportModule as any).processSectionExportProperties = function (section, pdfExportProperties){
let pdfPageSettings: PdfPageSettings = new PdfPageSettings();
pdfPageSettings.orientation = PdfPageOrientation.Landscape; // you can set orientation here
pdfPageSettings.size = this.getPageSize('A4');
pdfPageSettings.margins.setMargins(10);
section.setPageSettings(pdfPageSettings);
var clientSize = pdfPageSettings.size;
if (!isNullOrUndefined(pdfExportProperties.header)) {
var header = pdfExportProperties.header, position = new PointF(0, header.fromTop), size = new SizeF(clientSize.width - 80, .75 * header.height), bounds = new RectangleF(position, size);
this.pdfDocument.template.top = this.drawPageTemplate(new PdfPageTemplateElement(bounds), header);
pdfExportProperties.header = undefined;
}
if (!isNullOrUndefined(pdfExportProperties.footer)) {
/* tslint:disable-next-line:no-any */
var footer = pdfExportProperties.footer;
var position = new PointF(0, ((clientSize.width - 80) - (footer.fromBottom * 0.75)));
var size = new SizeF((clientSize.width - 80), (footer.height * 0.75));
var bounds = new RectangleF(position, size);
this.pdfDocument.template.bottom = this.drawPageTemplate(new PdfPageTemplateElement(bounds), footer);
pdfExportProperties.footer = undefined;
}
return section;
}
}
toolbarClick(args: ClickEventArgs): void {
switch (args.item.text) {
case 'PDF Export':
let pdfExportProperties: any = {
header: {
. . . . .
{
type: 'Line',
style: { penColor: '#000000', penSize: 1, dashStyle: 'Solid' },
// change the line X2 point
points: { x1: 0, y1: 90, x2: 842*1.33, y2: 90 }
},
};
this.grid.pdfExport(pdfExportProperties);
break;
}
}
}
|
Regards,
Thavasianand S.
FM
Fabiano Melo
March 14, 2019 12:06 PM UTC
Thank you very much.
Once again it helped me a lot. Solved problem!
TS
Thavasianand Sankaranarayanan
Syncfusion Team
March 15, 2019 03:59 AM UTC
Hi Fabiano,
We are happy that the problem has been solved.
Please get back to us if you need any further assistance.
Regards,
Thavasianand S.
SIGN IN To post a reply.
- 6 Replies
- 2 Participants
-
FM Fabiano Melo
- Mar 12, 2019 06:33 PM UTC
- Mar 15, 2019 03:59 AM UTC