使用html2canvas打印頁面

我正在使用html2canvas在我的web上構建打印頁面功能。使用html2canvas打印頁面

function printthispage() { 

    html2canvas($("#mydiv"), { 
     onrendered: function (canvas) { 
      var myImage = canvas.toDataURL("image/png"); 
      var printWindow = window.open(myImage);       
      printWindow.document.close(); 
      printWindow.focus(); 
      printWindow.print(); 
      printWindow.close(); 
     } 
    }); 
}

然而，窗口立即打開和關閉。我嘗試刪除close()，圖像顯示在新窗口中，但沒有打印功能被觸發。有什麼不對？

來源

2014-10-27 ydoow

似乎沒有接近HTTP工作：// jsfiddle.net/dsf4wwkL/ – artm 2014-10-27 09:47:41

您是否嘗試過我發送的鏈接？ – artm 2014-10-27 11:55:22

是的，但它不適用於我的情況 – ydoow 2014-10-27 12:03:26

最後我找出解決方案。我以前使用的處理應該分成兩部分。

1）使用html2canvas將頁面渲染到圖像中，並在加載頁面時將其存儲在隱藏的div中。

html2canvas(divprint, { 
    onrendered: function(canvas) { 
     var canvasImg = canvas.toDataURL("image/jpg"); 
     $('#divhidden').html('<img src="'+canvasImg+'" alt="">'); 
    } 
});

2）一旦打印按鈕後，打開一個新的窗口，當加載完成後寫入存儲格內容和jQuery功能進行打印。

$("#printbutton").click(function(e){ 
    var printContent = document.getElementById("divhidden"); 
    var printWindow = window.open("", "","left=50,top=50");     
    printWindow.document.write(printContent.innerHTML); 
    printWindow.document.write("<script src=\'http://code.jquery.com/jquery-1.10.1.min.js\'><\/script>"); 
    printWindow.document.write("<script>$(window).load(function(){ print(); close(); });<\/script>"); 
    printWindow.document.close();     
})

來源

2014-10-27 11:52:14 ydoow

try this code, it is working.          

<div id="mydiv">asdasfadsadfasfd</div> 
    <script> 
     html2canvas($("#mydiv"), { 
      onrendered: function (canvas) { 
       var myImage = canvas.toDataURL("image/png"); 
       var printWindow = window.print(myImage);           

      } 
     }); 
    </script>

來源

2014-10-27 10:12:45 soundhiraraj

上面的代碼實際上只是打印現有頁面，而不是生成的畫布。 – ydoow 2014-10-27 10:32:51

你是否需要打印只有圖像？這是存儲在myimage，是否正確？ – soundhiraraj 2014-10-27 10:37:26

是的，你是對的 – ydoow 2014-10-27 10:43:40

試試這個，它會工作：

html2canvas($("#mydiv"), { 
    onrendered: function(canvas) { 
     var myImage = canvas.toDataURL("image/png"); 
     var tWindow = window.open(""); 
     $(tWindow.document.body) 
      .html("<img id='Image' src=" + myImage + " style='width:100%;'></img>") 
      .ready(function() { 
       tWindow.focus(); 
       tWindow.print(); 
      }); 
    } 
});

來源

2014-10-27 12:41:41 soundhiraraj

我做到了這一點

function myprint() { 
    html2canvas(jQuery('div.cart'), { // replace div.cart with your selector 
     onrendered: function (canvas) { 
      var myImage = canvas.toDataURL("image/png"); 
      var tmp = document.body.innerHTML; 

      document.body.innerHTML = '<img src="'+myImage+'" alt="">'; 

      var printWindow = window.print(); 
      document.body.innerHTML = tmp; 
     } 
    }); 
}

來源

2015-09-28 16:52:16 Gambuzzi

香草JS解決方案

// render HTML to canvas based on target element 
html2canvas(document.querySelector('<YOUR SELECTOR>'), { 

    // if the canvas is rendered 
    onrendered: function (canvas) { 

    // create a new window 
    var nWindow = window.open(''); 

    // append the canvas to the body 
    nWindow.document.body.appendChild(canvas); 

    // focus on the window 
    nWindow.focus(); 

    // print the window 
    nWindow.print(); 

    // reload the page 
    location.reload(); 
    } 
});

來源

2016-08-23 10:04:08 0x1ad2

使用html2canvas打印頁面

回答

相關問題