Page 1 of 1

[ANGULAR] PDF use full height and witdth

Posted: Tue Aug 09, 2022 11:33 pm
by jfcolaux

I am using your "scheduler" component in my angular application v12.

"@bryntum/demo-resources": "^1.0.0",
"@bryntum/scheduler": "^5.0.2",
"@bryntum/scheduler-angular": "^5.0.2",

Output has been generated using Chrome Version 103.0.5060.134 (Build officiel) (64 bits).

Code

      pdfExport: {
        exportServer: 'https://xxx.xxx.pf:8060',
      }
     export() {
    this.scheduler.features.pdfExport.showExportDialog();
     }

Settings :
format: 'A3'
orientation: 'landscape'
range: 'current'
file format : PDF

Is it possible somehow to horizontal and vertical fit contents on a single page ?
I want the content to use the full width and height of a page even if the original ratio needs to be changed

Please view the pdf


Re: [ANGULAR] PDF use full height and witdth

Posted: Wed Aug 10, 2022 7:56 am
by Maxim Gorkovsky

Hello.
Unfortunately that's not supported out of the box. Although there is a way. pageTpl receives a set of stylesheets so you can add one more with !important to override the scaling.

Override.apply(class SInglePageExporterOverride {
  static get target() {
    return { class : SinglePageExporter }
  }

  pageTpl(data) {
    const me = this;
    const { totalWidth, totalHeight } = me.exportMeta;
    const scaleX = Math.min(1, me.getScaleValue(me.inchToPx(paperWidth), totalWidth)),
    const scaleY = Math.min(1, me.getScaleValue(me.inchToPx(paperHeight), totalHeight)),

    data.styles.push(`<style>
      .b-export-content {
        transform: scale(${scaleX, scaleY}) !important;
      }
      </style>`);

    return me._overridden.pageTpl.call(me, data);
  }
});

Re: [ANGULAR] PDF use full height and witdth

Posted: Fri Aug 12, 2022 10:51 pm
by jfcolaux

Hello Maxim,

Thank you for your answer. I will keep using your code in my Angular project can you tell me how to do it?


Re: [ANGULAR] PDF use full height and witdth

Posted: Mon Aug 15, 2022 11:46 am
by alex.l

Doesn't really matter if you use framework or not, this override applies on internal vanilla JS class.

Try to put the code into component.ts file.

import { Scheduler, SinglePageExporter, Override } from '@bryntum/scheduler';

// ....

@Component({
    selector    : 'app-root',
    templateUrl : './app.component.html',
    styleUrls   : ['./app.component.scss']
})
export class AppComponent {
    // ...
}


Override.apply(class SinglePageExporterOverride {
    static get target() {
      return { class : SinglePageExporter }
    }
    
// ... });

Re: [ANGULAR] PDF use full height and witdth

Posted: Tue Aug 16, 2022 9:11 pm
by jfcolaux

Hello Alex,
Thank you for your answer, I added this line :

import { Scheduler, SinglePageExporter, Override } from '@bryntum/scheduler';
@Component({
    selector: 'app-root',
    templateUrl: './shared/navigation/navigation.html'
})

but I have this error message :
Error: src/app/app.component.ts:14:21 - error TS2305: Module '"@bryntum/scheduler"' has no exported member 'SinglePageExporter'.

This is how I set up the app.module :

import { BryntumSchedulerModule } from '@bryntum/scheduler-angular';
@NgModule({
    imports: [
		...
        BryntumSchedulerModule,
    ],
    declarations: [
        ...
    ],
    providers: [
		...
    ],
    bootstrap: [AppComponent],
})
export class AppModule { }

Re: [ANGULAR] PDF use full height and witdth

Posted: Thu Aug 18, 2022 3:26 pm
by alex.l

Please see the application attached. This is our example that I edited with the code provided. I see no errors in console. Do you?
Please make sure you used latest version. Let me know if you found what's the problem.

To run the app:

npm i
npm start