How to Set Print Page with New HTML Codes in jQuery?

Question

So , I have this problem Print Problem

but none of those solved my problem, instead, I'm thinking of a new way,.

Does anybody know how to print a new HTML code from JavaScript jQuery ?

so lets say I have two piece of screen : 1 & 2

1 : my web screen, working screen, display screen, html code goes here.

2 : hidden screen, not showing.

when I press "print" button, my jquery will send codes to create a new html code in screen 2. and it will print screen 2.

Answer 1

This works on me.

html:

<div id='print-section'></div>
<div id='print-btn'></div>

css:

@media print {
    body * {
        visibility: hidden;
    }

    @page {size: portrait}

    #print-section {
        visibility: visible;
        width : 100%;
        height : auto;
    }
}

js:

$("#print-btn").click(function(){
     var htmlText = '<p>HTML TO PRINT</p>';

     $( "#print-section" ).html( htmlText ).promise().done(function() {
            window.print();
    });
});