Set paper height based on content

jakubin

I'm trying to generate a PDF (using chrome-pdf) to be printed on a receipt printer. This means that the paper size is 8cm wide and has practically infinite height. In order for the printout to print correctly I need to set the paper height to the height of the content. Otherwise, I get very long receipts with lots of white space.

The problem is that I can set the page width and height in template, which works fine, but I don't know what will be the height of generated receipt. I've tried so far to add a script to HTML template, which measures the page and adds a CSS rule with @page { size: ... }, but that gives me unpredictable and unexpected results (width is wrong, orientation sometimes changes, etc.).

Is there a way to add a script to a template that can access both HTML DOM to measure the content and configure JS Report page height?

Appreciate any help.

jan_blaha

You can do this


<script>
    window.JSREPORT_CHROME_PDF_OPTIONS = {
        height: '300px'
    }
</script>

https://playground.jsreport.net/w/anon/m1x96vVn

But not sure if you will be able to find a correct height in the dom.

jakubin

Thank @jan_blaha very much! That did the trick!

"Full" solution for the benefit of others:

<script>
    window.onload = function() {
        window.JSREPORT_CHROME_PDF_OPTIONS = {
            height: (document.body.scrollHeight + 100).toFixed(0) + 'px',
        };
    };
</script>

* +100 is extra space for margins I'm using