【问题标题】:Chrome print preview errorChrome 打印预览错误
【发布时间】:2016-04-21 14:24:27
【问题描述】:

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

在 Chrome 中:当按下 CTRL+P 时,它会打开预览窗口,但它会说:“打印预览失败”,我无法打印任何东西。 在opera中,它不会打开打印窗口,也不会按CTRL+P或菜单->打印,Safari会打印一个白页。

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

编辑

我尝试删除 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"/>

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

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

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

还有其他建议吗?有人知道 chrome 是否在某处记录此类错误?

【问题讨论】:

  • 当我尝试使用 Chrome 40.0.2214.111 m 将非常非常长(~11,000 cmets)的 Disqus 讨论“打印”到 pdf 时,就会发生这种情况。在 chrome://plugins/ 中,我可以看到 Chrome PDF 查看器已启用,而 Adob​​e Reader 已禁用。打印/打印预览屏幕上没有“高级”。错误发生后,该屏幕上的所有内容都被禁用,除了[取消]

标签: html css google-chrome


【解决方案1】:

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

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

position: fixed;

【讨论】:

  • 你能指定这些属性分配给哪些元素吗?
  • 我猜这个问题只与“位置:固定”有关。 “position:fixed”和“position:absolute”不能在打印页面中显示。通常,您应该使用 CSS 隐藏这些元素,或者重新考虑是否可以使用 print CSS 下的“position:relative”来定位它们。
  • 我试过没有固定位置,但问题一直存在,直到我也删除了高度属性。
  • 我通过从包裹整个可打印区域的 div 中删除单个 position:fixed(默认为 position:static)解决了同样的问题。
  • 兄弟,非常感谢!!!你真是个天才))!
【解决方案2】:

我知道我参加聚会可能有点晚了,但我希望这对以后的其他人有所帮助。

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

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

  • 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/

【讨论】:

    【解决方案3】:

    快速谷歌搜索返回this

    如果您禁用了 Chrome 的 PDF 查看器并启用了 Adob​​e 的,您可能会看到这种情况。完成此操作后,您将收到所描述的消息。您仍然可以通过单击打印预览屏幕中的高级来访问您的打印机框,如 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 图标,然后将其重新固定到您的任务栏。

    【讨论】:

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

    here 所述,此问题将无法修复(检查错误状态)。

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

    【讨论】:

    • 第一个是个玩笑,第二个帮不了我,我已经有我的用于 printig 的工作 css,但我不能将它与其他 css 文件一起使用,我不能找出原因...
    • 是的,我的错。我没有下载文件来检查它:P 这是一种“生态游击队”的恶作剧。您可以使用多个打印 CSS 代码:- 使用多个 link 标签:&lt;link media="print" type="text/css" href="print1.css" rel="stylesheet"&gt;&lt;link media="print" type="text/css" href="print2.css" rel="stylesheet"&gt; - 在您的 CSS 代码中使用媒体查询:@media print { ...... }
    • 如果您使用media="screen",CSS 将不会应用于打印网页。通常,您应该使用一个(或多个)带有media="all" 的 CSS 文件来定位所有设备,并且您应该提供一个覆盖默认 CSS 文件的打印版本。 CSS 移动版本也是如此。这样做更容易,并且您可以避免重复代码。对于另一个项目,您应该研究 CSS 框架(Foundation、Bootstrap 等)。
    • 是的,我知道如何使用它们。似乎问题原因是引导程序...如果我注释掉引导程序 css 导入问题就解决了,但是我已经习惯了许多引导程序项将其注释掉...仍在搜索...
    • 只使用一个 Bootstrap 版本。 Bootstrap 不应该产生问题……它是一个了不起的库。
    猜你喜欢
    • 2012-06-02
    • 1970-01-01
    • 1970-01-01
    • 2016-02-01
    • 2018-10-23
    • 1970-01-01
    • 1970-01-01
    • 2014-11-25
    • 1970-01-01
    相关资源
    最近更新 更多