Print on two different pages using javascript

Question

I have two texts and i want to print them on two different pages, this is what i did so far :

The button print :

<button onclick="javascript : CallPrint('idText1','idText2')" type="button">Print</button>

callPrint JavaScript method :

<script language="javascript" type="text/javascript">
    function CallPrint(firstText,secondText) {
        var firstContent = document.getElementById(firstText);
        var secondContent = document.getElementById(secondText);
        var WinPrint = window.open('', '', 'letf=0,top=0,width=1200,height=750,toolbar=0,scrollbars=0,status=0,dir=ltr');
        WinPrint.document.write(firstContent.innerHTML);
        WinPrint.document.write(secondContent.innerHTML);
        WinPrint.document.close();
        WinPrint.focus();
        WinPrint.print();
        WinPrint.close();
    }
</script>

The problem is, they are printed one after the other. How is it possible to separate them on two different pages (without using br tags). If it is not possible, i wanna know if it is possible to show two print windows instead of one.

Have a look at the page-break-after page-break-before page-break-inside css properties and put them inside a @print css rule. There's some combination in there where you can force and element to always start a new page. — Shilly
– Shilly, Commented Dec 23, 2016 at 10:54

Lukasz Wiktor · Accepted Answer · 2016-12-23 10:56:51Z

1

Add an empty paragraph with page-break-after: always style between the 2 texts:

WinPrint.document.write(firstContent.innerHTML);
WinPrint.document.write('<p style="page-break-after:always;"></p>');
WinPrint.document.write(secondContent.innerHTML);

answered Dec 23, 2016 at 10:56

Lukasz Wiktor

20.5k6 gold badges73 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

samar · Accepted Answer · 2016-12-23 10:56:30Z

0

You have to open two windows in the function in order to seperate the contents in two files.

function CallPrint(firstText,secondText) {
        var firstContent = document.getElementById(firstText);
        var secondContent = document.getElementById(secondText);
        var WinPrint = window.open('', '', 'letf=0,top=0,width=1200,height=750,toolbar=0,scrollbars=0,status=0,dir=ltr');
        WinPrint.document.write(firstContent.innerHTML);
        var WinPrint2 = window.open('', '', 'letf=0,top=0,width=1200,height=750,toolbar=0,scrollbars=0,status=0,dir=ltr');
        WinPrint2.document.write(secondContent.innerHTML);

answered Dec 23, 2016 at 10:56

samar

1802 silver badges16 bronze badges

1 Comment

Mehdi Souregi Over a year ago

It did not work i've already tried it, i got an exception : cannot read property 'document' of undefined

Collectives™ on Stack Overflow

Print on two different pages using javascript

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related