vue外包的h5页面，客户要求点击按钮可以将整个页面生成一张图片。这里我们通过html2canvas方法来实现网页截图。虽然实现了，但是有个问题，就是当页面往下滚动后，上面看不到的部分截图的时候会丢失无法截取到。
那么如何处理呢？页面往下滚动后导致无法截取到上面的内容，那么我们在截图前，先让页面滚动到顶部这样截图就完整了。
滚动到顶部
document.documentElement.scrollTop = 0
window.pageYOffset = 0
document.body.scrollTop = 0
实现代码
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
<script>
document.getElementById("export").addEventListener('click', function () {
//创建一个新的canvas
document.documentElement.scrollTop = 0
window.pageYOffset = 0
document.body.scrollTop = 0
var canvas2 = document.createElement("canvas");
let canvasObj = document.querySelector('.viewport');
var w = parseInt(window.getComputedStyle(canvasObj).width); //获取目标元素的宽高
var h = parseInt(window.getComputedStyle(canvasObj).height);
//将canvas画布放大若干倍，然后盛放在较小的容器内，就显得不模糊了
var context = canvas2.getContext("2d");
context.scale(2, 2);
canvas2.width = w;
canvas2.height = h;
html2canvas(document.querySelector('.viewport'), {canvas: canvas2}).then(function (canvas) {
let image = new Image();
image.className = "newImg"
image.src = canvas.toDataURL("image/png");
document.body.appendChild(image)
});
});
</script>
