主页面截图到弹窗
<!DOCTYPE html>
<html><head><title>截图</title><meta charset="UTF-8"><!-- 引入样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><!-- 引入组件库 --><script src="https://unpkg.com/vue@2/dist/vue.js"></script><script src="https://unpkg.com/element-ui/lib/index.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.min.js"></script>
</head><body><div id="app"><el-button @click="dialogFormVisible = true;capture();">截图</el-button><div ref="capture"><div v-for="item in items" :key="item">fdsafsafas测试内容</div></div><el-dialog title="弹窗form" :visible.sync="dialogFormVisible"><el-form :model="form"><el-form-item label="图片" ><img ref="image" id="screenshot" src="" alt="截图预览" width="100%"/></el-form-item></el-form></el-dialog></div>
</body>
<script>// 创建一个新的Vue实例或应用new Vue({el: '#app',data: {items: Array(30).fill('item'),dialogFormVisible: false,form: {},},methods: {capture() {html2canvas(this.$refs.capture).then(canvas => {const img = this.$refs.image;img.src = canvas.toDataURL('image/png');});},},});
</script>
</html>
