简单的打印示例答案

【问题标题】：Simple print example简单的打印示例
【发布时间】：2011-12-20 07:23:00
【问题描述】：

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

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

除了您提供的示例之外，还可以在其中包含媒体类型打印。使正常的 html 颜色看起来是红色的。但选择了打印链接时，我们需要以蓝色显示打印预览。我知道这可能是在 css 文件中使用 @media print 覆盖的方法。

任何例子请...谢谢

【问题讨论】：

您的问题到底是什么？您在问题本身中回答了这两个问题。
他在问一个例子......“请提供任何例子”应该暗示了这一点:)
@Blender 我知道通过添加 window.print 会加载打印选项<form> <input type="button" value="Print this page" onClick="window.print()"> </form> 但它不会首先显示打印预览。我该怎么做？
这很难做到，因为大多数浏览器都将自己的自定义样式应用到正在打印的每个页面（即使它没有@media print）样式表。你必须以某种方式解决这个问题。
我知道 Firefox 在打印时会自动删除所有背景。还有其他东西也被删除了，但我不记得是什么了。

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

写入 2 个 css 文件，即 screen.css 和 print.css - 根据媒体参数 (X) 的此值，将 screen.css 或 print.css 导入您的页面。

在 screen.css 中，将您的样式定义写入“@media screen”块中，例如：

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

在 print.css 中，将您的样式定义写入“@media screen, print”块中，例如：

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

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

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

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

【讨论】：