Question

我正在处理一个有打印视图的页面，所以当用户点击“打印”时会弹出一个新窗口，我想为该窗口添加一个.css文件。

谢谢

Answer 1

包含样式表时，请使用：

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

Answer 2

您可以添加仅打印样式表

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

此样式表不需要“添加”到弹出窗口。当用户处于“普通”视图时，它将被忽略，然后仅在用户打印文档时应用。

如果您想要同时显示并应用于打印文档，只需将其级联即可。

<link rel="stylesheet"  type="text/css" href="normal.css" /> #normal styling
<link rel="stylesheet"  type="text/css" href="print.css" /> #override normal styling
<link rel="stylesheet"  type="text/css"  media="print" href="print.css" /> #override normal, for printer

这样你就可以获得两全其美的效果。使用normal.css中的新规则覆盖print.css中的css规则，根据需要使文档看起来如您所愿。新文档在视觉上看起来不同，然后以不同方式打印出来。

Answer 3

编辑：由于澄清而删除。新答案：

在新窗口中打开网址：blah.aspx?print=true

然后在你的后端：

//Assuming you use .NET...
if(Request.Querystring("print").toLower() == "true" ) { //Convert to bool type if you are so inclined
   printCSS.Visible = True;
}

HTML：

<head>
    <link rel="stylesheet" type="text/css" href="..." visible="false" runat="server" id="printCSS" />
</head>

您也可以使用其中一个jQuery方法将其加载到jQuery中。

Answer 4

$(document).ready(function () {
    $(".print").click(function () {
        $("head").append("<link>");
        css = $("head").children(":last");
        css.attr({
            rel: "stylesheet",
            type: "text/css",
            href: "css/ecsPrint.css"
        });
        return false;
    });
});

除非这是一个内部Web应用程序，否则我不建议用JS加载css。

如何在页面正文中添加css文件？

4 个答案: