简单的打印示例

Question

我需要在简单的html页面上提供print链接。

当用户点击它时，我想要一个显示print preview的弹出窗口，系统打印机应该出现。我猜有window.print();选项的东西，但这直接给出了没有预览的窗口打印选项。 我首先想要页面预览，然后调用window.print（）;一个示例html会有所帮助......

您提供的示例中的更多内容也可以在其中打印媒体类型。这样正常的html颜色看起来很红。但是当选择打印链接时，我们需要以蓝色显示打印预览。我知道这可能是在css文件中使用@media print的重写方法。

请举例......谢谢

Answer 1

打印预览功能是特定于客户端的。最新的chrome显示打印预览，但大多数其他浏览器只在调用print（）方法时显示打印对话框。

关于打印样式，您应该阅读打印样式表。 Eric Meyer几年前发表的一份A-list分开的文章是一个很好的开端，有一些不错的例子。 http://www.alistapart.com/articles/goingtoprint/

Answer 2

假设report.html是您要打印的页面。以这样的方式开发页面，即它接受媒体参数作为GET参数。即yoursite.com/report.html?media=X之类的内容 - 其中X可以是'screen'，'print'等。如果X为空，则可以使用默认值'screen'

编写2个css文件，即screen.css和print.css - 根据media参数（X）的值，将screen.css或print.css导入页面。

在screen.css中，将你的样式defs写在'@media screen'块中，如：

@media screen {
  body {
  ... screen style here ...
  }
}

在print.css中，将你的样式defs写在'@media screen，print'块中，如：

@media screen, print {
  body {
  ... print style here ...
  }
}

在您的report.html中，假设您有onclick打印按钮，请致电window.open('report.html?media=print', ...)。也可以在收到Ctrl + P时附加到文档对象的keydown处理程序中执行相同的操作。

此外，在您的网页onload中，检查媒体参数是否为'print'，如果是，则在短暂延迟（比如500毫秒）后调用window.print()，例如：

if(window.location.href.indexOf('media=print')!=-1) {
  setTimeout(function() { window.print(); }, 500);
}