I have this html/JS code that generates N tables based on user input. I’m trying to separate the content in pages of “A4” size and with no more that 6 tables within each page in order to give the option to print as PDF.
I’m using the built-in JS function window.print(). The issue is that when the browser opens up the printing preview window, only detects 2 pages and only first page content appears correct, the rest appears empty.
You can try for example to generate 24 tables (that would be 4 pages) and when click on print, only 2 pages are detected.
Basically, the main code is the highlighted in yellow to convert as PDF the content generated by the other 2 JS codes.
May someone help me to fix this issue in which I’m stuck. Thanks in advance
Hello, the pages are not empty. Testing and testing, this is the updated codeEdit fiddle - JSFiddle - Code Playground. Now if it detects the page but the content is scrolling down and a cut content appears and as a consequence, an extra page. If you want, you could test the shared link, entering for example 24, in the input form
It will automatically ask how many tables want to generate. Enter for example 24, then click on print and you’ll see something like this: If you enter 24 should be 4 pages but appears 5 pages since there is a scroll down as pages go forward.
Thanks for your answer. I’ve added break-after: always; and still pages brake wrong. What could be missing? This is the code so far Edit fiddle - JSFiddle - Code Playground
and not this as you have shared here…