通过node实现证书模版自动动态填充相关信息，生成不同的证书-工作记录

最近项目有一个需求是生成每个学员的培训证书，每个学员的信息不同，要动态生成证书

1.首先找UI老师要一张证书模版图，svg格式的，我从网上扒了一张

2.到 https://c.runoob.com/more/svgeditor/ 的svg 编辑器上 把 空着的 四个空位填上变量

• 导入svg

• 左侧栏的文本编译器，在空位上填充上变量名称（名称尽量起的特殊、唯一，不容易重复的）

• 依次填充完，我先设置不同的颜色用于区分

3.通过nest框架简单写一个接口，作为示例（具体代码仓库地址我放到后面）

import { Controller, Get, Query, ValidationPipe } from '@nestjs/common';
import { FileReadService } from './file-read.service';
import * as fs from 'fs';

@Controller('api')
export class FileReadController {
  constructor(private readonly fileReadService: FileReadService) {}
  @Get('/fileRead')
  async getFileRead(): Promise<any> {
    try {
      //转换svg为utf-8格式
      let svgContent = await fs.promises.readFile(
        'src/assets/images/cert.svg',
        'utf-8',
      );
      //替换空位的变量的值，这些值正常是根据前端传参查出指定的用户信息赋值替换上去的
      svgContent = svgContent.replace(/namenamename/gi, '张三');
      svgContent = svgContent.replace(/IDIDIDIDIDIDIDIDI/gi, '1234567789090');
      svgContent = svgContent.replace(/certCERTCERTCERT/gi, '1234567890123');
      svgContent = svgContent.replace(/timeTIMTIMTIMTI/gi, '2023-08-29');
      return svgContent;
    } catch (error) {
      return error;
    }
  }
}

4. 前端调用接口返回 svg 的数据 （看到返回的数据已经是替换成功了）

5.前端同学回显证书 - 以小程序的写法做demo

wx.request({
    url: `127.0.0.1:3000/api/fileRead`,
    success:(res)=>{
      let data = res.data;
      let iconPath = 'data:image/svg+xml;base64,' + Base64.btoa(unescape(encodeURIComponent(data))); 
      this.setData({  
        cert_url:iconPath
      })
    }
})

//cert_url 生成一个 图片的 url，用 image 标签展示
<image wx:if="{{cert_url}}" src="{{cert_url}}" class="tag"></image>

6.证书最后样式

nest模版代码仓库地址https://gitee.com/kangshuolei/nest-demo

感觉有帮助，麻烦给个 start ！