Javascript 如何将画布元素和其他元素打印到同一页面？_Javascript_Jquery_Html_Canvas_Printing

Javascript 如何将画布元素和其他元素打印到同一页面？

javascript jquery html canvas printing

Javascript 如何将画布元素和其他元素打印到同一页面？,javascript,jquery,html,canvas,printing,Javascript,Jquery,Html,Canvas,Printing,我试图将画布元素和标题元素一起打印到页面。我需要页面上的heading元素来定义画布元素。这是我的密码： <script> $(function print(){ function print_content(){ canvas = document.getElementById('exerciseChart'); printHeading = document.getElementById('headin

我试图将画布元素和标题元素一起打印到页面。我需要页面上的heading元素来定义画布元素。这是我的密码：

<script>
    $(function print(){

        function print_content(){
            canvas = document.getElementById('exerciseChart');
            printHeading = document.getElementById('headingOne');
            var win=window.open();
            win.document.write("<br><img src='"+canvas.toDataURL()+"'/>");
            win.document.write("<br><img src='"+printHeading.toDataURL()+"'/>");
            win.print();
            win.location.reload();
        }

        $("#printContent").click(function(){ print_content(); });

    }); // end $(function(){});
</script>


$（函数打印（）{
函数print_content（）{
canvas=document.getElementById（'exerciseChart'）；
printHeading=document.getElementById（'headingOne'）；
var win=window.open（）；
win.document.write（“
”）；
win.document.write（“
”）；
win.print（）；
win.location.reload（）；
}
$（“#打印内容”）。单击（函数（）{打印内容（）；}）；
}); // end$（函数（）{}）；

我正在使用的代码（借用自StackOverflow）单独打印canvas元素（

exerciseChart

）非常有效。当我试图将heading元素（

headingOn

e）与canvas元素一起打印时，什么也没有发生

这似乎是一个基本的问题，但这是一个我已经争论了一段时间的问题。提前感谢您的建议

请您在新窗口中尝试

innerHtml

和html标记。试试这样的东西

canvas = document.getElementById('exerciseChart');
printHeading = document.getElementById('headingOne');
var win=window.open('', '', 'height=500,width=900');
win.document.write('<html><head><title>Lets print</title>');            
win.document.write('<head/><body>');
win.document.write(canvas.innerHTML);
win.document.write(printHeading.innerHTML);
win.document.write('</body></html>');

canvas=document.getElementById（'exerciseChart'）； printHeading=document.getElementById（'headingOne'）； var win=窗口打开（''，''高度=500，宽度=900'）； win.document.write（'let print'）； win.document.write（“”）； win.document.write（canvas.innerHTML）； win.document.write（printHeading.innerHTML）； win.document.write（“”）；

什么类型的元素是

#headingOne

？我想这是HTMLCAVASE元素吗？如果没有，它将没有

toDataURL（）

方法。“headingOne”是一个h3元素。看起来像是阻力训练报告