screenshot_sample.js

/* 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    // omission //
    <h3 style="display: flex;">
        {{$t('statistics')}}
        <svg @click="onclickScreenShot" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="width: 22px;cursor: pointer;fill: #9b9b9b;margin-left: 4px;"><path d="M20,4H16.83L15,2H9L7.17,4H4A2,2 0 0,0 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6A2,2 0 0,0 20,4M20,18H4V6H8.05L9.88,4H14.12L15.95,6H20V18M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7M12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9A3,3 0 0,1 15,12A3,3 0 0,1 12,15Z" /></svg>
    </h3>
*/
var target = document.getElementById('divResultColsWrap');
            
const children = target.children;
let contentWidth = 0;
for (let child of children) {
    contentWidth += child.getBoundingClientRect().width;
}
contentWidth += 70;

const option = {
    width: contentWidth,
    x: 0,
};

html2canvas(target, option).then(function(canvas) {
    var screenshotImage = canvas.toDataURL("image/png");
    var link = document.createElement('a');
    link.href = screenshotImage;
    link.download = 'kss-hhss.png';
    link.click();
});