Live demos

Enable JavaScript to use the live demos.

Your browser is too old for this page. Please use the latest Chrome, Edge, Firefox, or Safari.

Browse the sample list on the left and preview layouts plus sample code on the right. Run a demo to print silently or preview PDF via web-print-pdf and the local client. Install and launch the client first.

Client

If results look wrong, install the latest Web Print Expert client from our site first (older builds may cause layout drift).

Layout

Preview and print follow standard HTML/CSS only—no hidden tricks. What you style is what you get.

09 - Demo outpatient prescription (A4)

Outpatient prescription on A4. Underlines (.u) only on fill-in value slots; filled amounts/addresses stay plain text; signature and remark fields keep blank lines. Footer sticks to bottom.

Sample code

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; }
// …

Result

  • Demos load bundled web-print-pdf first (same API as npm); CDN is used as fallback.
  • The client’s built-in Run examples page has more editable demos; this page complements it.
  • Utility demos (connection, printer list) return JSON only—no print job.

Related: Vue silent printing · Remote print setup · Print options guide · Error handling guide · Documentation

Download client free View npm package