BizPoster 分享海报

模板化 canvas 海报合成：品牌条 / 主图（cover 裁剪，缺省渐变占位）/ 标题副标题 / 简介（自动缩排，行数按剩余高度自适应、至多 3 行裁断）/ 头像昵称 / 二维码复用 BizCode（支持中心 logo）。scale 倍率高清导出 PNG、剪贴板复制、批量生成（循环出图）、templateRequest 远程模板配置。与 BizSharePanel（链接 + 二维码卡片展示）互补，本组件产出可下载 / 可发送的图片物料。

基础合成

1080 × 1080 · 2x 高清导出

默认 square 1080×1080 模板，2x 导出；预览随 data 变化实时重绘（200ms 防抖）。

square 1080² 模板全槽位；内置下载 / 复制操作条；预览随 data 变化实时重绘。

<script setup lang="ts">
/** 基础合成：主图 + 标题/副标题/简介 + 二维码，内置下载/复制操作条 */
import { BizPoster } from 'vue3-ep-biz-lib'
</script>

<template>
  <div style="max-width: 340px">
    <BizPoster
      show-toolbar
      brand="XX 科技 · 品牌活动"
      :data="{
        image: 'https://picsum.photos/seed/launch/860/560',
        title: '2026 秋季新品发布会',
        subtitle: '10 月 30 日 · 线上直播',
        desc: '三大产品线同步升级，直播间抽免单，预约通道现已开放。',
        qrcodeValue: 'https://example.com/launch',
        hint: '扫码预约直播',
      }"
    />
    <p style="margin: 12px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">
      默认 square 1080×1080 模板，2x 导出；预览随 data 变化实时重绘（200ms 防抖）。
    </p>
  </div>
</template>

显示代码

主题与背景

纯色背景渐变背景

theme 覆盖 bg / accent / text / muted；background 切纯色 / 渐变。

<script setup lang="ts">
/** 主题与背景：theme 覆盖配色（bg/accent/text/muted），background 切纯色/渐变 */
import { reactive, ref } from 'vue'
import { BizPoster } from 'vue3-ep-biz-lib'

const background = ref<'plain' | 'gradient'>('plain')
const theme = reactive({ accent: '#409eff' })

const presets: Array<{ label: string; accent: string }> = [
  { label: '科技蓝', accent: '#409eff' },
  { label: '活力橙', accent: '#e6a23c' },
  { label: '国潮红', accent: '#f56c6c' },
  { label: '草木绿', accent: '#67c23a' },
]
</script>

<template>
  <div style="display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start">
    <div style="max-width: 300px">
      <BizPoster
        :background="background"
        :theme="{ accent: theme.accent }"
        :data="{ title: '主题一换，气质全换', subtitle: 'accent 驱动品牌条 / 渐变 / 占位', desc: '背景渐变模式自 accent 向 bg 过渡，适合品牌大促氛围。', qrcodeValue: 'https://example.com/theme' }"
      />
    </div>
    <div style="display: flex; flex-direction: column; gap: 10px">
      <el-radio-group v-model="background">
        <el-radio-button value="plain">纯色背景</el-radio-button>
        <el-radio-button value="gradient">渐变背景</el-radio-button>
      </el-radio-group>
      <el-button v-for="p in presets" :key="p.accent" size="small" @click="theme.accent = p.accent">{{ p.label }}</el-button>
    </div>
  </div>
</template>

显示代码

分销邀请海报

750 × 1334 · 2x 高清导出

portrait 竖版 + 头像昵称 + 邀请二维码，朋友圈分享场景。

<script setup lang="ts">
/** 分销邀请海报：头像昵称 + 邀请二维码（portrait 竖版，朋友圈分享） */
import { BizPoster } from 'vue3-ep-biz-lib'
</script>

