javascript 使用 html2canvas 打印页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26584682/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Print page using html2canvas
提问by ydoow
I'm building a print page function on my web using html2canvas.
我正在使用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();
}
});
}
However the window opened and closed immediately. I've tried removing close(), the image showed on new window but no print function was triggered. Is there something wrong?
然而，窗户立即打开和关闭。我试过删除close()，图像显示在新窗口中，但没有触发打印功能。有什么不对？
采纳答案by ydoow
Finally I figure out the solution. The previous handling I used should be made into 2 parts.
最后我想出了解决方案。我之前使用的处理应该分成两部分。
1) use html2canvas to render the page into image and store it in a hidden div, when the page is loaded.
1）当页面加载时，使用html2canvas将页面渲染成图像并将其存储在隐藏的div中。
html2canvas(divprint, {
onrendered: function(canvas) {
var canvasImg = canvas.toDataURL("image/jpg");
$('#divhidden').html('<img src="'+canvasImg+'" alt="">');
}
});
2) Once a print button is clicked, open a new window, write the stored div content and jquery function for printing when the loading is done.
2）点击打印按钮后，打开一个新窗口，编写存储的div内容和加载完成后打印的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();
})
回答by soundhiraraj
Try this,it will work:
试试这个，它会起作用：
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();
});
}
});
回答by 0x1ad2
Vanilla JS solution
香草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();
}
});
回答by Gambuzzi
I done this
我做了这个
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;
}
});
}
回答by soundhiraraj
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>
