我正在尝试创建一个单击时按钮:
这是我到目前为止所做的:
function printCanvas() {
var canvas = document.getElementById("sidstemoned");
var img = canvas.toDataURL("image/png");
var newWin = window.open("");
newWin.document.write('<img src="' + img + '" />');
newWin.print();
newWin.close();
}
$(document).ready(function () {
$('#print_canvas').on('click', printCanvas);
});
画布:
<canvas
class='costumor_statistic col-lg-12 col-md-12 col-sm-12'
style='height:350px;'
id='sidstemoned'></canvas>
按钮:
<button
class="btn btn-default hidden-print"
id="print_canvas">Print <span class="fa fa-print "></span></button>
当我按下按钮时,控制台会打印出来:
未捕获的TypeError:无法读取
的属性toDataURL
null
at printCanvas
在HTMLButtonElement。
在HTMLButtonElement.dispatch(jquery.min.js:4)
在HTMLButtonElement.r.handle(jquery.min.js:4)
答案 0 :(得分:0)
它是否正常?
function printCanvas() {
var canvas = document.getElementById("canvasname");
var img = canvas.toDataURL("image/png");
var newWin = window.open("");
newWin.document.write('<img src="' + img + '" />');
newWin.print();
newWin.close();
}
UPD:也许您在添加到DOM之前尝试查找画布。尝试将onClick处理程序包装到$(document).ready
$(document).ready(function(){
$('#print_canvas').on('click', printCanvas);
});
答案 1 :(得分:0)
目前的问题是您在canvas
函数中使用的变量printCanvas
是null
,这意味着当您尝试使用以下内容获取元素时:
document.getElementById("sidstemoned");
没有找到任何内容,因此在第二行中,不是从DOM访问元素,而是发生这种情况:
null.toDataURL("image/png");
null
没有toDataURL
属性(或函数),这就是您收到该错误的原因。因此,请确保您的变量canvas
具有与之关联的元素,即您引用的ID sidstemoned
存在于文档中。您只需查看其canvas
媒体资源即可验证length
是否有某些内容:
if(canvas.length !== 0) { /* remaining code goes here */ }
此外,非直接相关,您可能希望删除按钮中的额外class
属性(具有单个costumor_statistic
的属性)。