2017-01-08 106 views
0

我想创建一个按钮,点击时的打印:制作画布IMG

  1. 打开一个新的窗口画布IMG;
  2. 开始打印功能;
  3. 使用JS后关闭新页面。

这是我到目前为止有:

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> 

控制台打印此当我按下按钮:

Uncaught TypeError: Cannot read property toDataURL of null

at printCanvas

at HTMLButtonElement.

at HTMLButtonElement.dispatch (jquery.min.js:4)

at HTMLButtonElement.r.handle (jquery.min.js:4)

+0

您能否快速指出您在使用上述代码的过程中遇到的问题/错误? –

+0

你能通过所有的标记和脚本来编辑你的问题吗?我的脚本正常工作 – Antonio

+0

@Antonio完成更新问题到你发送的代码,所以现在这是我现在在网站上的样子。 –

回答

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); 
}); 
+0

对我来说它很好用:从画布打开窗口图像,打开打印对话框,关闭窗口 – Antonio

+0

感谢您的快速响应,但很遗憾,我无法让它工作,所以我更新我的问题,以摆脱一些光情况。 –

+0

没有任何事情发生。 –

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

+0

好吧,我试图将脚本从页脚移动到按钮和画布所在的页面,然后停止显示cconsole中的错误,同时我正在尝试安东尼奥给我的脚本$( document).ready part.I尝试了你在页面和脚本页面使用echo“Hello”编写的IF语句,它在两页都显示了hello。 @CPHPython –

+0

@ErikD好,所以这意味着现在你的'canvas'变量的值中有一个元素。如果这些答案中的任何一个解决了问题,您可以通过点击答案左侧的复选标记来接受答案。对于[在JS中打开新窗口,这是一个很好的参考](http://www.javascript-coder.com/window-popup/javascript-window-open.phtml),如果你有与此相关的问题,你可能会在这里再次提出一个新的问题。 – CPHPython

+0

嗯,它仍然没有工作是错误的,因为它不会打开一个新的窗口与画布IMG和启动打印功能,作为附注我已更新开始问题,以显示它现在看起来如何。 –