Question

我正在使用HTML5画布开发打印工具。通过打开一个新窗口并将页面画布作为图像写入新窗口文档，然后最后打印窗口文档。作为测试，我尝试在chrome最新版本（版本46.0）中打印页面（大于100页） .2490.71）它不打印整页。在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();

Answer 1

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

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

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);
}

打印窗口不打印chrome最新版本的整页

1 个答案: