html2canvas 導出包含滾動條的內容



import html2canvas from 'html2canvas'; exportPDF() { // 導出為 pdf let dom = document.querySelector('yourcssselector'); let height = parseInt(dom.style.height) + 50 + 'px'; window.d = dom; let that = this; setTimeout(function() { html2canvas(dom,{ backgroundColor:'#fff', useCORS : true,//保證跨域圖片的顯示 allowTaint :false, height: height, //canvas 窗口的高度 windowHeight: height, // 獲取y方向滾動條中的內容 y: height, // 頁面在垂直方向的滾動距離 }).then(function(canvas) { var imgUri = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // 獲取生成的圖片的url window.location.href= imgUri; // 下載圖片 }); }, 1000); }

如何設置部分內容不導出?

  在 html 元素中設置:data-html2canvas-ignore={true} 

 

同類插件:dom-to-image 此插件可以截取超長頁面

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM