前端导出页面为图片

1.下载html2canvas.min.js和canvas2image.js两个JS文件

2.将下载的JS引入到项目页面中

3. 定义容器

4.绑定导出事件

$('#export').click(function (e) { 

    var exportPng = $("#exportPic").get(0); //将jQuery对象转换为dom对象  

    // 调用html2canvas插件  
    html2canvas(exportPng).then(function (canvas) {  
    // canvas宽度  
    const canvasWidth = document.body.scrollWidth;  
    // canvas高度  
    const canvasHeight = document.body.scrollHeight;  
    // 调用saveAsImage方法实现下载  
    Canvas2Image.saveAsImage(canvas, canvasWidth, canvasHeight, 'png', '导出图片');  
    });  
});