1

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;
    }
}
0

We usually use print style sheets (<link rel="stylesheet" href="print.css" type="text/css" media="print" />) to do this.

Check this guide: http://www.webcredible.co.uk/user-friendly-resources/css/print-stylesheet.shtml

Check the complete response here: Add printer-friendly functionality to SharePoint 2010

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.