问题 Chrome打印预览错误


我想打印一个html页面。 html页面是由我开发的,这个页面可以用mozilla打印,即。

在Chrome中:当按下CTRL + P时会弹出预览窗口,但它会显示:“打印预览失败”,我无法打印任何内容。 在Opera中,它不会显示打印窗口,也不会按下CTRL + P,也不会从菜单 - >打印,Safari打印白页。

你有什么想法可能有什么不对吗?什么样的错误会导致这个问题?是否有任何错误日志的铬,以找出什么是错的?

编辑

我尝试删除html元素,css脚本,javascripts,我发现我的一个css文件阻止打印预览,我会去一个,并将尝试从CSS中删除块,我希望我能找到这种方式在哪里是错误。

编辑2

没有成功......是否有可能,css对于浏览器来说是大的? css里面有导入,我试图删除它们,但这并没有解决我的问题...还有其他建议吗?

编辑3 我有以下内容:

<link rel="stylesheet" href="/css/style.default.css" type="text/css" media="all"/>
<link rel="stylesheet" href="/css/myStyle.css" type="text/css" media="all"/>
<link rel="stylesheet" href="/css/print.css" type="text/css" media="print"/>

如果我评论第一个包含,或者将媒体更改为screen.default.css的屏幕,则会生成预览,但缺少css规则。 style.default.css是我的全局css,它有17个其他的css导入它:

@import url('jquery.ui.css');
@import ...

我试图评论导入,并尝试使用该文件中的css规则。 (如果错误来自其中一个导入,这应该可以解决问题),但这并没有修复它,所以我尝试=反过来,评论css规则,并尝试只使用导入,相同的结果。只有成功,如果我评论整个文件...

还有其他建议吗?有人知道chrome是否记录了这样的错误?


3067
2018-05-29 07:35


起源

当我尝试使用Chrome 40.0.2214.111 m“打印”到pdf非常非常长的(约11,000条评论)Disqus讨论时,这种情况发生在我身上。在chrome:// plugins /我可以看到启用了Chrome PDF Viewer,并禁用了Adobe Reader。打印/打印预览屏幕上没有“高级”。发生错误后,除了[取消]外,该屏幕上的所有内容都被禁用 - Dave Burton


答案:


最后我发现了错误。 2个css规则阻止浏览器生成预览:

min-height: 100%;
height: 100%;

position: fixed;

10
2018-05-29 13:33



你能指定这些属性分配给哪些元素? - Wissam El-Kik
是的,已经分配给div-s - Zsolt Tolvaly
我猜问题只与“位置:固定”有关。 “position:fixed”和“position:absolute”无法在打印页面中显示。通常,您应该使用CSS隐藏这些元素,或者重新考虑是否可以使用print CSS下的“position:relative”来定位它们。 - Wissam El-Kik
我试过没有固定位置,问题一直存在,直到我删除了高度属性。 - Zsolt Tolvaly
我通过删除单个问题解决了同样的问题 position:fixed (默认为 position:static来自包裹整个可打印区域的div。 - David R Tribble


我知道我可能会迟到一点,但我希望这将有助于其他人。

打印预览的问题通常与样式有关。有些属性可能会破坏我们的预览,我们可能会在解决此问题之前花费很长时间。

以下是一些可能导致此错误的最常见属性:高度,位置,溢出。打印时必须记住:

  • height: 100%
  • position: fixed/absolute/relative (在某些情况下),
  • overflow: hidden

是'棺材里的最后一颗钉子'。

没有容器应该设置它们。 对于 position 您可以使用 static,为 height 使用 fixed values 或者只是留下一个 auto 选项。永远记得设置 overflow: visible。否则我们想要打印的东西可能会被隐藏。

另外,我写了一篇关于在Ionic中打印的简短文章,我在这里更多地解释了一个主题。你可以在这里找到它: http://blog.primemodule.com/print-style-sheets-in-ionic-framework/


2
2018-04-21 06:24





谷歌快速搜索返回 这个

如果您停用Chrome的PDF查看器并启用了Adobe,则可能会看到此消息。完成此操作后,您将收到描述的消息。您仍然可以通过单击“打印预览”屏幕中的“高级”进入edvrde状态来访问打印机框。

或者您可以禁用“打印预览”。你这样做:

  1. 右键点击您的Chrome快捷方式
  2. 转到“属性”
  3. 在“目标”字段中,转到文件位置的末尾并添加:“ - disable-print-preview”。请同时包括两个空格。另外,正如enystrom所提到的,如果你有它们,请把它放在引号之外。这样,它应该看起来像:   一个。 C:\ Users [用户名] \ AppData \ Local \ Google \ Chrome \ Application \ chrome.exe --disable-print-preview   湾“C:\ Users [用户名] \ AppData \ Local \ Google \ Chrome \ Application \ chrome.exe” - disable-print-preview(如果有引号)
  4. 按确定。

如果您正在运行Win 7并将Chrome固定到任务栏,则应将其删除,然后将其移至“开始”菜单中的Chrome图标,然后将其复制到任务栏。


1
2018-05-29 09:52



这不是一个解决方案,我已经尝试了我在谷歌找到的所有东西,这就是我在这里问的原因。这是一个最终用户应用程序,将被出售,所以我需要修复我的页面中的错误。这个应用程序的其他页面不包括整个设计,它们被每个浏览器正确打印,这就是为什么我认为它的原因是或html或css错误 - Zsolt Tolvaly


如上所述 这里,这个问题不会修复(检查bug的状态)。

问题与您的PDF阅读器有关。您最有可能删除“Microsoft XPS文档编写器”或“Adobe PDF”。您可以解决PDF阅读器问题 这里。 请记住,“打印预览”未链接到“打印”功能。 您仍然可以在没有打印预览的情况下打印网页。在大多数浏览器中,打印预览不准确。最好打印网页以检查输出。


0



第一个是笑话,第二个是无法帮助我,我已经为printig工作了css,但我不能将它与其他css文件一起使用,我无法弄清楚为什么...... - Zsolt Tolvaly
是的,我的错误。我没有下载文件来检查它:P这是一种“生态游击队”的恶作剧。您可以使用多个Print CSS代码: - 使用多个 link标签: <link media="print" type="text/css" href="print1.css" rel="stylesheet"><link media="print" type="text/css" href="print2.css" rel="stylesheet">  - 在CSS代码中使用媒体查询: @media print { ...... } - Wissam El-Kik
我写了一些问题的代码,看看编辑3 - Zsolt Tolvaly
如果你正在使用 media="screen",CSS不会应用于打印的网页。通常,您应该使用一个(或多个)CSS文件 media="all" 要定位所有设备,您应该提供一个覆盖默认CSS文件的打印版本。 CSS移动版本也是如此。这样做更容易,避免重复代码。对于另一个项目,您应该查看CSS框架(Foundation,Bootstrap等)。 - Wissam El-Kik
是的,我知道如何使用它们。似乎问题的原因是bootstrap ...如果我注释掉bootstrap css导入问题就解决了,但我已经习惯了许多引导项目来评论它...仍在搜索... - Zsolt Tolvaly