'How to Print a table with Style

I cannot print a page with Style in SharePoint. Please take a look on two images below. I've added the media="all" or media="print" into <style type=text/css> but these didn't work.

  • The screen before printing

1

  • Wait for clicking Print button

2

HTML:

<input onclick="printDiv('page_printer');" type="button" value="Print" style="font-family: Verdana,Arial,sans-serif !important; font-size: 8pt !important; width: 150px !important;"></input>
<table id="page_printer">
<tr>
    <td>
        <table border="0" cellspacing="0" width="100%">
            <tr>
                <td>
                    <fieldset class="box">
                        <legend class="text_transportation">EMPLOYEE GATE PASS</legend>
                        <table>
                            <tr>
                                <td width="190px" valign="top" class="ms-formlabel">
                                    <h3 class="ms-standardheader">
                                        <nobr>Date</nobr>
                                    </h3>
                                </td>
                            </tr>
                        </table>
                    </fieldset>
                </td>
            </tr>
        </table>
    </td>
</tr>
</table>

CSS:

.ms-bodyareaframe {
    padding: 8px;
    border: none;
}
.text_transportation {
    font-size: large;
    color: red;
}
.text_approveStep {
    font-size: small;
    color: red;
}
.box {
    width: 750px !important;
}
.set_width {
    width: 350px !important;
}
.set_backgr {
    text-decoration: none !important;
    color: #0072BC !important;
    font-family: Verdana, Arial, sans-serif !important;
    border: none !important;
    background-color: #F6F6F6 !important;
}
.set_backgr:hover {
    text-decoration: none !important;
    cursor: pointer;
}
.readOnly {
    background-color: #F6F6F6 !important;
    color: #676767 !important;
    border: none !important;
    cursor: default;
}

Javascript:

   function printDiv(divID) {
    //Get the HTML of div
    var divElements = document.getElementById(divID).innerHTML;
    //Get the HTML of whole page
    var oldPage = document.body.innerHTML;

    //Reset the page's HTML with div's HTML only
    document.body.innerHTML =
        "<html><head><title></title></head><body>" + divElements + "</body>";

    //window.print();
    //document.body.innerHTML = oldPage;

    //Print Page
    setTimeout(function () {
        print_page();
    }, 2000);

    function print_page() {
        window.print();
    }

    //Restore orignal HTML
    setTimeout(function () {
        restore_page();
    }, 3000);

    function restore_page() {
        document.body.innerHTML = oldPage;
    }
}
javascripthtmlcsssharepointprinting


Solution 1:[1]

There are a lot of print plugins printThis is one of them it is so sample to use

just select element you want print as following:

$('selector').printThis();

and this is a demo on it you have a lot of option if you want to customize print preview

Solution 2:[2]

You can use the:

@media print { p { font-size: 20px; color: red; } }

Code just like you would if you were going to design for a mobile phone.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 user2352120

Related Questions