All geek questions in one place

How to print a style sheet

I cannot print a Style page in SharePoint. Please take a look at the two images below. I added media="all"or media="print"in <style type=text/css>, but it did not work.

  • Screen before printing

1

  • Wait by clicking "Print"

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 HTML with div 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;
    }
}
+4
source share
1 answer

You can use:

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

The code is the same as if you were planning a mobile phone design.

0
source

Source: https://habr.com/ru/post/1543928/

More articles:


All Articles