使用html2canvas打印页面

我正在使用html2canvas在我的web上构建打印页面功能。使用html2canvas打印页面

function printthispage() { 

    html2canvas($("#mydiv"), { 
     onrendered: function (canvas) { 
      var myImage = canvas.toDataURL("image/png"); 
      var printWindow = window.open(myImage);       
      printWindow.document.close(); 
      printWindow.focus(); 
      printWindow.print(); 
      printWindow.close(); 
     } 
    }); 
}

然而，窗口立即打开和关闭。我尝试删除close()，图像显示在新窗口中，但没有打印功能被触发。有什么不对？

来源

2014-10-27 ydoow

似乎没有接近HTTP工作：// jsfiddle.net/dsf4wwkL/ – artm 2014-10-27 09:47:41

您是否尝试过我发送的链接？ – artm 2014-10-27 11:55:22

是的，但它不适用于我的情况 – ydoow 2014-10-27 12:03:26

最后我找出解决方案。我以前使用的处理应该分成两部分。

1）使用html2canvas将页面渲染到图像中，并在加载页面时将其存储在隐藏的div中。

html2canvas(divprint, { 
    onrendered: function(canvas) { 
     var canvasImg = canvas.toDataURL("image/jpg"); 
     $('#divhidden').html('<img src="'+canvasImg+'" alt="">'); 
    } 
});

2）一旦打印按钮后，打开一个新的窗口，当加载完成后写入存储格内容和jQuery功能进行打印。

$("#printbutton").click(function(e){ 
    var printContent = document.getElementById("divhidden"); 
    var printWindow = window.open("", "","left=50,top=50");     
    printWindow.document.write(printContent.innerHTML); 
    printWindow.document.write("<script src=\'http://code.jquery.com/jquery-1.10.1.min.js\'><\/script>"); 
    printWindow.document.write("<script>$(window).load(function(){ print(); close(); });<\/script>"); 
    printWindow.document.close();     
})

来源

2014-10-27 11:52:14 ydoow

try this code, it is working.          

<div id="mydiv">asdasfadsadfasfd</div> 
    <script> 
     html2canvas($("#mydiv"), { 
      onrendered: function (canvas) { 
       var myImage = canvas.toDataURL("image/png"); 
       var printWindow = window.print(myImage);           

      } 
     }); 
    </script>

来源

2014-10-27 10:12:45 soundhiraraj

上面的代码实际上只是打印现有页面，而不是生成的画布。 – ydoow 2014-10-27 10:32:51

你是否需要打印只有图像？这是存储在myimage，是否正确？ – soundhiraraj 2014-10-27 10:37:26

是的，你是对的 – ydoow 2014-10-27 10:43:40

试试这个，它会工作：

html2canvas($("#mydiv"), { 
    onrendered: function(canvas) { 
     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(); 
      }); 
    } 
});

来源

2014-10-27 12:41:41 soundhiraraj

我做到了这一点

function myprint() { 
    html2canvas(jQuery('div.cart'), { // replace div.cart with your selector 
     onrendered: function (canvas) { 
      var myImage = canvas.toDataURL("image/png"); 
      var tmp = document.body.innerHTML; 

      document.body.innerHTML = '<img src="'+myImage+'" alt="">'; 

      var printWindow = window.print(); 
      document.body.innerHTML = tmp; 
     } 
    }); 
}

来源

2015-09-28 16:52:16 Gambuzzi

香草JS解决方案

// render HTML to canvas based on target element 
html2canvas(document.querySelector('<YOUR SELECTOR>'), { 

    // if the canvas is rendered 
    onrendered: function (canvas) { 

    // create a new window 
    var nWindow = window.open(''); 

    // append the canvas to the body 
    nWindow.document.body.appendChild(canvas); 

    // focus on the window 
    nWindow.focus(); 

    // print the window 
    nWindow.print(); 

    // reload the page 
    location.reload(); 
    } 
});

来源

2016-08-23 10:04:08 0x1ad2

使用html2canvas打印页面

回答

相关问题