在Vue项目中如何使用Html2Canvas

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

安装：npm install html2canvas --save

引入：import html2canvas from 'html2canvas'

<!-- 把需要生成截图的元素放在一个元素容器里,设置一个ref -->
<div ref="imageTofile" v-show="!isFakeData">
　　<!-- 这里放需要截图的元素,自定义组件元素也可以 -->
</div>
<!-- 如果需要展示截取的图片,给一个img标签 -->
<img :src="dataURL" v-show="!isFakeData">

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

特别感谢博主：
https://www.cnblogs.com/shirl...