Question

我试图克隆我需要打印的页面。打印对话框应仅打印出所选元素及其元素。

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);



setTimeout(function() {
  var restorepage = $('body').html();
  var printcontent = $("#hello").clone();
  $('body').empty().html(printcontent);
  window.print();
  $('body').html(restorepage);
}, 1000);

这会复制整个正文页面，克隆我应该打印出的打印内容，然后清空正文并将其替换为应该打印的内容。之后，它只打开可打印元素的打印对话框。解决方法可能是：再次在.html(printcontent)之后创建整个画布。由于clone()仅克隆HTML，因此画布尚未初始化且没有内容。

由于我使用的是Angular指令，因此我无法简单地完成整个＆＃34;重绘画布＆＃34;。是否有一种Angular方式可以再次重新呈现DOM＆＃34;或类似的东西？

Answer 1

画布＆＃34;内容＆＃34;不是DOM的一部分，不能通过DOM方法复制。但是，调用clonedCanvas.getContext('2d').drawImage(originalCanvas, 0,0)非常容易，它会在克隆的画布上绘制原始画布。

然后你可以试试像

这样的东西

＆＃13;

// This will override the HTMLCanvas 'cloneNode' prototype
(function(){
  var ori = HTMLCanvasElement.prototype.cloneNode;
  HTMLCanvasElement.prototype.cloneNode = function(){
    var copy = ori.apply(this, arguments);
    // don't do it for web-gl canvas
    if(this.getContext('2d')){
      copy.getContext('2d').drawImage(this, 0,0);
      }
    return copy;
    };
  })();

var original = document.querySelector('canvas');
original.getContext('2d').fillRect(20, 20, 20, 20);

for(var i = 0; i<20; i++){
  document.body.appendChild(original.cloneNode());
}

＆＃13;

<canvas></canvas>

＆＃13;

重要提示： 需要在canvas元素上直接调用cloneNode方法（不幸的是，它不适用于canvas.parentNode.cloneNode(true)

jQuery clone（）不会克隆canvas

1 个答案: