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 此插件可以截取超长页面

 

总结

以上是如意编程网为你收集整理的html2canvas 导出包含滚动条的内容的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得如意编程网网站内容还不错，欢迎将如意编程网推荐给好友。