解决html2canvas保存为图片时，出现滚动条只保存可视区的问题

$("#download").click(function () {
    //当出现滚动条时，获取内容高度，给dom赋值，解决截图只截可视区的问题
    var maxHeightBox=$(".mainBoxTc").prop('scrollHeight');
    var maxHeightCon=$(".mainCon").prop('scrollHeight');
    $(".mainBoxTc").css("maxHeight",maxHeightCon);
    $(".mainCon").css("maxHeight",maxHeightCon);
    html2canvas($("#mapPop")[0]).then(function (canvas) {
        var imgUri = canvas.toDataURL();
        var saveLink = document.createElement('a');
        saveLink.href = imgUri;
        saveLink.download = 'download.png';
        saveLink.click();
        //恢复原样式
        $(".mainBoxTc").css("maxHeight",530);
        $(".mainCon").css("maxHeight",650);
    });
});

解决思路

html2canvas之所以保存图片不完整，是因为出现了滚动条，html2canvas只保存可视区内容，那就让所有内容都出现在可视区：

1. 获取dom所有高度；
2. 给dom重新设置最新高度；
3. 保存dom可视区视图；
4. 把dom恢复原来样式；