htmlToPdf处理视频

一个写好的html页面要打印pdf，其中有视频也有图片。参考了网上的一些方法，最终是在获取数据的时候，对视频进行了截取第一帧处理。

getFirstImgBase64(){
   this.piclist.forEach(item => {
    if(item.url.endsWith('.mp4')) {
      let dataURL = ""
      let video = document.createElement("video")
      video.setAttribute("crossOrigin", "anonymous") //处理跨域，保证可以读取到视频
      video.setAttribute("src", item.url)
      video.setAttribute("preload", "auto") // 不设置该项就不会开启预先加载视频，那么拿到的会是黑屏
      // 第一帧加载完毕时调用
      video.addEventListener("loadeddata", function () {
        let canvas = document.createElement("canvas")
        anvas.width = 100 //canvas的尺寸————可以理解为画板的尺寸————最终img占据的大小
        canvas.height = 100//绘制canvas，[资源地址,绘制起始横坐标,绘制起始纵坐标,绘制宽度,绘制高度]
        //————宽度高度可以理解为绘制的图像的尺寸，和上面的画板canvas的尺寸做好区分
        canvas.getContext("2d").drawImage(video, 0, 0, 100, 100)
        dataURL = canvas.toDataURL("image/jpeg") //转换为base64
        item.thumbnailUrl = dataURL
       })
     }
   })
}
同时定义了一个属性，在点击下载的时候将视频切换为图片，保证下载，下载完成后再切回视频

<div v-for="(item, index) in piclist" id="content" class="flex">
  <video v-if="item.url.endsWith('.mp4') && !isDownload" :src="item.url"  :ref="'videoElement' + index" width="100px" height="100px" controls style="margin-right: 20px"></video>
  <img v-if="item.url.endsWith('.mp4') && isDownload" :src="item.thumbnailUrl" alt="Video Thumbnail" style="margin-right: 20px">
  <el-image v-if="!item.url.endsWith('.mp4')"
          :src="item.url"
          style="width: 100px;height: 100px;margin-right: 20px" :preview-src-list="[item.url]"></el-image>
</div>
// 点击下载按钮，在getpdf中使用new Promise定义了一个结束返回
onClickDownLoad(name) {
  this.isDownload = true
  this.$nextTick(() => {
    this.getPdf('pdfDomRecord', name).then(res => {
      this.isDownload = false
    });
  })
}