eKoopmans / html2pdf.js

Client-side HTML-to-PDF rendering using pure JS.
MIT License
4.05k stars 1.37k forks source link

Downloading Dashboard Comprised of Google Charts extends past width of PDF #396

Open neldreth2021 opened 3 years ago

neldreth2021 commented 3 years ago

I have a simple div tag denoted with the id: dashboard and my code is as the following:

//Download PDF of Dashboard
$('#options-menu-download-as-pdf').on('click', function () {
    var dashboard = document.getElementById('dashboard');

    var options = {
        filename: 'Report.pdf',
        html2canvas: {
            scale: 2
        },
        pagebreak: {
            mode: ['avoid-all', 'css', 'legacy']
        },
        jsPDF: {
            format: [500, 200],
            unit: 'mm',
            orientation: 'landscape'
        }
    }
    html2pdf().from(dashboard).set(options).save();
});

This does everything I would like except I would like to be able to assign the width and height dynamically (I can do this already by window size or the current h/w of the dashboard in HTML but that could lead to poorly rendered PDFs if the user has their browser window not at full screen).

It appears as though the charts themselves cannot be manipulated to fit within the h/w of the pdf so the get cut off, whereas my grid styling actually fits to the dimensions of he document.

I looked at this thread: https://github.com/eKoopmans/html2pdf.js/issues/44 that discusses a 'fit-to-width' option. I am missing an example of that in documentation so I am not sure if that is an option with html2pdf, the underlying jsPDF, or even a CSS option.

alissonalberini commented 2 years ago

How about: $("#Elementd).css("height", "297mm");

Or have you already found a solution?