截屏插件 js-web-screen-shot（Vue 、html）

最新推荐文章于 2026-05-20 07:15:00 发布

原创

最新推荐文章于 2026-05-20 07:15:00 发布 · 9.4k 阅读

文章介绍了如何在Vue项目中使用js-web-screen-shot插件进行页面截屏，并将截图以base64格式处理后上传至服务器。在Vue中，通过npm安装插件，导入并构建对象，监听按钮点击事件触发截图。在回调函数中，将base64数据转换为Blob对象并附上文件名，使用axios进行上传。对于HTML环境，也需要配置插件对象的宽高参数，并可以从作者提供的demo中获取正确用法。

该文章已生成可运行项目，

最近有个需求是需要再页面上截屏并上传的，于是找到了这个插件【js-web-screen-shot】

vue中使用该插件来截屏

先在package.json中添加这个

    "js-web-screen-shot": "^1.8.6"

然后 npm install

然后在对应页面的vue文件的 script 中 import

import ScreenShort from 'js-web-screen-shot'

接下就可以使用了；
使用方式大概就是定义一个按钮，来触发构建该插件对象（也可以用其他方式）
然后就截图，截图完成后插件会调用完成的回调方法，该回调方法会将截图的图片base64传进来，然后拿到这个base64就可以进行自己的处理逻辑了。

 <button @click="btnClick()" style="margin-left: 5px">点击开始截图</button>

methods 里面定义以下方法

// 按钮点击时间方法，构建插件对象
 btnClick() {
   
   
 // 更多参数 和使用可以看它包里面的README.md文件
      const screenShotHandler = new ScreenShort({
   
   
        // 是否启用webrtc，值为boolean类型，值为false则使用html2canvas来截图
        enableWebRtc: false,
        // 层级级别，这个要比你页面上其他元素的z-index的值大，不然截不了
        level: 2001,
        completeCallback: this.callback, // 截图成功完成的回调
        closeCallback: this