html2canvas导出带滚动条截取不到超出部分的bug解决

项目需要前端导出一个图片，用了html2canvas插件，但是导出的时候，遇到了一个问题，只能导出当前高度的图片，超出当前高度的就截取不到了，查看资料之后，说设置windowHeight 和 height两个参数，但是设置了以后，发现还是有问题，因为我的高度是百分比的50%，所以导出来之后，仍然是只有两个，像下图这样的。

分析：

其实高度是有了的，但是下面的都被挤下去了，所以，高度不能设置为百分比的形式，要固定的高度。

 

方法1 ： 动态设置高度，但是子元素不能为百分比，不然截取到的还是原来

方法2：

外框再加一层div包裹

<div  class="compare_charts">   <!-- 在这一层设置scroll -->
    <!-- 因为导出有问题，所以加了一个外框 -->
    <div id="compareCharts">
        <div v-for="item in options" :key="item.type" class="rank_compare">
            <base-chart :id="`chart${item.type}`" :ref="item.type" :option="item.option"></base-chart>
        </div>
    </div>
</div>

这样就可以了

 // 导出图片
exportReport(){
    html2canvas(
        document.getElementById('compareCharts'),
        {
            backgroundColor: 'white',
            useCORS: true, //支持图片跨域
            scale: 1,     //设置放大的倍数
            height: document.getElementById('compareCharts').scrollHeight,
            windowHeight: document.getElementById('compareCharts').scrollHeight
        }).then((canvas) => {
            let pageData = canvas.toDataURL('image/jpeg', 1.0);

             downloadCanvas(pageData.replace("image/jpeg", "image/octet-stream"),"站点AQI对比.jpeg");
     });
}


const downloadCanvas = (data, filename) => {
    let save_link = document.createElement('a');
    save_link.href = data;
    save_link.download = filename;

    let 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);
};

export default downloadCanvas;