元素插件

约 684 字大约 2 分钟

...

2026-09-28

分类介绍

元素插件（plugin-ele-*）用于新增打印元素，注册后设计器左侧元素分组出现对应元素，拖入模板即可使用。

主要使用两个 hook：

init：注册元素类型与属性面板
createPrintElement：按 ele.type 创建对应元素

插件	type	功能
plugin-ele-bwip	barcode/qrcode	bwip-js 条码/二维码（100+ 规范）
plugin-ele-fabric	fText/fabric	Fabric 文本 / 自定义画布（toSVG）
plugin-ele-echarts	echarts	ECharts 图表（SVG 矢量渲染）
plugin-ele-w2html	w2html	Word/Excel 粘贴转 HTML
plugin-ele-e2table	e2table	Excel 粘贴转 html表格
plugin-ele-shtml	shtml	任意 HTML 长内容自动分页
plugin-ele-box	box	数组循环渲染子模板 + 自动分页
plugin-ele-stable	stable	静态表格（弹窗 DIY，合并单元格）
plugin-ele-pdf	pdf	pdfjs 渲染 PDF 页面 + 叠加内容 +自动分页
plugin-ele-seal	seal	骑缝章：按渲染页数切分章图逐页骑缝显示

示例代码

统一注册（唯一入口 hiprint.register，异步，须在创建模板/打开设计器之前）：

import pluginBox from '@sv-print/plugin-ele-box';
import pluginEcharts from '@sv-print/plugin-ele-echarts';

const plugins = [pluginBox({/* 插件 config */}), pluginEcharts()];
await hiprint.register({ plugins }); // 须在创建模板/打开设计器之前注册

以 box（容器循环渲染）为例：

import pluginEleBox from '@sv-print/plugin-ele-box';

const plugins = [
  pluginEleBox({
    showDesign: true, // 显示子模板设计按钮
    onDesignClick: (json, callback) => {
      // 自定义子模板设计入口，处理完后回调新的模板字符串
      callback(json);
    },
  }),
];
await hiprint.register({ plugins });
// 注册后设计器左侧元素分组出现 box 元素，拖入模板、绑定数组字段即可循环渲染 + 自动分页

以 echarts（图表）为例，元素 options 中配置 eChartsOption：

// eChartsOption 为函数字符串，签名 (options, templateData, echarts, chart) => EChartsOption
eChartsOption: `(options, templateData, echarts, chart) => {
  return {
    xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed'] },
    yAxis: { type: 'value' },
    series: [{ data: [150, 230, 224], type: 'line' }],
  };
}`,

各插件文档

版权所有

版权归属：sv-print

许可证：署名 4.0 国际 (CC-BY-4.0)