Question

我需要使用javascript打印div .. 这个div的内容是生成的条形码.. 使用正常的打印div元素的方法不起作用，因为条形码图像是由php文件生成的，并且不会出现在打印页面中。所以我决定使用html2canvas方法来处理＆＃39;渲染＆＃39; 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]

感谢您的关注..

Answer 1

来自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可能的解决方法是，在您的onrendered回调中 - 执行：

var canvasData = canvas.toDataURL();
mywindow.document.write('<img src="' + canvasData + '">');

html2canvas - 错误 - 对象HTMLCanvasElement

1 个答案: