vue 截屏 iframe

以下是使用Vue实现截屏iframe的方法：

1.首先需要安装html2canvas库，可以使用npm进行安装：

npm install html2canvas --save

2.在需要截屏的组件中引入html2canvas库：

import html2canvas from 'html2canvas'

3.在组件中定义一个方法，用于截屏iframe：

methods: {
  captureScreen() {
    // 获取iframe的dom结构
    const iframeHtml = this.$refs.iframe.contentWindow
    // 获取iframe内容
    const iframeBody = iframeHtml.document.getElementsByTagName('body')[0]
    // 获取iframe滚动的距离
    const iframeScrollY = iframeHtml.document.documentElement.scrollTop
    const iframeScrollX = iframeHtml.document.documentElement.scrollLeft
    // 将滚动的距离和要截取的宽高传给html2canvas
    html2canvas(iframeBody, {
      allowTaint: true,
      useCORS: true,
      width: 812, // TODO 截屏按照1920*1080分辨率下的预览窗口宽高
      height: 661,
      x: iframeScrollX,
      y: iframeScrollY
    }).then(canvas => {
      // 转成图片，生成图片地址
      const imgBase64 = canvas.toDataURL('image/png')
      if (imgBase64) {
        // 将图片地址赋值给data中的变量
        this.imgSrc = imgBase64
      } else {
        console.error('图片转换出错')
      }
    })
  }
}

4.在模板中使用iframe，并在需要截屏的元素上添加ref属性：

<template>
  <div>
    <iframe ref="iframe" src="http://www.example.com"></iframe>
    <button @click="captureScreen">截屏</button>
    <img :src="imgSrc" alt="">
  </div>
</template>