在vue中使用html2canvas生成圖片

首先，在vue中引入html2canvas，執行命令   

npm install --save html2canvas

然后在需要生成圖片的頁面中引入

import html2canvas from 'html2canvas';

 

開始做的是將生成圖片前的代碼頁面展示出來，但是后面因需求改變，要不展示生成的代碼，直接展示生成后的圖片

雖說是不展示，但是還是要有，不能隱藏（display:none;或者opacity：0），不然繪制出來的就是一片空白區域，我們可以用下面的方法

1.將需要繪制的div fixed定位，注意要定位在 top:0, left:0,保證內容區能在可是區域內容，

2.然后利用z-index來隱藏，這樣需要上層有一個遮罩層，需要帶背景的層來遮罩住下面的內容

<div class="xibao_wrapper">
    <div class="img_container" ref="imgContainer">
        <div class="img_content">
            <p id="title_text">
                熱烈祝賀{{formData.countyareaText}}{{formData.branchpostofficeText}}
            </p>
            <p id="subtitle_text" class="fontFamily">
            獲得
                <span>曬單</span>
            </p>
            <p class="img_content_text fontFamily">
                <label>{{date}}</label>
                <label>{{orderNum}}</label>
            </p>
            <p class="img_content_text fontFamily">
                <label>營銷人</label>
                <label>
                <span v-for="saler in salers" :key="saler.name">{{saler.name}}</span>
                </label>
            </p>
            <p class="img_content_text fontFamily">
                <label>套餐</label>
                <label>{{formData.packageidText}}</label>
            </p>
        </div>
    </div>
</div>

css樣式如下：

.xibao_wrapper {
        width: 100%;
        height: 100%;
        position: fixed;
        left: 0;
        top: 0;
        z-index: -1;
 }
            

點擊按鈕，執行轉換成圖片的代碼

html2canvas(this.$refs.imgContainer, {
    // 轉換為圖片
    useCORS: true // 解決資源跨域問題
}).then(canvas = > {
    console.log(canvas, 'canvas');
    let dataURL = canvas.toDataURL('image/png');
    this.showImg = true;
    this.imgUrl = dataURL;
});