按鈕不工作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

回答

相關問題