html2canvas vue 为定义_在Vue项目中如何使用Html2Canvas

前言：为了把查出的数据禁止复制，用css：user-select:none;和禁止右键，禁止复制，禁止选中，都用了，却发现全选不能复制txt，ppt等里面了，却可以复制到excel和word里面去，我....头疼，最后看到网络上大神们，用这个html转图片，就拿来试试，顺便记录一下这个时刻。首先要谢谢网友们的积极发表文章，我才能学习到。现在入正题

安装：npm install html2canvas --save

引入：import html2canvas from 'html2canvas'

js代码块

import html2canvas from 'html2canvas';

data(){

return:{

dataURL:'',

tableData:[],

isFakeData:true,

}

},

components: {

html2canvas

},

methods: {

// 页面元素转图片

toImage() {

// 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等

let _this=this;

html2canvas(this.$refs.imageWrapper,{

backgroundColor: null //避免图片有白色边框

}).then((canvas) => {

let dataURL = canvas.toDataURL("image/png");

_this.dataURL = dataURL;

_this.isFakeData=false;

_this.tableData=[]

})

},

}

常见的问题：

隐藏页面元素，只显示图片方法：

①设置visibility:hidden;

②用v-show设置isFakeData

最后不管怎么样都设置查到的元素为空，这样就避免了可以右键查看元素来看复制。