【vue】前端使用modern-screenshot截取屏幕截图

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()
}