如何在html2canvas中隱藏div

Question

大家好，我正在使用jsPDF和html2canvas一起使用。我在add.HTML中看到你可以隱藏一些div。是否有可能在html2canvas中擁有此能力。

我實際上是在製作pdf，但是我想讓主div的一些div不被打印在pdf中。

這是我的html2canvas代碼。

html2canvas(quotes, { 
    onrendered: function(canvas) { 

     //! MAKE YOUR PDF 
     var pdf = new jsPDF('p', 'pt', 'A4'); 
     for (var i = 0; i <= quotes.clientHeight/980; i++) { 
      //! This is all just html2canvas stuff 
      var srcImg = canvas; 
      var sX  = 0; 
      var sY  = 980*i; // start 980 pixels down for every new page 
      var sWidth = 900; 
      var sHeight = 980; 
      var dX  = 0; 
      var dY  = 0; 
      var dWidth = 900; 
      var dHeight = 980; 

      window.onePageCanvas = document.createElement("canvas"); 
      onePageCanvas.setAttribute('width', 900); 
      onePageCanvas.setAttribute('height', 980); 
      var ctx = onePageCanvas.getContext('2d'); 
      // details on this usage of this function: 
      // https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images#Slicing 
      ctx.drawImage(srcImg,sX,sY,sWidth,sHeight,dX,dY,dWidth,dHeight); 

      // document.body.appendChild(canvas); 
      var canvasDataURL = onePageCanvas.toDataURL("image/png", 1.0); 

      var width   = onePageCanvas.width; 
      var height  = onePageCanvas.clientHeight; 

      //! If we're on anything other than the first page, 
      // add another page 
      if (i > 0) { 
       pdf.addPage(612, 791); //8.5" x 11" in pts (in*72) 
      } 
      //! now we declare that we're working on that page 
      pdf.setPage(i+1); 
      //! now we add content to that page! 
      pdf.addImage(canvasDataURL, 'PNG', 20, 40, (width*.62), (height*.62)); 

     } 
     //! after the for loop is finished running, we save the pdf. 
     pdf.save('Test.pdf'); 
    } 
}); 

任何形式的幫助將不勝感激。 Thankx提前。

Answer 1

我終於通過搜索更多about html2canvas解決了這個問題。

你只需要在你的html元素來隱藏DIV從渲染添加

data-html2canvas-ignore="true" 

。

這樣

<div class="anyclass" data-html2canvas-ignore="true">any data</div>