打印窗口不会在 chrome 最新版本中打印整个页面答案

【问题标题】：Print window does not print whole page in chrome latest version打印窗口不会在 chrome 最新版本中打印整个页面
【发布时间】：2016-03-16 22:45:44
【问题描述】：

我正在开发一个使用 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();

【问题讨论】：

尝试添加样式width: 100%;到<html>,<BODY>标签
我认为您在所有内容都写完之前就点击了打印语句。这就是为什么它是随机的。
你检查canvas变量的打印结果没有循环吗？

标签： javascript html google-chrome printing

【解决方案1】：

您在写完<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);
}

【讨论】：