在线样例
左侧浏览样例目录，右侧查看版式预览与示例代码；点击运行即可通过 web-print-pdf 驱动本地客户端完成静默打印或 PDF 预览。使用前请先 安装并启动客户端。
客户端
若打印或预览效果与预期不符，请务必先从官网下载并安装最新版 Web打印专家客户端后再试（旧版本可能导致版式偏差）。
版式说明
版式预览与打印输出完全遵循 HTML/CSS 标准样式，没有隐藏的渲染技巧：样式写成什么样，页面就长成什么样。
09 - 演示门诊处方笺（A4）
医院门诊处方笺版式：A4 纵向。横线仅加在需填写的字段值上（.u 下划线），已打印的金额、地址、自付/总计等纯文字不加线；签章栏、备注留空线。页脚 margin-top:auto 贴底。
版式预览
示例代码
const prescriptionHtml = `<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
/* 去掉默认边距；整页 flex + min-height 使页脚贴底 */
html, body { margin: 0; padding: 0; }
.rx-sheet {
width: 210mm;
min-height: 297mm;
box-sizing: border-box;
padding: 8mm 10mm 6mm;
font-family: SimSun, "Microsoft YaHei", serif;
font-size: 10pt;
line-height: 1.35;
color: #000;
display: flex;
flex-direction: column;
position: relative;
}
.rx-badge {
position: absolute;
top: 8mm;
right: 10mm;
border: 1px solid #000;
padding: 0 6px;
font-size: 9pt;
line-height: 1.5;
}
.rx-title { text-align: center; margin: 0 0 5mm; }
.rx-title h1 { margin: 0; font-size: 18pt; font-weight: bold; letter-spacing: 3px; }
.rx-title h2 { margin: 3px 0 0; font-size: 14pt; font-weight: normal; letter-spacing: 8px; }
/* 仅 .u 包裹的填写位加下划线；纯展示文字（金额、地址、自付/总计等）不加线 */
.u {
display: inline-block;
border-bottom: 1px solid #000;
vertical-align: bottom;
line-height: 1.25;
padding: 0 1mm 0.5px;
}
.rx-meta { padding-bottom: 3mm; margin-bottom: 1mm; border-bottom: 1px solid #000; }
.rx-line {
display: flex;
flex-wrap: wrap;
align-items: baseline;
margin-bottom: 2.5mm;
gap: 2mm 6mm;
}
.rx-line:last-child { margin-bottom: 0; }
.rx-line .grow { flex: 1; min-width: 30mm; }
// …运行结果
- 样例优先加载本站内置
web-print-pdf，与 npm 包 API 一致；失败时回退 CDN。 - 客户端内置「运行示例」页（
vueApp/.../examples/index.vue）提供更多可编辑 demo，与本页样例互补。 - 工具类样例（连接检测、打印机列表等）仅返回 JSON，不触发打印。