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 此插件可以截取超长页面
学习、交流、记录、编辑一部自己的知识库