Vue项目中如何使用Html2Canvas

时间：2023-03-31 19:00:12 vue.js

前言：为了禁止复制检测到的数据，使用css:user-select:none;并且禁止右键，禁止复制，禁止选择，都用了，但是发现所有选择都不能复制txt，ppt等，但是可以复制到excel和word中，我....头疼，终于看到网上的大神们，用这个html转图片，试了一下，顺便记录下这一刻。首先感谢网友们积极发文，让我学习。下面进入安装环节：npminstallhtml2canvas--save介绍：importhtml2canvasfrom'html2canvas'　　

js代码块importhtml2canvasfrom'html2canvas';data(){return:{dataURL:'',tableData:[],isFakeData:true,}},components:{　　html2canvas},methods:{　　//页面元素转图片　　toImage(){　　　　//第一个参数是需要生成截图的元素，第二个是你需要配置的参数，比如宽高　　　let_this=this;html2canvas(this.$refs.imageWrapper,{backgroundColor:null//避免带有白色边框的图像}).then((canvas)=??>{letdataURL=canvas.toDataURL("image/png");_this.dataURL=dataURL;_this.isFakeData=false;_this.tableData=[]})},　　}常见问题：隐藏页面元素只显示图片方法：①设置visibility:hidden;②使用v-show设置isFakeData最后不管怎样，将找到的元素设置为空，这样可以避免右键查看元素看到的是复制品。特别鸣谢博主：https://www.cnblogs.com/shirl...

上一篇：uni-app，Vue3+ucharts图表H5无法渲染

下一篇：ModStartCMS模块化通用建站系统v3.0.0会员VIP、访问控制、URL兼容

Vue项目中如何使用Html2Canvas相关文章