在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...