Question

我正在尝试使用html2canvas打印带有图像的div。

function print_cert(){
        var element = jQuery("#cert_viewer")[0];
        html2canvas(element).then(function (canvas) {
            console.log("ready");
            var myImage = canvas.toDataURL("image/png");
            var tWindow = window.open("");
            $(tWindow.document.body).html("<img id='Image' src=" + myImage + " style='width:100%;'></img>").ready(function() {
            tWindow.focus();
            tWindow.print();
            });
        });
    }

当我尝试打印画布时，其中的图像不包含在打印页面中

编辑：

我需要打印的div：

<div id = "cert_viewer" class = "style_view" style="padding-top: 11px; margin-top: 36px;">

            <p id = "matter1"></p>
            <p id = "matter2"></p>

            <img id="qrcode">
</div>

Answer 1

根据不推荐使用哪个版本的onrendered方法“删除不推荐使用的onrendered回调，调用html2canvas返回一个Promise” https://github.com/niklasvh/html2canvas/blob/9a6e57aa00e422bf22482dbf56de33d5aada3633/CHANGELOG.md

您可以尝试使用使用promises接口的版本。

function print_cert(){
  var element = jQuery("#cert_viewer")[0];
  html2canvas(element).then(function (canvas) {
    console.log("ready");
    var myImage = canvas.toDataURL("image/png");
    var tWindow = window.open("");
    $(tWindow.document.body).html("<img id='Image' src=" + myImage + " style='width:100%;'></img>").ready(function() {
      tWindow.focus();
      tWindow.print();
    });
  });
}

如何使用html2canvas

1 个答案: