Question

有没有办法显示带有 CSS的网页进行打印而非标准CSS？

我希望在打印前看看网页的外观。我不希望在打印对话框中打印预览，而是使用CSS进行打印的网页。我使用@media print指定打印样式。

Answer 1

我不确定您是否只想在开发时看到预览或向Vistor展示预览。

如果您想为访问者提供在打印前预览页面的选项，我建议使用这样的JQuery插件：

JQuery Print Preview

Answer 2

如果你正在使用铬压机F12 - ＆gt;来源 - ＆gt;仿真 - ＆gt;媒体和检查＆＃34; CSS媒体＆＃34;

Answer 3

据我所知，您希望浏览器显示带有CSS的打印媒体页面。

大多数浏览器都可以在＆＃34;打印预览＆＃34; （Opera没有打开新窗口就做得很好！）。

有些浏览器可以让用户在命名时在CSS之间切换; a list apart上有一篇很好的文章。例如：

<link rel="alternate stylesheet" type="text/css" href="paul.css" title="wacky" />

有了这个，你可以做类似的事情：

<!-- specify the CSS for display devices -->
<link rel="stylesheet" type="text/css" href="main.css" title="default" media="display">
<!-- set an *alternate* stylesheet, the user will be able to switch between it and the previous, for display only -->
<link rel="alternate stylesheet" type="text/css" href="print.css" title="print preview" media="display">
<!-- this is the stylesheet for printing, note this is the same file as before -->
<link rel="alternate stylesheet" type="text/css" href="print.css" media="print">

并按照之前引用的A list appart文章的指导，让用户在CSS之间切换。

我不想包含所有代码，但主要部分是：

function setActiveStyleSheet(title) {
   var i, a, main;
   for(i=0; (a = document.getElementsByTagName("link")<i>); i++) {
     if(a.getAttribute("rel").indexOf("style") != -1
        && a.getAttribute("title")) {
       a.disabled = true;
       if(a.getAttribute("title") == title) a.disabled = false;
     }
   }
}

显示包含打印样式的网页

3 个答案: