javascript - CSS media print not working - Stack Overflow|江阴雨辰互联

I have a PHP page where I need to put a print button. For that I added the Javascript below:

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

Now to print the div prnt with some css, I added a css

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

My print.css is :

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

Where preorder_list is the class where all the data resides, the above code is same as the css I used to display in . But I am not getting the desired look when I click Pirnt, please have a look at the images .

EDIT:

modified javascript code :

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();

I have a PHP page where I need to put a print button. For that I added the Javascript below:

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

Now to print the div prnt with some css, I added a css

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

My print.css is :

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

EDIT:

modified javascript code :

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();

Share Improve this question edited Jul 29, 2017 at 9:29 Brian Tompsett - 汤莱恩 5,89372 gold badges61 silver badges133 bronze badges asked Jun 15, 2013 at 10:02 Nitish 2,7639 gold badges54 silver badges88 bronze badges

How did you add that css? link tags should be placed in the head section of the page, you haven't created a one to your pop-up window. – Teemu Commented Jun 15, 2013 at 10:06

Add a ment |

1 Answer 1

Sorted by: Reset to default 3

If you're going to create a document using document.write(), you have to create the whole document. Try this:

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>');

Notice, that media="print" has an affect only on the print itself, page is not styled on screen. You can omit the attribute, or use media="all" instead.

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745438792a4627733.html

javascript - CSS media print not working - Stack Overflow

1 Answer 1

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - CSS media print not working - Stack Overflow

1 Answer 1

相关推荐