<template>
  <div style="max-width: 300px">
    <BizPoster
      template="portrait"
      show-toolbar
      filename="invite-750x1334.png"
      brand="会员好物分享"
      :data="{
        image: 'https://picsum.photos/seed/goods/750/700',
        title: '我推荐的宝藏好物',
        subtitle: '新人下单立减 30 元',
        desc: '精选居家好物，全程售后，7 天无理由退换。',
        avatar: 'https://i.pravatar.cc/128?img=47',
        name: '分享官 · 小雅',
        qrcodeValue: 'https://example.com/invite/U8F2',
        hint: '长按扫码领取新人礼',
      }"
    />
  </div>
</template>

显示代码

多尺寸预设

square · 1080 × 1080（朋友圈方图）portrait · 750 × 1334（群聊竖版）story · 1080 × 1920（全屏故事）

square / portrait / story 三模板即时切换。

<script setup lang="ts">
/** 多尺寸预设：square 1080² / portrait 750×1334 / story 1080×1920 */
import { ref } from 'vue'
import { BizPoster } from 'vue3-ep-biz-lib'
import type { BizPosterTemplate } from 'vue3-ep-biz-lib'

const template = ref<BizPosterTemplate>('square')
</script>

<template>
  <div style="display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start">
    <div :style="{ maxWidth: template === 'square' ? '280px' : '240px' }">
      <BizPoster
        :template="template"
        :data="{
          title: '尺寸随场景切换',
          subtitle: '朋友圈 / 群聊 / 全屏故事',
          qrcodeValue: 'https://example.com/sizes',
          name: '运营物料组',
          hint: '扫码查看',
        }"
      />
    </div>
    <el-radio-group v-model="template" style="display: flex; flex-direction: column; gap: 4px">
      <el-radio value="square">square · 1080 × 1080（朋友圈方图）</el-radio>
      <el-radio value="portrait">portrait · 750 × 1334（群聊竖版）</el-radio>
      <el-radio value="story">story · 1080 × 1920（全屏故事）</el-radio>
    </el-radio-group>
  </div>
</template>

显示代码

高清导出

1x2x3x

1x=1080px 宽；2x=2160px；3x=3240px

scale 1x~3x 控制导出分辨率；expose.download 自定义文件名。

<script setup lang="ts">
/** 高清导出：scale 控制导出倍率（默认 2x），expose.download 自定义文件名 */
import { ref } from 'vue'
import { BizPoster } from 'vue3-ep-biz-lib'
import type { BizPosterInstance } from 'vue3-ep-biz-lib'

const posterRef = ref<BizPosterInstance>()
const scale = ref(2)
</script>

<template>
  <div style="display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap">
    <div style="max-width: 280px">
      <BizPoster ref="posterRef" :scale="scale" :data="{ title: '高清导出示例', subtitle: '印刷级物料导出', qrcodeValue: 'https://example.com/hd' }" />
    </div>
    <div style="display: flex; flex-direction: column; gap: 10px">
      <el-radio-group v-model="scale">
        <el-radio-button :value="1">1x</el-radio-button>
        <el-radio-button :value="2">2x</el-radio-button>
        <el-radio-button :value="3">3x</el-radio-button>
      </el-radio-group>
      <el-button type="primary" size="small" @click="posterRef?.download('brand-poster-hd.png')">下载（自定义文件名）</el-button>
      <span style="font-size: 12px; color: var(--el-text-color-placeholder)">1x=1080px 宽；2x=2160px；3x=3240px</span>
    </div>
  </div>
</template>

显示代码

复制到剪贴板

expose.copy() 直接贴进聊天窗口 / 文档（不支持时提示改用下载）。

<script setup lang="ts">
/** 复制到剪贴板：expose.copy() 直接贴进聊天窗口 / 文档 */
import { ref } from 'vue'
import { BizPoster } from 'vue3-ep-biz-lib'
import type { BizPosterInstance } from 'vue3-ep-biz-lib'

const posterRef = ref<BizPosterInstance>()
</script>

<template>
  <div style="display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap">
    <div style="max-width: 280px">
      <BizPoster ref="posterRef" :data="{ title: '一键复制海报', subtitle: 'Ctrl+V 直接发送', qrcodeValue: 'https://example.com/copy' }" />
    </div>
    <el-button type="primary" plain size="small" @click="posterRef?.copy()">复制图片到剪贴板</el-button>
  </div>
