一个写好的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") //转换为base64item.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 = truethis.$nextTick(() => {this.getPdf('pdfDomRecord', name).then(res => {this.isDownload = false});})
}
