javascript - Print/Preview Ignoring my Print.css

Question

Welcome To Ask or Share your Answers For Others

javascript - Print/Preview Ignoring my Print.css

posted Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

javascript - Print/Preview Ignoring my Print.css

I have an issue thats causing me some headaches. I'm trying to print a report and format it correctly with a print.css but it completely ignores my css everytime. Has anyone had this issue before? I made sure the CSS file is in the correct directory, etc but still no luck.

Here is my template:

Note: I use javascript to control the print button and inside the javascript is where I have included the CSS link. I have also tried putting it just on the HTML page but that didn't help.

...
<script type="text/javascript">

function printContent(id){

   str=document.getElementById(id).innerHTML
   newwin=window.open('','printwin','left=100,top=100,'+
                         'width=900,height=400, scrollbars=1')
   newwin.document.write('<HTML>
<HEAD>
')
   newwin.document.write('<TITLE>Print Page</TITLE>
')
   newwin.document.write('<link rel="stylesheet" type="text/css" '+
                         'href="/media/css/print.css" media="print"/>
')
   newwin.document.write('<script>
')
   ...

Now for this project I am using Ubuntu 10.10, and Firefox 7. If that helps at all.

Edit

I installed the web developer toolbar for firefox. It allows you to view the page as different medias. Now when I click print, it shows all my style changes, but when I print, it doesn't follow them.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-23T21:38:10+0000

<html>
    <head>
        <title>your website title</title>
        <link rel="stylesheet" media="screen" href="/media/css/mainStyle.css" type="text/css">
        <link rel="stylesheet" media="print" href="/media/css/print.css" type="text/css">
    </head>
    <body>
        <input type="button" value="Print" onClick="javascript:window.print();" />
    </body>
</html>

Maybe you might wanna give above HTML template a go, and see if that works for you or suits your needs.

In my opinion, your proposed function is actually better to be written on the server side rather than the client side with javascript, as you are trying to dynamically generate html page in there. You can output that page as print.html or something, and once it gets sent to the client, you then apply the print.css style and do the printing. Anyway, just a few ideas here, hopefully it helps a bit in your case. Cheers.

Categories

javascript - Print/Preview Ignoring my Print.css

javascript - Print/Preview Ignoring my Print.css

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags