安装插件 npm install html2canvas --save 插件使用 <template><div style="padding: 10px;"><div ref="imageTofile" class="box">发生什么事了</div><button @click="toImage" style="margin: 10px;">截图</button><div><img :src="htmlUrl" style="height: 288px; width: auto" /></div></div> </template><script> import html2canvas from "html2canvas"; export default {data() {return {htmlUrl: "",};},methods: {toImage() {// 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等html2canvas(this.$refs.imageTofile, {useCORS: true, // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题}).then((canvas) => {let url = canvas.toDataURL("image/png");this.htmlUrl = url;// 把生成的base64位图片上传到服务器,生成在线图片地址console.log("base64 => ", this.htmlUrl);});},}, }; </script> <style scoped> .box {width: 512px;height: 288px;background-color: yellow; } </style> 效果