我需要使用javascript打印div.
该div的内容是生成的条形码.
使用普通的方法来打印div元素是行不通的,因为条形码图像是由php文件生成的,并且不会出现在打印页面中..所以我决定使用html2canvas方法来“渲染” div,然后进行打印.
这是我的代码：
HTML：
<div id="source" onClick="capture()"> Some content and img of barcode </div>
JavaScript：
function capture() {
html2canvas( [ document.getElementById('source') ], {
onrendered: function (canvas) {
var mywindow = window.open('', 'my div', 'height=400,width=1000');
mywindow.document.write('<html><head><title>Print Div:</title>');
mywindow.document.write('</head><body >');
mywindow.document.write(canvas);
mywindow.document.write('</body></html>');
mywindow.document.close(); // necessary for IE >= 10
mywindow.focus(); // necessary for IE >= 10
mywindow.print();
mywindow.close();
return true;
}
});
}
mywindow打开,但不包含我需要打印的div的内容.
我收到此错误：[object HTMLCanvasElement]
感谢您的关注.
解决方法:
从html2canvas文档中：
onrendered: function(canvas) {
// canvas is the final rendered <canvas> element
}
canvas是DOM元素.您无法document.write DOM元素(这是一个字符串方法),并且输出[HTMLCanvasElement]是JS将DOM元素转换为字符串的方式(这不是错误).如果弹出窗口与父窗口位于同一域中,则应该能够执行mywindow.document.appendChild(canvas). Else if it’s not可能的解决方法是-在您提供的回调中-执行以下操作：
var canvasData = canvas.toDataURL();
mywindow.document.write('<img src="' + canvasData + '">');