vue2生成二维码海报，支持复制，下载

在pc端生成如图所示二维码海报，且支持复制，下载二维码功能 安装好QRCode 和 html2canvas后

>  <div style="padding: 20px">
    <!-- 海报html元素 -->
    <div
      id="posterHtml"
      class="posterBox"
      :style="{backgroundImage: 'url(' + bgImgURL + ')' }"
    >
      <div class="posterContent">
        {{ contentData }}
      </div>
      <!-- 二维码 -->
      <div class="qrcodeBox">
        <div id="qrcodeImg"></div>
      </div>
    </div>
    <div>
      <button
        class="myButton"
        @click="createPoster"
      >生成海报</button>
      <button
        class="myButton"
        @click="downloadPoster(posterImgURL,'海报名称')"
      >下载海报</button>
    </div>
    <!--微信里,可长按保存或转发-->
    <!-- <img
      v-if="posterImgURL"
      class="posterBox"
      :src="posterImgURL"
    > -->
  </div>
</template>
<script>
import bgImgURL from '@/assets/images/common/codeBg.png'
import QRCode from 'qrcodejs2'
import html2canvas from 'html2canvas'

export default {
  data() {
    return {
      bgImgURL: bgImgURL,
      contentData: '我是一张分享海报', // 文案内容
      posterImgURL: '' // 最终生成的海报图片URL
    }
  },
  mounted() {
    this.$nextTick(
      () => {
        this.createQrcode('https://www.baidu.com/')
      }
    )
  },
  methods: {
    // 生成二维码
    createQrcode(text) {
      const qrcodeImgEl = document.getElementById('qrcodeImg')
      qrcodeImgEl.innerHTML = ''
      const qrcode = new QRCode(qrcodeImgEl, {
        width: 100,
        height: 100,
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.H
      })
      qrcode.makeCode(text)
    },
    // 生成海报
    createPoster() {
      const that = this
      const posterDOM = document.getElementById('posterHtml')
      html2canvas(posterDOM, {
        width: posterDOM.offsetWidth,
        height: posterDOM.offsetHeight,
        // 按比例增加分辨率
        scale: window.devicePixelRatio, // 设备像素比
        useCORS: true, // （图片跨域相关）
        allowTaint: true, // 允许跨域（图片跨域相关）
        logging: false,
        letterRendering: true
      }).then(function (canvas) {
        that.posterImgURL = canvas.toDataURL('image/png')
        that.copyImg()
      })
    },
    copyImg() {
      const parsedBase64 = this.parseBase64(this.posterImgURL)
      const type = parsedBase64.type
      // 将base64转为Blob类型
      const bytes = atob(parsedBase64.data)
      const ab = new ArrayBuffer(bytes.length)
      const ua = new Uint8Array(ab)
      for (let i = 0; i < bytes.length; i++) {
        ua[i] = bytes.charCodeAt(i)
      }
      const blob = new Blob([ab], { type })
      navigator.clipboard.write([new ClipboardItem({ [type]: blob })])
      this.$message.success('复制成功')
    },
    parseBase64(base64) {
      const re = new RegExp('data:(?<type>.*?);base64,(?<data>.*)')
      const res = re.exec(base64)
      if (res) {
        return {
          type: res.groups.type,
          ext: res.groups.type.split('/').slice(-1)[0],
          data: res.groups.data
        }
      }
    },
    // 下载海报
    downloadPoster(url, fileName) {
      const a = document.createElement('a')
      a.download = fileName
      a.href = url
      a.dispatchEvent(new MouseEvent('click'))
    }
  }
}
</script>
<style scoped>
/*海报*/
.posterBox {
  position: relative;
  width: 800px;
  height: 300px;
  background-repeat: no-repeat;
  background-size: cover;
}

/*海报文案*/
.posterContent {
  text-align: center;
  color: white;
  padding: 10px;
}

/*二维码*/
.qrcodeBox {
  position: absolute;
  bottom: 10px;
  right: 10px;
}

/*按钮*/
.myButton {
  background: none;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 4px;
  margin: 10px;
}
</style>