按钮不工作hmtl2canvas asp.net

-1

我想使用html2canvas在我的html中捕获div并将其保存到asp.net中的pdf文件。我被推荐使用下面的JavaScript代码来实现这一点，但是代码没有在click事件上执行？按钮不工作hmtl2canvas asp.net

<script type="text/javascript" src="Scripts/html2canvas.js"></script> 
<script type="text/javascript" src="Scripts/html2canvas.min.js"></script> 

    document.addEventListener("DOMContentLoaded", function (event) { 
      document.getElementById("Print_Button").addEventListener("OnItemCommand", (function() { 
       html2canvas(document.getElementById("form1"), { 
        onrendered: function (canvas) { 
         cvs = canvas.toDataURL('image/png'); 
         cvs.save("mcn.pdf") 
        } 
       }); 
      })); 


    });

该按钮的属性是：

ID = “Print_Button” RUNAT = “服务器” 文本= “打印MCN” 类型= “输入”

来源

2017-02-27 kehoewex86

从按钮中删除属性'runat =“server”'，因为这会导致回发，使页面重新加载。 – Archer

Hi @Archer，我已经停止按钮回发到服务器，但现在它什么也没做？我不确定哪里出问题了？希望得到任何帮助，一直试图让这个工作几个星期。 – kehoewex86

-1

呼叫htmlcanvasdownload（）到有事件听了

document.addEventListener("DOMContentLoaded", function (event) { 
    htmlcanvasdownload(); 
    function htmlcanvasdownload() { 
     document.getElementById("Print_Button").addEventListener("OnItemCommand", (function() { 
      html2canvas(document.getElementById("form1"), { 
       onrendered: function (canvas) { 
        cvs = canvas.toDataURL('image/png'); 
        cvs.save("mcn.pdf") 
       } 
      }); 
     })); 

    } 
});

好你编辑你的问题，接下来听一下，

document.getElementById("Print_Button").addEventListener("click", function(){ 
    //..process canvas 
    return false;//stop event going to server 
});

检查是否html2canvas工作原理：在ASP.NET Web窗体

html2canvas(document.getElementById("form1"), { 
     onrendered: function (canvas) { 
      var cvs = canvas.toDataURL('image/png') 
      //this emage need to be posted to server 
      //var file=new Blob([new Uint8Array(array)], {type: 'image/png'}); 
      // with ajax or with form post 
      // as blob to a input type file or as imput type text where you send image/png as base64 

      //this will open your image 
      window.open(cvs); 
     }, 
     width:320, 
     height:220 
    });

来源

2017-02-27 15:11:39 SilentTremor

嗨@SilentTremor，谢谢你的回答。我刚刚尝试过，仍然没有任何反应，甚至没有发生错误通知。我想知道我错过了什么，我应该在asp.net中使用html2canvas工作。当我点击按钮时，它只刷新页面。在那个页面上的一个表单元格中有一个C＃，带有一个时间戳，每当我点击按钮时它就会更新，但没有其他的东西？ – kehoewex86

在函数'htmlcanvasdownload（）'中包装一些代码的目的是什么？我看不出有什么差别。 – Archer

他/她编辑的问题，没有htmlcanvasdownload（）调用 – SilentTremor

的默认行为是与RUNAT =“服务器”控制的任何ID获取转变，以确保有没有一个ID冲突。因此，您的按钮和表单可能没有您在代码中使用的id（除非它们将ClientIdMode设置为静态）

因此，首先将ClientIdMode设置为表单和按钮上的静态，如果这是一个问题。

这是测试（使用jQuery），当我使用的代码，它为我工作得很好：

<script type="text/javascript" src="scripts/html2canvas.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.debug.js"></script> 
<script> 


    $(function() { 
      $("#Print_Button").on("click", function() { 
       html2canvas($("#form1"), { 
        onrendered: function (canvas) { 
         imgData = canvas.toDataURL('image/png'); 
         var pdf = new jsPDF(); 

         pdf.addImage(imgData, 'PNG', 0, 0); 
         var download = document.getElementById('download'); 

         pdf.save("download.pdf"); 
        } 
       }); 
      }); 


    }); 
</script>

我删除了cvs.save（“...”） - 行，因为数据你会得到一个字符串包含一个base64编码的图像，如“data：image/png; base64，iVBORw0KGgo .... ==”。所以它没有保存方法。但是通过使用jspdf-library，你仍然可以在客户端保存为PDF格式

来源

2017-02-28 08:18:45

按钮不工作hmtl2canvas asp.net

回答

相关问题