prescription-image-render

处方笺图片前端渲染工具

Usage

1. html 模板

<div class="pageStyle">
  <div :style="{ display: 'none' }">
    <svg id="svgCanvas"></svg>
  </div>
  <a-image
    v-if="prescriptionSVGBase64Data"
    width="100%"
    :src="prescriptionSVGBase64Data"
  />
</div>

2. 代码逻辑

import { PrescriptionUtil } from '@pluve/prescription-image-render';
const prescriptionInfoUrl = 'https://xxx';
const prescriptionSVGBase64Data = ref('');
PrescriptionUtil.getPrescriptionSVGRepresent({
  id: 'svgCanvas',
  url: prescriptionInfoUrl,
  debug: false, // 是否开启调试模式，开启后会在控制台打印日志
  enableEncode: true, // 是否开启图片base64编码，编码后可直接在img标签中使用
}).then((resp: any) => {
  if (!resp) {
    message.error('获取处方图片失败');
    return;
  }
  prescriptionSVGBase64Data.value = resp;
});