Screenshot 页面截图

$Screenshot(element, options) 将指定 DOM 渲染为 Canvas，返回 Promise。需要 html2canvas；可以使用项目依赖注入渲染器：

pnpm add html2canvas

import html2canvas from 'html2canvas'
import { $Screenshot } from '@smallwei/avue'

const canvas = await $Screenshot(element, { renderer: html2canvas })

效果预览可直接操作下方示例

截取下方固定卡片并打开预览；只处理本地 DOM，不发送反馈或上传图片。文档站已加载 html2canvas，复制到项目时需按上面的方式准备依赖。

正在加载示例…

<template>
  <div>
    <el-button type="primary" :loading="loading" @click="capture">截取示例卡片</el-button>
    <div ref="target" class="capture-card">
      <h3>订单 A001</h3>
      <p>服务内容：系统安装与使用培训</p>
      <p>状态：待交付</p>
    </div>
    <p role="status">{{ message }}</p>
    <el-dialog v-model="visible" title="截图预览" width="min(640px, 92vw)" append-to-body>
      <img v-if="image" :src="image" alt="订单卡片截图" class="capture-result" />
    </el-dialog>
  </div>
</template>

<script setup>
import { onBeforeUnmount, ref } from 'vue'
import { $Screenshot } from '@smallwei/avue'
const target = ref(null)
const image = ref('')
const loading = ref(false)
const visible = ref(false)
const message = ref('点击按钮生成截图，不上传数据')
let active = true
async function capture() {
  loading.value = true
  message.value = '正在生成截图'
  try {
    const canvas = await $Screenshot(target.value, { backgroundColor: '#fff', scale: 1, logging: false })
    if (!active) return
    image.value = canvas.toDataURL('image/png')
    visible.value = true
    message.value = '截图完成：' + canvas.width + ' × ' + canvas.height
  } catch (error) {
    if (active) message.value = '截图失败：' + error.message
  } finally {
    if (active) loading.value = false
  }
}
onBeforeUnmount(() => { active = false })
</script>

<style scoped>
.capture-card { margin-top: 16px; padding: 20px; max-width: 500px; border: 1px solid #dcdfe6; color: #303133; background: white; }
.capture-card h3 { margin-top: 0; }
.capture-result { display: block; max-width: 100%; height: auto; }
</style>

配置	默认值	说明
renderer	window.html2canvas	自定义渲染函数
download	不下载	为 true 时自动下载
filename	带时间戳的 png 名称	下载文件名
type / quality	image/png / 未设置	输出 MIME / 图片质量
onSuccess(canvas)	未设置	成功回调
onError(error)	未设置	渲染器缺失或截图失败回调；仍应处理 Promise 拒绝

其余参数传给 html2canvas。跨域图片、字体和浏览器不支持的 CSS 会影响截图效果；示例使用本地文字与基本样式。需要节点已经挂载，错误与 loading 在业务侧收敛。完整签名见全局 API。