Question

我无法在SharePoint中打印带有Style的页面。请看下面的两张图片。我已将media="all"或media="print"添加到<style type=text/css>，但这些都无效。

打印前的屏幕

等待点击“打印”按钮

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

Answer 1

您可以使用：

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

代码就像你打算为移动电话设计一样。

Answer 2

有很多打印插件printThis是其中之一，因此使用起来很简单

只需选择要打印的元素

$('selector').printThis();

这是一个demo 如果要自定义打印预览，则有很多选择

如何打印带样式的表格

2 个答案: