如何打印页面以及所有 CSS 格式答案

【问题标题】：How to print a page along with all CSS formatting如何打印页面以及所有 CSS 格式
【发布时间】：2013-06-02 00:41:02
【问题描述】：

我正在做一个打印功能。我遇到的问题是正在打印的页面没有保留它的 CSS 格式。我在没有 CSS 的情况下打印纯文本。有谁知道如何在所有 CSS 格式不变的情况下打印页面。

【问题讨论】：

【解决方案1】：

您尝试打印的站点很可能具有用于打印的自定义样式表。该样式表通常被简化并适合可打印的页面。除非您能够修改或删除打印 CSS 文件，否则我认为您无能为力。

标记示例。

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

也许有一些方法可以使用 javascript 以编程方式删除样式表，但我不确定。

【讨论】：

你的意思是说..我需要为打印媒体创建另一个名为 print.css 的样式表吗？难道没有其他方法可以代替创建单独的打印样式表吗？
我是说网站默认使用所有 CSS 打印。如果您不使用 CSS 进行打印，则该页面已经有一个打印 CSS 表（或者可能已定义 @media="screen"，这会阻止样式通过。我想有一个远程可能性，即存在执行此操作的浏览器设置。您可以通过尝试从单独的浏览器打印来进行测试。如果您提供指向相关网站的链接，您可以确定地告诉您。

【解决方案2】：

对于任何仍然想知道的人来说，简单来说，您可以拥有一个在链接标记中包含 'media="screen" ' 的 CSS 样式表，如下所示：

<link id="Link1" href="../Styles/MainStyleSheet.css" rel="Stylesheet" type="text/css" runat="server" media="screen" />

这将为在浏览器屏幕中看到的内容设置样式。

您还可以在链接标记中使用另一个 CSS 样式表，其中包含 'media="print" '，如下所示：

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

这将为用户查看打印预览/打印在纸上时看到的内容设置样式。

如果你输入如下内容：

.inprintdisabled
{
 display: none;
}

在您的 print_voucher.css 文件中。在你的 HTML 代码中任何地方都有一个

<div class="inprintdisabled">

它将在浏览器窗口中显示该 div 的内容，但不会打印出来/在打印预览窗口中显示。

同样，如果你放

.inprintOnly
{
 display:none;
}

在你的 MainStyleSheet 和

<div class="inprintOnly">

在您的 HTML 代码中，您可以拥有不会出现在浏览器屏幕上的对象（文本、图像等），但会在打印预览/打印输出时出现。

希望这会有所帮助。

【讨论】：