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.
I have a simple div tag denoted with the id: dashboard and my code is as the following:
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.