javascriptelectron

printToPDF does not print all webContent view

I am using the code below to save the webContents view into PDF file.

    saveReport() {
        const remote = require('electron').remote;
        const webContents = remote.getCurrentWebContents();

        webContents.printToPDF({
            pageSize: 'A3',
            landscape: false
        }, (err, data) => {
            remote.require('fs')
                .writeFile(TEMP_URL, data);
        });
    },

The view is a report and have a really long content inside it (see below).

enter image description here

Instead of showing a full view, I see a partial view inside a single page with a scrollbar. Below is the screenshot for the generated PDF,

enter image description here

Expected behavior

Just like a real browser, the generated PDF should contain all the view if a single page does not provide enough space, multiple pages should be generated.

I am thinking probably something wrong with my css.

Solution

  • I had a similar requirement for my current project and i've noticed that when you use this api , you can customize how the pdf will be rendered by adding a css file to your main html with the media query set to print media="print".

    this css stylesheet will be applied only if you print something or export it to pdf via the api method printToPdf().

    if you are using some ui kit like photon or bootstrap , try to disable it and see if it helps.

    last tip: try to use the css property page-break-before: always;

    Hope this helps