打印网页问题 :: 寻找打印网页的好教程（由 Jquery ui、jqgrid、zend 构建）[关闭]答案

【问题标题】：Print webpages problems :: looking for good tutorial to print web pages (build by Jquery ui, jqgrid , zend) [closed]打印网页问题 :: 寻找打印网页的好教程（由 Jquery ui、jqgrid、zend 构建）[关闭]
【发布时间】：2011-02-27 01:48:52
【问题描述】：

我应该使用 jqgrid 、Jquery 日历+其他 Jquery ui+背景图像等打印网站的网页。在服务器端使用 Zend 框架构建。

我没有网页打印方面的经验和知识，但我在工作中得到了这个使命。

我需要：

很好的教程或书籍（我阅读了有关背景图像问题）来很好地研究这个问题（我有时间）。
更实用的说明如何打印使用 Jquery + Jquery UI + jqgrid 构建的网页（我知道 Jquery UI 与 yui（雅虎库）相比存在浏览器兼容性问题）。

感谢所有提供帮助的好人，

【问题讨论】：

标签： javascript jquery css printing jqgrid

【解决方案1】：

关于样式表定义的media 属性，您可以解决很多打印问题。你可以声明

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

要包含一些仅用于屏幕的 css，请使用media="all" 定义一些信息同时显示在屏幕和打印机上，或者使 html 元素仅在打印期间显示。例如，使用 jQuery UI，您可以找到仅打印选定选项卡（或手风琴）的好主意。你会发现有用的不是打印一些隐藏的 div，比如div.loadingui。所以你可以制作一个类似的CSS

<style  type="text/css" media="screen">
    #printableButNotVisible { display:none }
</style>
<style type="text/css" media="print">
    #accordion h3, #vcol, div.loadingui, div.ui-tabs-hide,
               ul.ui-tabs-nav li, td.HeaderRight { display:none }
    #printableButNotVisible { display:block }
</style>

这只是一个例子，但我希望能解释一下主要思想。此外，您可以动态创建 css 并在 html 文档中插入或切换（参见 http://docs.jquery.com/Tutorials:5_Quick_jQuery_Tips#Switch_A_Stylesheet）。

在打印期间从页面中删除菜单可能是个好主意，但我不能给你举例，因为我不知道你使用什么样的菜单。

如果有人知道用于 jQuery UI 和 jqGrid 的打印媒体的优秀 CSS，那对我来说也会很有趣。

【讨论】：

非常感谢奥列格