vue-cert-poster

Vue 生成证书海报组件

最终效果

特性

• PC 端和移动端效果一致

使用

1. 安装

npm i -S vue-cert-poster

2. 引入组件

import CertPoster from 'vue-cert-poster'

Vue.use(CertPoster)

3. 调用示例

<template>
  <div id="app">
    <button @click="onCreate">
      生成证书海报
    </button>

    <img
      :src="https://raw.githubusercontent.com/1014156094/vue-cert-poster/HEAD/posterUrl"
      width="100%"
    >
  </div>
</template>

<script>
export default {
  data() {
    return {
      posterUrl: '',
      certDetail: {
          title: '最佳员工奖', // 证书标题
          background:
            'http://cdn.towinos.com/committee/cert/style/2/edit/20200407103146-2142379266903-cert-default-background.png?imageView2/2/w/1920', // 证书背景
          stamp:
            'http://cdn.towinos.com/committee/cert/style/2/edit/20200407023952-367736050162-c4cd5f047be86d3f1545fcf2defe5b09.png?imageView2/2/w/1920', // 证书盖章
          greet: '亲爱的小七哥同志', // 称呼
          content:
            '在 2020 年 12 月中，工作认真、能力突出、表现优异，被评为“最佳员工”，特发此证，以资鼓励。', // 证书内容
          signature: '深圳市某科技有限公司↵2020年12月12日', // 证书署名
          number: 'SHEN-ZHEN-20200415' // 证书编号
      }
    }
  },

  methods: {
    onCreate() {
      this.$certPoster({
        certTitle: this.certDetail.title,
        certBackground: this.certDetail.background,
        certStamp: this.certDetail.stamp,
        certContent: this.certDetail.content,
        certSignature: this.certDetail.signature,
        certNumber: this.certDetail.number,
        width: '600px',
        height: '460px'
      }).then(posterUrl => {
        // 生成成功
        this.posterUrl = posterUrl // 海报 base64 地址
      }).catch(()=>{
        // 生成失败
      })
    }
  }
}
</script>

或者

<template>
  <div id="app">
    <button @click="onCreate">
      生成证书海报
    </button>

    <img
      :src="https://raw.githubusercontent.com/1014156094/vue-cert-poster/HEAD/posterUrl"
    >

    <cert-poster
      ref="certPoster" 
      width="600px"
      height="460px"
      :cert-title="certDetail.title"
      :cert-background="certDetail.background"
      :cert-stamp="certDetail.stamp"
      :cert-content="certDetail.content"
      :cert-signature="certDetail.signature"
      :cert-number="certDetail.number"
      @success="onSuccess"
    />
  </div>
</template>

<script>
export default {
  name: 'App',
  
  data() {
    return {
      posterUrl: '',
      certDetail: {
          title: '最佳员工奖', // 证书标题
          background:
            'http://cdn.towinos.com/committee/cert/style/2/edit/20200407103146-2142379266903-cert-default-background.png?imageView2/2/w/1920', // 证书背景
          stamp:
            'http://cdn.towinos.com/committee/cert/style/2/edit/20200407023952-367736050162-c4cd5f047be86d3f1545fcf2defe5b09.png?imageView2/2/w/1920', // 证书盖章
          greet: '亲爱的小七哥同志', // 称呼
          content:
            '在 2020 年 12 月中，工作认真、能力突出、表现优异，被评为“最佳员工”。↵↵                                                                                    —— 特发此证，以资鼓励', // 证书内容
          signature: '深圳市某科技有限公司↵2020年12月12日', // 证书署名
          number: 'SHEN-ZHEN-20200415' // 证书编号
      }
    }
  },

  methods: {
    onSuccess(posterUrl){
      this.posterUrl = posterUrl // 海报 base64 地址
    },

    onCreate() {
      this.$refs.certPoster.create()
    }
  }
}
</script>

Prop

Event

Slot

许可证

MIT

最后

使用过程中发现任何问题都可以提 Issue，也非常欢迎提 PR