在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;
});