如何将画布元素和另一个元素打印到同一页面？答案

【问题标题】：How to print a canvas element AND another element to same page?如何将画布元素和另一个元素打印到同一页面？
【发布时间】：2017-03-15 04:50:43
【问题描述】：

我正在尝试将画布元素和标题元素一起打印到页面上。我需要页面上的标题元素来定义画布元素转换图像。这是我的代码：

<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>

我使用的代码（从 StackOverflow 借来）打印画布元素 (exerciseChart) 效果很好。当我尝试将标题元素 (headingOne) 与画布元素一起打印时，没有任何反应。

这似乎是一个基本问题，但这是我一直在努力解决的问题。提前感谢您的任何建议！

【问题讨论】：

#headingOne 是什么类型的元素？我这是一个 HTMLCanvasElement 吗？如果没有，它就没有toDataURL() 方法。
"headingOne" 是一个 h3 元素。看起来像
抵抗运动报告

标签： javascript jquery html canvas printing

【解决方案1】：

您能否在新窗口中尝试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>');

【讨论】：

抵抗运动报告