HTML生成图片

步骤一：下载 html2canvas 并引入

html2canvas - Screenshots with JavaScript (hertzen.com)

步骤二：页面使用

创建一个点击按钮

<button id="exportPng">图片生成</button>

js中使用

// export-content 为需要导出成图片的页面 ID

$('#exportPng').click((e) => {
    html2canvas(document.getElementById('export-content')).then(function (canvas) {
        var imgData = canvas.toDataURL('image/png');
        var link = document.createElement('a');
        link.href = imgData;
        link.download = 'exported-image.png';
        link.click();
    });
})