[英]Print page using html2canvas
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.我试过删除close()
,图像显示在新窗口中,但没有触发打印功能。 Is there something wrong?有什么不对?
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();
});
}
});
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();
}
});
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();
})
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;
}
});
}
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>
html2canvas(document.querySelector("#mydiv")).then(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();
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.