vue页面转图片（转载）

原文地址：https://www.cnblogs.com/zouwangblog/p/11140568.html

1. install

npm install --save html2canvas

2. 在需要页面引入

import html2canvas from "html2canvas"

3. 使用

<div ref="imageWrapper">
      <div class="success">
        <div class="img">
          <img class="img-icon" src="../assets/success.png"/>
          <p style="font-weight: 600; font-size: 18px">支付成功</p>
        </div>
      </div>
      <div class="success-detail">
        <el-row style="margin-top: 10px;">
          <el-col :span="5" class="col-left-suc">收款商家</el-col>
          <el-col :span="16" class="col-right">{
   
   {merchant}}</el-col>
        </el-row>
        <el-row style="margin-top: 10px;">
          <el-col :span="5" class="col-left-suc">费用名称</el-col>
          <el-col :span="16" class="col-right">{
   
   {contName}}</el-col>
        </el-row>
        <el-row style="margin-top: 10px;">
          <el-col :span="5" class="col-left-suc">缴费金额</el-col>
          <el-col :span="16" class="col-right">{
   
   {chargePrice}}元</el-col>
        </el-row>
      </div>
    </div>
    <div class="button">
      <el-button style="width: 70%;" type="success" size="small" @click="toImage">生成截图        
    </el-button>
</div>

4.vue中用ref来指定你需要截屏的dom

toImage() {
   html2canvas(this.$refs.imageWrapper).then(canvas => {
       let dataURL = canvas.toDataURL("image/png");
       this.imgUrl = dataURL;
       if (this.imgUrl !== "") {
          this.dialogTableVisible = true;
       }
    });
}

该文章为转载，原文地址：https://www.cnblogs.com/zouwangblog/p/11140568.html