如何使用html2canvas打印畫布

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