AJAX - Print Page Content

Question

I am using AJAX to send form data to a server php file that builds and sends an html email. A portion of this data I am echoing on the server php file. The html that is echoed builds a table that I would like the user to print (on paper). I'd like to open the default browser print dialog so the user can print the table that he/she cannot see. I don't care if a new tab has to open displaying the echoed content. Is this even possible?

you can use javascript, to prompt to print a page the user is on. The rest of the question is just a little fuzzy. — , Jun 26 '12 at 20:10
Please clarify: Is the requirement to print INVISIBLE content? If not you can spawn the print dialog via javascript: window.print() — Matt Razza, Jun 26 '12 at 20:10

Robert · Accepted Answer · 2012-06-26T20:21:08.877

10

return that html form ajax request and then use javascript to print

This code is not tested

JQuery/Javascript

$.post("EmailFile.php", { "EmailParam": "EmailVal" },
     function(data){
         var HTML = data.EmailHTML;

        var WindowObject = window.open("", "PrintWindow", "width=750,height=650,top=50,left=50,toolbars=no,scrollbars=yes,status=no,resizable=yes");
        WindowObject.document.writeln(HTML);
        WindowObject.document.close();
        WindowObject.focus();
        WindowObject.print();
        WindowObject.close();

     }, "json");

PHP File (EmailFile.php)

$EmailData = $_POST['EmailParam'];
//...Send Email...

//..Build HTML...
$TableHTML = "<table></table>";

//Return HTML
$JSONArr['EmailHTML'] = $TableHTML;
echo json_encode($JSONArr);

edited Jun 26 '12 at 20:21

answered Jun 26 '12 at 20:10

Robert

780
1
7
15

This is close, thanks. Currently I'm trying to work out an issue with the above code where WindowObject is null and the popup that is opened just says undefined, but this is a good start. I just gotta get the returned html to be written in the new window. – Kevin_TA Jun 26 '12 at 20:45
1

Got it! The JSON stuff is unnecessary. I just `echo $TableHTML`, save `var HTML = data;` and `WindowObject.document.write(HTML);`. I've updated your answer. Thanks! – Kevin_TA Jun 26 '12 at 21:06

score 3 · Answer 2 · answered Jun 26 '12 at 20:12

If you're trying to print invisible content you could use two different css files for the different media (screen vs print) where you hide/unhide the required content via display: none; and then spawn the print dialog via window.print().

Your question is a little confusing.

For instance:

<link rel="stylesheet" type="text/css" href="theme1.css" media="screen" />
<link rel="stylesheet" type="text/css" href="theme2.css" media="print" />
<div class="hidden_on_page">YOU CAN'T SEE ME BUT YOU CAN PRINT ME!</div>
<div class="on_page">YOU CAN SEE ME BUT YOU CAN'T PRINT ME</div>

Then in theme1.css:

.hidden_on_page { display: none; }

Then in theme2.css:

.on_page { display: none; }

And you would trigger the print dialog to spawn when required via:

window.print();

score 0 · Answer 3 · edited Apr 30 '17 at 12:01

Find solution there is complete code:

http://codexhelp.blogspot.in/2017/04/php-ajax-window-print-page-content.html

<script>
function printContent(id){ 

         $.ajax({
            type: "POST",
            url: 'printContent.php',
            data: {id: id},
            type: 'get',
            success: function( response ) {



            var contents = response;


            var idname = name;


            var frame1 = document.createElement('iframe');
            frame1.name = "frame1";
            frame1.style.position = "absolute";
            frame1.style.top = "-1000000px";
            document.body.appendChild(frame1);
            var frameDoc = frame1.contentWindow ? frame1.contentWindow : frame1.contentDocument.document ? frame1.contentDocument.document : frame1.contentDocument;
            frameDoc.document.open();
            frameDoc.document.write('<html><head><title></title>');

            frameDoc.document.write('<style>table {  border-collapse: collapse;  border-spacing: 0; width:100%; margin-top:20px;} .table td, .table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th{ padding:8px 18px;  } .table-bordered, .table-bordered > tbody > tr > td, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > td, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > thead > tr > th {     border: 1px solid #e2e2e2;} </style>');

            // your title
            frameDoc.document.title = "Print Content with ajax in php";


            frameDoc.document.write('</head><body>');
            frameDoc.document.write(contents);
            frameDoc.document.write('</body></html>');
            frameDoc.document.close();
            setTimeout(function () {
                window.frames["frame1"].focus();
                window.frames["frame1"].print();
                document.body.removeChild(frame1);
            }, 500);
            return false;   




            }
        });

}
</script>

I have suggested an edit that involves altering your layout to a style that more clearly displays the structure of your code, which aids in bebugging / analysing your code. Spreading your ` — toonice, Apr 30 '17 at 12:41

AJAX - Print Page Content

3 Answers3

Linked