我使用的是经典的JavaScript window.print()函数,它绑定到一个按钮来打印页面。当我在页面加载后第一次使用它时,它加载了背景和CSS,但由于某种原因没有加载文本。
当我关闭“打印预览”(不重新加载页面)并再次单击该按钮时,它会完全加载缺失的文本。这只发生在Chrome上,而在Firefox中,它在第一次尝试时加载文本,没有任何问题。
我试过使用setTimeout和window.on('load '...)函数,但没有用。我使用一个单独的CSS文件进行页面打印。此问题的原因可能是什么?
3条答案
按热度按时间wi3ka0sx1#
有同样的问题。(在windows Chrome浏览器上第一次尝试时不打印)
通过移除
从print.css并采取另一种字体进行打印。
tsm1rwdh2#
这是一个非常古老但仍然相关的问题,因为截至2023年的Chrome仍然以这种方式工作。有多种因素可能会影响这种Chrome行为并导致此问题。
根本原因是“打印预览”是一个单独的渲染器,它从头开始渲染整个打印内容,包括外部资源,并且似乎有自己的缓存。这就是为什么我们需要第二次点击-因为在第一次点击时,字体会被缓存。它似乎还错误地呈现了一些CSS属性,如
display: none
,导致DevTools打开时出现多个异常,如随机未呈现的元素。以下是我发现的影响打印和打印预览的关键点的摘要:1.如果使用隐藏iframe创建打印内容,请将
display: none;
替换为height: 0px; overflow: hidden; border: none;
1.在调用
contentWindow.print()
之前,请等到创建了要打印的全部内容。这是最常见的建议,print.js就是这样做的(在调用print之前总是等待1秒)。当页面内容(不是字体或脚本)如图像需要时间下载/渲染时,它会有所帮助。1.对于Google字体(可能还有其他长时间加载的资源--我发现提到大型CSS会导致同样的问题),解决方案是:(1)在本地下载字体作为woff 2(2)使用'preload'键引用它们,如下所示:
以及(3)使用
@font-face
再次正常参考它们。然后,打印和预览开始正常工作。有趣的是,没有(1),(3)就不起作用。
xlpyo6sf3#
“* 这只发生在Chrome上,而在Firefox中,它在第一次尝试时加载文本,没有任何问题。"*
可能是你的Chrome浏览器有一些问题。一旦尝试重新安装浏览器。它可以解决你的问题…