PDF 渲染 pdf
约 733 字大约 2 分钟
...
2026-09-28
插件说明
@sv-print/plugin-ele-pdf 基于 pdfjs 动态渲染 PDF 的打印元素插件：支持 url / 裸 base64 / dataURL 数据源，横向/纵向排列、水平/垂直间隙、缩放、页码范围、流式分页、文字叠加层与三层 LRU 缓存。
第三方依赖：pdfjs-dist。
npm install @sv-print/plugin-ele-pdf示例代码
import pluginElePdf from '@sv-print/plugin-ele-pdf';
const plugins = [
pluginElePdf({
// 可选：注入外部已加载的 pdfjs 库（减小打包体积）
pdfjsLib: window.pdfjsLib,
// 可选：自定义 pdf.worker 地址（默认用内置 worker）
workerSrc: 'https://cdn.example.com/pdf.worker.min.mjs',
// 可选：调整三层缓存容量
cacheSize: {
bytes: 10, // PDF 字节缓存份数（默认 10）
docs: 5, // 已加载文档缓存份数（默认 5）
pages: 100, // 页面图片缓存份数（默认 100）
},
// 可选：启用 Cache API 持久化缓存（url 数据源生效，跨会话复用）
persistentCache: true,
}),
];
await hiprint.register({ plugins }); // 须在创建模板/打开设计器之前高级用法
元素参数
| 参数 | 说明 | 默认值 |
|---|---|---|
pdfUrl | 数据源：url / 裸 base64 / dataURL | - |
pdfDirection | 排列方向：空为垂直，horizontal 为水平 | 空 |
pdfGapV / pdfGapH | 页面垂直 / 水平间隙（pt） | 0 |
pdfScale | 页面宽度占元素宽度百分比（%） | 100 |
pdfPageRange | 页码范围，如 1,3,5-8（空为全部页） | 空 |
pdfMode | 分页方式：1 整体不分页，2 逐页分页 | 空（自动流式分页） |
pdfOverlays | 叠加层 JSON | 空 |
pdfImageType | 页面图片格式：jpeg / png | jpeg |
pdfImageQuality | 页面图片质量（0-100） | 92 |
pdfPreviewPages | 设计器内预览页数 | 3 |
叠加层（pdfOverlays）
在 PDF 页面指定位置叠加文字，支持 #{field} 打印数据占位符与 #{pdfMeta.xxx} 元数据占位符：
pdfOverlays: '[
{
"page": 1, // 作用页码：数字或 "all"（缺省为全部页）
"left": 10, // 相对 PDF 页左侧偏移（pt）
"top": 10, // 相对 PDF 页顶部偏移（pt）
"width": 120, // 覆盖区域宽度（pt），可选
"content": "#{name} 的发票 共#{pdfMeta.numPages}页"
}
]'支持的样式字段：fontSize、color、align（left/center/right）、fontWeight、fontStyle、textDecoration（line-through/underline）、rotate（deg，绕元素中心）、textOverflow（ellipsis，自动补 nowrap + hidden）、lineHeight、letterSpacing、backgroundColor、zIndex、overflow、whiteSpace。
缓存
内置三层 LRU 缓存（PDF 字节 → 文档对象 → 页面图片），同一 PDF 修改缩放/间隙等参数后无需重新下载与解析；启用 persistentCache 后字节级缓存通过 Cache API 持久化到浏览器。
注意事项
- 配置面板键是
ele-pdf：hiprint.setConfig({ "ele-pdf": ... })，不是 "pdf"
版权所有
版权归属：sv-print