Adding Page Size Control to jsPDF


Sample Repository: Link


Adding page size control to the output of jsPDF is simple.

Go to Modules/Common/Reporting/PdfExportHelper.ts and edit the file as follows:

Find the export interface PdfExportOption and add pageSize?: string to the bottom of the list.


export interface PdfExportOptions {

    grid: Serenity.DataGrid<any, any>;

    onViewSubmit: \(\) => boolean;

    title?: string;

    hint?: string;

    separator?: boolean;

    reportTitle?: string;

    titleTop?: number;

    titleFontSize?: number;

    fileName?: string;

    pageNumbers?: boolean;

    columnTitles?: { \[key: string\]: string };

    tableOptions?: jsPDF.AutoTableOptions;

    output?: string;

    autoPrint?: boolean;

pageSize?: string;

}

Now search for the exportToPdf function and add the following lines and edit the jsPDF service call


`    export function exportToPdf(options: PdfExportOptions): void {

`

//...

`** var pgSize;
`**

if (options.pageSize != null)

pgSize = options.pageSize;

else

pgSize = 'a4'; //Default Page size

Q.serviceCall({

url: g.view.url,

request: request,

onSuccess: response => {

let doc = new jsPDF('l', 'pt',pgSize);

//...


You can now manage the page size by adding the pageSize when creating the button.


getButtons() {

        var buttons = super.getButtons\(\);



        buttons.push\(Common.PdfExportHelper.createToolButton\({

            grid: this,                

            onViewSubmit: \(\) => this.onViewSubmit\(\),

** pageSize: "a5"

**

        }\)\);





        return buttons;

    }

The available options on page size can be seen at http://rawgit.com/MrRio/jsPDF/master/docs/jspdf.js.html.

results matching ""

    No results matching ""