vue 生成海报并下载

用到插件    vue-canvas-poster 

具体的使用方法：

html:

<vue-canvas-poster
        :widthPixels="0"
        :painting="painting"
        @success="success"
        @fail="fail"
      ></vue-canvas-poster>
      <img :src="posterImg" />

data(){
  return{

        painting: {
        width: "285px",
        height: "363px",
        background: "",
        views: [
          {
            type: "text",
            text: "请打开微信扫码使用",
            css: {
              top: "60px",
              left: "50px",
              width: "",
              maxLines: 1,
              fontSize: "20px",
              fontWeight: "bold",
              fontFamily: "黑体",
            },
          },
          {
            type: "qrcode",
            content: "https://github.com/sunniejs/vue-canvas-poster", //动态生成
            css: {
              top: "110px",
              left: "77px",
              color: "#000000",
              background: "transparent",
              width: "130px",
              height: "130px",
            },
          },
          {
            type: "rect",
            css: {
              bottom: "60px",
              left: "0px",
              width: "100%",
              height: "1px",
              color: "#aaa",
            },
          },
          {
            type: "text",
            text: `${JSON.parse(localStorage.getItem("userMsg")).hotelName}就餐码`, //动态酒店
            css: {
              bottom: "10px",
              left: "0",
              width: "100%",
              maxLines: 1,
              fontSize: "16px",
              lineHeight: "32px",
              fontWeight: "bold",
              fontFamily: "黑体",
              textAlign:'center'
            },
          },
        ],
      },
   }
}
    //成功生成海报
    success(src) {
      this.posterImg = src;
    },
    fail(err) {
      console.log(err);
    },

            

　　效果图：

 

Vue Canvas Poster文档：https://sunniejs.github.io/vue-canvas-poster/#/README