2

printボタンを配置する必要がある PHP ページがあります。そのために、以下の Javascript を追加しました。

    <script type="text/javascript">
    function PrintContent() {
        var DocumentContainer = document.getElementById('prnt');
        var WindowObject = window.open('', 'PrintWindow', 'width=750,height=650,top=50,left=50,toolbars=no,scrollbars=yes,status=no,resizable=yes');
        WindowObject.document.writeln(DocumentContainer.innerHTML);
        WindowObject.document.close();
        WindowObject.focus();
        WindowObject.print();
        WindowObject.close();
    }
</script>

cssでdivを印刷するためにprnt、cssを追加しました

<link rel="stylesheet" type="text/css" href="css/print.css" media="print">

私print.cssは：

.preorder_list 
{
    overflow:hidden;
}
.preorder_list h2
{
    font-family:Verdana, Arial, Helvetica, sans-serif;
    color:#0e337f;
    font-size:17px;
    margin-top:40px;
}
.preorder_list table
{
    width:750px;
    background:#d5d5d5;
    padding:8px 4px 8px 4px;
     border-radius: 4px;
    -moz-border-radius:4px;
    -webkit-border-radius: 4px;
    border:1px solid #dbdbe2;

}
.preorder_list th
{
    padding:5px;
}
.preorder_list td
{
    text-align:center;
    font-family:"Trebuchet MS";
    font-size:15px;
    padding:5px;
}
.preorder_list input[type="text"]
{
    width:50px;
    border:1px solid #b10c04;
    text-align:center;
}

.preorder_list input[type="text"]:focus
{
    color:#1226a1;
    font-weight:bold;
}

.preorder_list.mw
{
    padding:10px 0 10px 20px;
    border:1px solid #e4e3df;

}
.preorder_list.mw:hover
{
    background:#fbfbfa;
}
.preorder_list.sw
{
    margin-top:20px;
    padding:10px 0 10px 20px;
    border:1px solid #e4e3df;
}
.preorder_list h1
{
    color:#1b2d58;
    font-size:18px;
    font-family: "Franklin Gothic Medium", "Franklin Gothic", "ITC Franklin Gothic", Arial, sans-serif;
}
.preorder_list.sw:hover
{
    background:#fbfbfa;
}

はすべてのデータが存在するクラスです。上記のコードは、 で表示するために使用しpreorder_listたものと同じです。cssしかし、クリックしても期待どおりの外観が得られませんPirnt。画像を見てください。通常表示 1 つのメモと同じ出力でプレビューを印刷

編集：

変更された JavaScript コード:

var DocumentContainer = document.getElementById('prnt');
        var WindowObject = window.open('', 'PrintWindow', 'width=750,height=650,top=50,left=50,toolbars=no,scrollbars=yes,status=no,resizable=yes');

        WindowObject.document.writeln('<!DOCTYPE html>');
        WindowObject.document.writeln('<html><head><title></title>');
        WindowObject.document.writeln('<link rel="stylesheet" type="text/css" href="css/print.css" media="print">');
        WindowObject.document.writeln('</head><body>');
        WindowObject.document.writeln(DocumentContainer.innerHTML);
        WindowObject.document.writeln('</body></html>');

        WindowObject.document.close();
        WindowObject.focus();
        WindowObject.print();
        WindowObject.close();
4

1 に答える 1

3

を使用してドキュメントを作成する場合は、ドキュメントdocument.write()全体を作成する必要があります。これを試して：

WindowObject.document.writeln('<!DOCTYPE html>');
WindowObject.document.writeln('<html><head><title></title>');
WindowObject.document.writeln('<link rel="stylesheet" type="text/css" href="css/print.css">');
WindowObject.document.writeln('</head><body>');
WindowObject.document.writeln(DocumentContainer.innerHTML);
WindowObject.document.writeln('</body></html>');

印刷自体にのみ影響があることに注意しmedia="print"てください。ページは画面上でスタイル設定されていません。属性を省略したり、media="all"代わりに使用したりできます。

于 2013-06-15T10:17:22.053 に答える