버튼이 hmtl2canvas asp.net에서 작동하지 않습니다.

Question

html2canvas를 사용하여 HTML에서 div를 캡처하고 asp.net의 pdf 파일에 저장하려고합니다. 이렇게하려면 아래 자바 스크립트 코드를 사용하도록 권장했지만 코드는 click 이벤트에서 실행되지 않습니다? 버튼의

<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"유형 = "입력"

Answer 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 웹 폼에서

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

Answer 2

기본 동작은 RUNAT = "서버"와 컨트롤의 ID는 ID의 충돌이 아니라 수 있도록 변환됩니다 것입니다. 그래서 귀하의 버튼과 양식에 id가 없을 가능성이 있습니다 (ClientIdMode가 static으로 설정되어 있지 않은 경우). 코드에 사용 된 문자

ClientIdMode를 양식과 버튼 모두에서 정적으로 설정하면 문제가 발생합니다. .

이 (jQuery를 사용) 테스트 할 때 내가 사용하는 코드이며, 그것은 나를 위해 잘 작동 : 나는 cvs.save을 제거

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

("...") - 행, 데이터 때문에 당신은 "데이터 : 이미지/png; base64, iVBORw0KGgo .... =="와 같은 base64 인코딩 된 이미지를 포함하는 문자열을 얻습니다. 따라서 저장 방법이 없습니다. 그러나 jspdf-library를 사용하면 여전히 클라이언트 측에서 PDF로 저장할 수 있습니다.