vue中下载生成的海报

先下载插件

npm install html2canvas --save

 页面引用

import html2canvas from "html2canvas";

页面

<div style="text-align: center; padding: 20px 0" ref="imageWrapper">

        <div v-if="posterList.response">{{ posterList.response.corpName }}</div>

        <div>{{ posterList.post }}</div>

        <el-image

          style="width: 200px; height: 200px"

          :src="codeUrl"

          :preview-src-list="[codeUrl]"

        >

        </el-image>

      </div>

      <span slot="footer" class="dialog-footer">

        <el-button type="primary" plain @click="dialogVisible = false">

          取 消

        </el-button>

        <el-button type="primary" @click="downloadCode"> 下载海报 </el-button>

      </span>

 data() {

    return {

              posterList: {},

    }

} 

 methods: {

  //获取二维码

  getCode(row) {

      this.posterList = row;

      taskQrcode(row.taskId).then((res) => {

        if (res.code == 200) {

          this.dialogVisible = true;

          this.codeUrl = "data:image/png;base64," + res.data;

        }

      });

    },

    // 下载海报

    downloadCode() {

      html2canvas(this.$refs.imageWrapper).then((canvas) => {

        let dataURL = canvas.toDataURL("image/png");

        // this.imgUrl = dataURL

        var a = document.createElement("a"); // 生成一个a元素

        var event = new MouseEvent("click"); // 创建一个单击事件

        a.download = name || "photo"; // 设置图片名称

        a.href = dataURL; // 将生成的URL设置为a.href属性

        a.dispatchEvent(event); // 触发a的单击事件

      });

    },

}