Vue使用html2canvas将页面转化为图片

傷城~ 2023-10-11 16:42 62阅读 0赞

需求是微信端将页面截屏之后保存到本地，使用了html2canvas插件

### install ###

`npm install --save html2canvas`

### 在所需页面引入 ###

`import html2canvas from "html2canvas"`

### use ###

复制代码

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

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

![29d5aeeadcd44a753800626ed275236b.png][]

![7b34faefe4a93da2524204901591d266.png][]

[29d5aeeadcd44a753800626ed275236b.png]: https://img-blog.csdnimg.cn/img_convert/29d5aeeadcd44a753800626ed275236b.png
[7b34faefe4a93da2524204901591d266.png]: https://img-blog.csdnimg.cn/img_convert/7b34faefe4a93da2524204901591d266.png