</template>

显示代码

主图注入与占位

无主图

注入主图

有图 cover 裁剪铺满；无图自动渐变占位，不阻塞合成。

<script setup lang="ts">
/** 主图注入：有图 cover 裁剪铺满，无图自动渐变占位（不阻塞合成） */
import { ref } from 'vue'
import { BizPoster } from 'vue3-ep-biz-lib'

const withImage = ref(true)
</script>

<template>
  <div style="display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap">
    <div style="max-width: 280px">
      <BizPoster
        :data="{
          image: withImage ? 'https://picsum.photos/seed/postermain/860/520' : undefined,
          title: withImage ? '主图 cover 裁剪' : '无主图自动占位',
          subtitle: '比例不符自动居中裁剪',
          qrcodeValue: 'https://example.com/img',
        }"
      />
    </div>
    <el-switch v-model="withImage" active-text="注入主图" inactive-text="无主图" />
  </div>
</template>

显示代码

长文案自动缩排

标题降字号至单行容纳，简介行数按剩余高度自适应（至多 3 行），末行超宽截断加省略号。

<script setup lang="ts">
/** 长文案自动缩排：标题降字号至可容纳，简介 3 行裁断加省略号 */
import { BizPoster } from 'vue3-ep-biz-lib'
</script>

<template>
  <div style="max-width: 300px">
    <BizPoster
      :data="{
        title: '超长标题演示：企业级数字化协同平台年度旗舰版功能全景发布说明会',
        subtitle: '副标题同样参与自动缩排保证单行容纳',
        desc: '简介最多展示三行，超出部分自动截断并追加省略号：本次发布涵盖低代码编排、数据 Fabric、智能问数、跨组织协同四大板块，并同步开放合作伙伴生态共建计划，欢迎报名参与线上直播与线下同城meetup，现场更有完整产品体验区与一对一咨询台，期待与您共同探讨数字化落地的最佳实践路径与典型行业案例。',
        qrcodeValue: 'https://example.com/shrink',
      }"
    />
  </div>
</template>

显示代码

批量生成

生成结果为 dataURL，可直接上传 OSS 或写入下载队列

sources 逐条合成返回 dataURL 列表（渲染后自动恢复当前数据）。

<script setup lang="ts">
/** 批量生成：sources 逐条合成并返回 dataURL 列表（循环出图，渲染后自动恢复当前数据） */
import { ref } from 'vue'
import { BizPoster } from 'vue3-ep-biz-lib'
import type { BizPosterData, BizPosterInstance } from 'vue3-ep-biz-lib'
import { ElMessage } from 'element-plus'

const posterRef = ref<BizPosterInstance>()
const results = ref<string[]>([])
const generating = ref(false)

const sources: BizPosterData[] = [
  { title: '城市站 · 北京场', subtitle: '11 月 02 日', qrcodeValue: 'https://example.com/tour/bj' },
  { title: '城市站 · 上海场', subtitle: '11 月 09 日', qrcodeValue: 'https://example.com/tour/sh' },
  { title: '城市站 · 深圳场', subtitle: '11 月 16 日', qrcodeValue: 'https://example.com/tour/sz' },
]

const run = async (): Promise<void> => {
  generating.value = true
  try {
    results.value = await posterRef.value?.generate(sources) ?? []
    ElMessage.success(`已生成 ${results.value.length} 张`)
  } finally {
    generating.value = false
  }
}
</script>

<template>
  <div style="display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap">
    <div style="max-width: 240px">
      <BizPoster ref="posterRef" :data="{ title: '全国巡回沙龙', subtitle: '批量生成演示母版', qrcodeValue: 'https://example.com/tour' }" />
    </div>
    <div style="display: flex; flex-direction: column; gap: 10px">
      <el-button type="primary" size="small" :loading="generating" @click="run">批量生成 3 张</el-button>
      <div v-if="results.length" style="display: flex; gap: 8px">
        <img v-for="(url, i) in results" :key="i" :src="url" style="width: 86px; border-radius: 6px; border: 1px solid var(--el-border-color-lighter)" />
      </div>
      <span style="font-size: 12px; color: var(--el-text-color-placeholder)">生成结果为 dataURL，可直接上传 OSS 或写入下载队列</span>
    </div>
  </div>
