modern-screenshot介绍

modern-screenshot是一款轻量级的JavaScript库，能够让您以数据URL或多种格式（如PNG、SVG、JPEG、WebP）保存网页元素的截图。它源于html-to-image项目，经过优化，提供更现代的解决方案，并支持Singleton上下文和Web Worker，使得连续截图速度更快。

导入

npm i modern-screenshot

封装与使用（也可以直接在页面中使用）

js中：
可以根据自己需求修改为动态传递dom，配置中屏幕宽高可根据自己需求更改或直接设置（不设置会根据div大小自适应），这里需求是大屏固定尺寸故直接传参写死。

import {domToJpeg} from "modern-screenshot";
/*
* 获取屏幕截图方法
* **/
export async function  downloadImage() {
    const node = document.getElementById('container')
    if (!node){
        console.log("找不到dom，终止导出")
        return ;
    }
    try {
        const dataUrl = await domToJpeg(node, {
            // 传入配置
            scale: 3,
            width:2560,
            height:1440
        });

        // 通过a标签自动下载图片
        const a = document.createElement('a');
        a.href = dataUrl;
        a.download = new Date().getTime() + '.jpg';
        a.click();
        a.remove();
        ElMessage.success('图片生成成功，请耐心等待下载');

    }catch (error) {
        ElMessage.error('图片生成失败');
    }

}

页面中调用（vue3）：

import {downloadImage} from "@/utils/global";
function downImg() {
  downloadImage()
}