“打印”窗口不会以chrome最新版本打印整个页面

Print window does not print whole page in chrome latest version

本文关键字：打印 新版本 最新版 窗口 chrome      更新时间：2023-09-26

我正在使用HTML5画布开发一个打印工具。打开一个新窗口，将页面画布作为图像写入新窗口文档，然后最终打印窗口文档。作为测试，我尝试在chrome最新版本（版本46.0.2490.71）中打印页面（超过100页），但它不会打印整个页面。在chrome打印预览窗口中，只显示部分页面，就像我们打印110页的文档一样，意味着它只显示24或38页（它随机显示页面）。但是整个页面都被添加到新创建的窗口中进行打印。我用下面的代码打印页面。

var _printWindow = window.open('');
_printWindow.document.write('<html><BODY>');
_printWindow.document.write('<center>');
for (var i = 1; i <= _totalPages; i++) {
   var canvas = this._printpages(i);
  _printWindow.document.write('<img src="' + canvas.toDataURL() + '"style="border:1px solid;height:"' + _pageHeight + '"px;margin:0px"><br />');
}
_printWindow.document.write('</center></body></html>');
_printWindow.document.close();
_printWindow.print();

在编写完<img>标记后，您将直接调用print()。但是，加载所有这些图像（异步）需要时间。因此，当您调用print()时，图像尚未完成加载，有些图像的高度可能尚未确定，从而导致意外的页数。

要解决此问题，应仅在onload事件在所有图像元素上触发之后调用print()。以下是我解决问题的方法：

var nImages = _totalPages;
function imageLoaded() {
    if (--nImages === 0) {
        _printWindow.print();
    }
}
// ...snip...
// replace your `for` loop with the following:
for (var i = 1; i <= _totalPages; i++) {
    var img = new Image;
    img.addEventListener('load', imageLoaded);
    img.src = /* get the data URL from the canvas */;
    // here, add in your style properties
    _printWindow.document.body.appendChild(img);
}
相关文章：