vue 生成自定义内容，带二维码海报，并保存本地相册

需求：海报文本自定义，内容动态加载， 二维码根据接口数据拼接网址，生成二维码，生成海报图片保存到本地相册。
实现步骤：

一、引入插件（qrcodejs2，html2canvas ）

npm install qrcodejs2 --save
npm install html2canvas --save

二、 实现代码

template 部分

<template>
  <div>
    <!-- 海报html元素 -->
    <div id="posterHtml">
      <div class="fs20 text-center mt30">{{posterContent}}</div>
      <div class="fs16 text-center mt30">{{posterContent}}</div>
      <!-- 二维码 -->
      <div class="ml30 mr30 mt30 mb30 p30"><div class="width-full block" id="qrcodeImg"></div></div>
    </div>
    <!-- 点击生成海报并下载本地 -->
    <div class="m15 p30">
      <van-button  class="width-full" type="primary" color="#00A54F" round @click="createPoster">生成海报</van-button>
    </div>
  </div>
</template>

script 部分

import QRCode from 'qrcodejs2'
import html2canvas from 'html2canvas'
import { Button } from 'uni-h5-vant'
export default {
  data () {
    return {
      posterContent: '文案内容', // 文案内容
      posterImg: '', // 最终生成的海报图片
      posterImgName: '海报' // 最终生成的海报图片名称
    }
  },
  components: {
    VanButton: Button
  },
  mounted () {
    this.createQrcode('http://www.baidu.com/')
  },
  methods: {
    createQrcode (text) {
      // 生成二维码
      const qrcodeImgEl = document.getElementById('qrcodeImg')
      let qrcode = new QRCode(qrcodeImgEl, {
        width: 256,
        height: 256,
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.H
      })
      qrcode.makeCode(text)
    },
    createPoster () {
      // 生成海报
      const vm = this
      const domObj = document.getElementById('posterHtml')
      html2canvas(domObj, {
        useCORS: true,
        allowTaint: false,
        logging: false,
        letterRendering: true,
        onclone (doc) {
          let e = doc.querySelector('#posterHtml')
          e.style.display = 'block'
        }
      }).then(canvas => {
        // 在微信里,可长按保存或转发
        vm.posterImg = canvas.toDataURL('image/png')
        console.log(vm.posterImg)
        vm.imgDown(vm.posterImg)
      })
    },
    // 保存图片到本地
    imgDown (img) {
      var alink = document.createElement('a')
      alink.href = img
      alink.download = this.posterImgName // 图片名
      alink.click()
    }
  }
}