| html2canvas 导出包含滚动条的内容 | 您所在的位置：网站首页 › 滚动的图片怎么打印 › 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 此插件可以截取超长页面
|
| CopyRight 2018-2019 实验室设备网 版权所有 |