在處理之前，如果頁面很長（伴有滾動條），只能截取到當前區域，那這樣肯定是不可取的。所以就用了如下方法：
window.pageYoffset = 0;
document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;
要點是主要是html2canvas根據body進行截圖，若內容高度高於body時，就會出現這樣的問題，所以解決方案就是在生成截圖前，先把滾動條置頂！！！
順便說一下使用html2canvas的方法
html2canvas可以通過獲取html某個元素，然后生成Canvas，能讓用戶保存為圖片
查看官網： http://html2canvas.hertzen.com/
使用方法： npm install --save html2canvas / yarn add html2canvas
html2canvas(你所要截圖的區域, {
配置一些參數，比如，圖片跨域allowTaint: true，需要的具體查看官網
}) .then(canvas=> {
//對canvas進行操作，如果需要保存在本地，就需要將canvas轉化成圖片
var pageData = canvas.toDataURL('image/jpeg', 1.0);
})
完整示例代碼：
import html2canvas from 'html2canvas';
capture () {
window.pageYoffset = 0;
document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;
html2canvas(document.getElementById('capture'), {
allowTaint: true
})
.then(canvas=> {
var pageData = canvas.toDataURL('image/jpeg', 1.0);
saveFile(pageData.replace("image/jpeg", "image/octet-stream"),new Date().getTime()+".jpeg");
})
}
如果.then報錯，
html2canvas(document.getElementById('capture'), {
onrendered: function (canvas) {
var url = canvas.toDataURL();
},
allowTaint: true
})
/**
* 在本地進行文件保存
* @param {String} data 要保存到本地的圖片數據
* @param {String} filename 文件名
*/
saveFile (data, filename){
var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
save_link.href = data;
save_link.download = filename;
var event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
save_link.dispatchEvent(event);
};
文件參考： https://blog.csdn.net/u012667477/article/details/82020315
https://www.jianshu.com/p/88f07d5c5c70