</template>

显示代码

远程模板配置

组件以本地 props 渲染，templateRequest 返回后按「远程优先」合并重绘；请求失败静默回退本地配置。

templateRequest 拉取运营规范（模板 / 配色 / 背景），远程优先合并，失败静默回退。

<script setup lang="ts">
/** 远程模板配置：templateRequest 拉取运营配置（模板 / 配色 / 背景）并与本地 props 合并（远程优先） */
import { BizPoster } from 'vue3-ep-biz-lib'
import type { BizPosterTemplateConfig } from 'vue3-ep-biz-lib'

/** 模拟运营后台下发的海报规范（500ms 延迟） */
const templateRequest = (): Promise<BizPosterTemplateConfig> => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        template: 'portrait',
        background: 'gradient',
        theme: { accent: '#7c3aed', bg: '#faf5ff', text: '#2d1b4e', muted: '#8b7bab' },
      })
    }, 500)
  })
}
</script>

<template>
  <div style="max-width: 260px">
    <BizPoster
      :template-request="templateRequest"
      :data="{ title: '运营规范驱动', subtitle: '本地 square / 蓝色 → 远程 portrait / 紫色渐变', qrcodeValue: 'https://example.com/remote' }"
    />
    <p style="margin: 12px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">
      组件以本地 props 渲染，templateRequest 返回后按「远程优先」合并重绘；请求失败静默回退本地配置。
    </p>
  </div>
</template>

显示代码

Props

属性名	类型	默认值	说明
template	'square' | 'portrait' | 'story'	'square'	尺寸模板（1080² / 750×1334 / 1080×1920）
data	BizPosterData	{ title: '海报标题' }	内容槽位（image / title / subtitle / desc / avatar / name / qrcodeValue / hint）
theme	BizPosterTheme	{}	主题配色（bg / accent / text / muted，缺省取默认主题）
background	'plain' | 'gradient'	'plain'	背景模式（gradient 自 accent 向 bg 过渡）
brand	string	''	顶部品牌名（accent 色条 + 小字）
qrcode-logo	string	''	二维码中心 logo（透传 BizCode logo 通道）
scale	number	2	导出倍率（2 = 2 倍分辨率）
filename	string	'poster.png'	下载文件名
show-toolbar	boolean	false	内置下载 / 复制操作条
template-request	() => Promise<BizPosterTemplateConfig>	—	远程模板配置（挂载后合并，远程优先）

Expose

属性/方法	说明
to-data-url	() => Promise<string> 当前海报 PNG dataURL
download	(filename?: string) => Promise<void> 下载 PNG
copy	() => Promise<void> 复制到剪贴板（ClipboardItem，不支持时提示）
generate	(list: BizPosterData[]) => Promise<string[]> 批量逐条合成（结束后恢复当前数据）
refresh	() => Promise<void> 强制重绘

口径说明

• 主图降级：图片加载失败或跨域污染画布（toDataURL 抛错）时自动降级为渐变占位重绘一次，保证导出可用；污染源在组件生命周期内不再重试。
• 缩排规则：标题 / 副标题自基准字号逐级 −2px 至单行容纳（下限 36 / 26px）；简介固定 28px、最多 3 行且行数按剩余高度自适应（内容过满时先行减行，保证不压底部分隔线 / 二维码卡 / 头像区），末行超宽截断加「…」；主题色支持 3 / 6 位 hex（3 位自动展开）。
• 二维码：内部挂载隐藏 BizCode（type='qr'，size=200 白底），首次渲染就绪后进入画布；qrcodeValue 缺省时不渲染码位。
• 批量生成：为同步串行渲染（每张约一帧 + 合成耗时），结束后恢复 props.data 并重绘预览。