Chrome打印预览错误

Question

我想打印一个HTML页面。 这个HTML页面是由我开发的，在Mozilla和IE中可以打印。

在Chrome中，按下CTRL+P会弹出预览窗口，但会显示“打印预览失败”，我无法打印任何东西。在Opera中，无论是通过按CTRL+P还是从菜单->打印，都不会弹出打印窗口；Safari会打印一张白纸。

你有什么想法可能出了问题吗？什么样的错误会导致这个问题？Chrome有没有错误日志可以找出问题所在？

编辑：

我尝试删除HTML元素、CSS脚本和JavaScript，发现其中一个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"/>

如果我注释掉第一个include，或者将style.default.css的媒体更改为screen，则可以生成预览，但是缺少css规则。 style.default.css是我的全局css，有17个其他css以这种方式导入：

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

我已经试图对导入进行注释，并仅使用该文件中的css规则。(如果错误来自其中一个导入，则应该解决问题)，但这并没有解决它，所以我尝试了另一种方法，注释掉CSS规则，只尝试使用导入，结果相同。只有在注释整个文件时才成功...

还有其他建议吗？是否有人知道Chrome是否在某个地方记录此类错误？

- Zsolt Tolvaly

---

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

Answer 1

最后我找到了错误。有两个CSS规则阻止浏览器生成预览：

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

和

position: fixed;

- Zsolt Tolvaly

---

你能指明这些属性被分配给哪些元素吗？ - Wissam El-Kik

我猜问题只与“position:fixed”有关。 “position:fixed”和“position:absolute”无法在打印页面中显示。 通常，您应该使用CSS隐藏这些元素，或者重新考虑是否可以在打印CSS下使用“position:relative”来定位它们。 - Wissam El-Kik

我尝试过去掉固定位置，但问题仍然存在，直到我也移除了高度属性。 - Zsolt Tolvaly

我通过将包装整个可打印区域的 div 中的单个 position:fixed（恢复为 position:static）进行了相同问题的解决。 - David R Tribble

兄弟，非常感谢你！！！你真是个天才))！ - Tatyana Molchanova

Answer 2

我知道我可能有点晚了，但我希望这能帮助其他人解决类似的问题。打印预览的问题通常与样式相关。某些属性可能会破坏我们的预览，我们可能需要花费很长时间才能解决此问题。

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

- 高度：100％， - 位置：固定/绝对/相对（某些情况下）， - 溢出：隐藏，

是“压箱底的最后一根钉子”。

没有一个容器应该设置它们。对于位置，您可以使用静态，对于高度，请使用固定值或仅留下自动选项。始终记得设置overflow: visible。否则，我们想要打印的内容可能会被隐藏。

此外，我还写了一篇关于Ionic中打印的简短文章，在其中更详细地解释了这个主题。您可以在这里找到它：http://blog.primemodule.com/print-style-sheets-in-ionic-framework/。

- PrimeModule

Answer 3

一个快速的谷歌搜索返回了this:

如果您禁用了Chrome的PDF查看器并启用了Adobe的查看器，您可能会看到这个消息。一旦您这样做，您将会收到一个如您所述的消息。您仍然可以通过在打印预览屏幕中单击“高级”来进入打印机设置。或者您可以禁用打印预览。方法如下: 1.右键单击Chrome快捷方式 2.选择属性 3.在目标字段中，转到文件位置的末尾，并添加：“--disable-print-preview”。请确保也包括两个空格。此外，如enystrom所提到的，如果有引号，请将其放在引号之外。这样，它应该是这样的： a.C:\Users[用户名]\AppData\Local\Google\Chrome\Application\chrome.exe --disable-print-preview b.“C:\Users[用户名]\AppData\Local\Google\Chrome\Application\chrome.exe”--disable-print-preview（如果您有引号） 4.按确定。 如果您正在运行Win 7并且已将Chrome固定到任务栏，则应将其删除，然后再从开始菜单中获取Chrome图标，然后将其固定到任务栏上。

- James Donnelly

---

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

Answer 4

如此处所述，这个问题不会被修复（请检查错误的状态）。

这个问题与您的PDF阅读器有关。您很可能删除了“Microsoft XPS文档编写器”或“Adobe PDF”。您可以在这里解决PDF阅读器的问题。 请记住，打印预览与打印功能没有关联。 您仍然可以在大多数浏览器中打印网页而无需进行打印预览。在大多数浏览器中，打印预览并不准确。最好打印网页以检查输出结果。

- Wissam El-Kik

---

如果你使用的是media="screen"，CSS样式将不会应用于打印网页。 通常，你应该使用一个（或多个）带有media="all"的CSS文件来针对所有设备，并且应该提供一个打印版本来覆盖默认的CSS文件。对于移动设备的CSS版本也是如此。这样做更容易，也避免了重复代码。 对于另一个项目，你应该研究一下CSS框架（Foundation、Bootstrap等）。 - Wissam El-Kik

是的，我知道如何使用它们。看起来问题的原因是Bootstrap...如果我注释掉Bootstrap CSS导入，问题就解决了，但我使用了太多的Bootstrap项目，无法注释掉它...仍在寻找解决方法... - Zsolt Tolvaly

我使用bootstrap v3.0.0来处理js和css。我知道这是一个很棒的库，所以我不明白出了什么问题... - Zsolt Tolvaly

您需要安装Adobe PDF或Microsoft XPS文档编写器或任何其他打印设备。您可能没有列出的打印机。 - Wissam El-Kik

我安装了打印机和PDF打印机，我已经解决了这个问题，以下是解决方案。 - Zsolt Tolvaly

Answer 5

对我来说，这是由于Chrome打印无法处理我用来显示进度圆的div样式所导致的：

style={`background: radial-gradient(closest-side, ${bg} 40%, transparent 80% 100%),
                conic-gradient(${fg} ${progress}%, ${emptyBg} 0);
                width:${size}; height:${size}`}

我不得不通过二分法来找出我的简历创建页面的来源。

你可以在这里找到有关该错误的更多信息：https://learn.microsoft.com/en-us/answers/questions/edit/751546/comment/1316344?comment=question#comment-1316344。

- Zied Hamdi