We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Problem of deformatting PDF text and image in header and footer

Thread ID:

Created:

Updated:

Platform:

Replies:

143280 Mar 12,2019 06:33 PM UTC Mar 15,2019 03:59 AM UTC Angular - EJ 2 6
loading
Tags: Grid
Fabiano Melo
Asked On March 12, 2019 06:33 PM UTC

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

Thavasianand Sankaranarayanan [Syncfusion]
Replied On 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. 

  1. Share the package version we have checked with our latest version (16.4.55)
  2. If you are using old version then we suggest you to use latest might resolve the problem.
  3. Did you faced the problem in all browser and machines ?or else share that particular machine details(browser) too.
  4. Still you are facing the reported problem then share the sample or reproduce the reported problem in our sample.  

Regards, 
Thavasianand S. 


Fabiano Melo
Replied On 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

Fabiano Melo
Replied On 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

Thavasianand Sankaranarayanan [Syncfusion]
Replied On 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. 


Fabiano Melo
Replied On March 14, 2019 12:06 PM UTC

Thank you very much.

Once again it helped me a lot. Solved problem!

Thavasianand Sankaranarayanan [Syncfusion]
Replied On 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.

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;