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

2019-07-11 13:32:41 阅读：148 来源： 互联网

标签：javascript html5 printing google-chrome html

我正在使用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);
}

标签：javascript,html5,printing,google-chrome,html
来源： https://codeday.me/bug/20190711/1432587.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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