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="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="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

参数	说明	类型	默认值
width	证书宽，为保证清晰度，生成成功后会放大三倍	String	600px
height	证书高，为保证清晰度，生成成功后会放大三倍	String	460px
certTitle	证书标题	String	''
certBackground	证书背景	String	''
certStamp	证书盖章	String	''
certGreet	证书问候语	String	''
certContent	证书内容，回车符（\n 或 ↵）自动转为 <br>，空格符自动转为 &nbsp;	HTML	''
certSignature	证书署名，回车符（\n 或 ↵）自动转为 <br>，空格符自动转为 &nbsp;	HTML	''
certNumber	证书编号	String	''
showCertGreet	是否显示证书问候语	Boolean	false

Event

事件	说明	回调
success	生成成功后触发	imageUrl
fail	生成失败后触发	-

Slot

插槽名	说明
main-content	证书主要内容，除了证书背景外的所有内容

许可证

MIT

最后

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