vue动态页面快照截图 html2canvas

安装依赖

npm install html2canvas

新建组件 SnapshotPage.vue

父组建使用

<SnapshotPage
  @snapshotReady="handleSnapshot"
>
  <!-- 这里插入你的动态内容 -->
  <div>动态内容1</div>
  <div>动态内容2</div>
</SnapshotPage>
methods: {
  handleSnapshot(file) {
    // 这里拿到 file，直接上传给后端
    // this.uploadFile(file)
  }
}

设置不可见

<div
  ref="snapshotPage"
  :style="{
    position: 'fixed',
    top: 0,
    left: '-99999px', // 屏幕外
    width: '2400px',
    height: '3600px',
    opacity: 1, // 不透明，保证能截图
    pointerEvents: 'none',
    zIndex: -1
  }"
>
  <!-- 动态内容 -->
</div>

不用显示在用户眼前，但必须在 DOM 里且不是 display: none。
opacity: 0 可以截图，但有时会有兼容性或渲染时机问题，调试时建议先用 opacity: 1。
截图后再隐藏或销毁快照区域，体验最佳。