How do I run the "Demo pick list" demo?

Install and launch Web Print Expert, then click Run print or Preview PDF on this page. The "Demo pick list" demo runs the sample code with web-print-pdf over the local WebSocket service.

Do I need a local Vue or React project for this demo?

No. This page bundles web-print-pdf and editable sample code—you can run it directly in the browser.

Is the data in the "Demo pick list" demo real?

No. All layouts, amounts, and names are fictional demo data for API illustration only.

Live demos

.demo-compat-banner--noscript { display: block !important; }

06 - Demo pick list

Fixed-width table demo for ERP/WMS-style lists (fictional data).

Demo pick list: Fixed-width table demo for ERP/WMS-style lists (fictional data). Run in the browser with Web Print Expert (fictional demo data).

Sample code

const orderTableHtml = `<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>演示拣货清单</title>
  <style>
    html, body { margin: 0; padding: 0; }
    .pick-list {
      font-family: "Microsoft YaHei", sans-serif;
      padding: 16px;
      box-sizing: border-box;
    }
    .pick-list-demo-tag {
      margin: 0 0 6px;
      font-size: 11px;
      color: #a0aec0;
    }
    .pick-list-title {
      margin: 0 0 4px;
      font-size: 18px;
    }
    .pick-list-subtitle {
      margin: 0 0 12px;
      color: #718096;
      font-size: 12px;
    }
    .pick-list-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 12px;
    }
    .pick-list-table th,
    .pick-list-table td {
      border: 1px solid #cbd5e0;
      padding: 6px;
    }
    .pick-list-table thead tr { background: #edf2f7; }
    .pick-list-table tbody td { border-color: #e2e8f0; }
  </style>
</head>
<body>
  <div class="pick-list">
    <p class="pick-list-demo-tag">DEMO ONLY · 虚构仓储数据</p>
    <h2 class="pick-list-title">演示拣货清单 WP-PICK-20260624</h2>
    <p class="pick-list-subtitle">演示仓：钱塘仓储中心 · 经办人：王晓明（虚构）</p>
    <table class="pick-list-table">
      <thead>
        <tr>
          <th>行号</th>
          <th>物料编码</th>
// …

Static excerpt below; enable JavaScript on this page for the full runnable sample.

Back to all demos

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.

06 - Demo pick list

Fixed-width table demo for ERP/WMS-style lists (fictional data).

Sample code

const orderTableHtml = `<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>演示拣货清单</title>
  <style>
    html, body { margin: 0; padding: 0; }
    .pick-list {
      font-family: "Microsoft YaHei", sans-serif;
      padding: 16px;
      box-sizing: border-box;
    }
    .pick-list-demo-tag {
      margin: 0 0 6px;
      font-size: 11px;
      color: #a0aec0;
    }
    .pick-list-title {
      margin: 0 0 4px;
      font-size: 18px;
    }
    .pick-list-subtitle {
      margin: 0 0 12px;
      color: #718096;
      font-size: 12px;
    }
    .pick-list-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 12px;
    }
    .pick-list-table th,
    .pick-list-table td {
      border: 1px solid #cbd5e0;
      padding: 6px;
    }
    .pick-list-table thead tr { background: #edf2f7; }
    .pick-list-table tbody td { border-color: #e2e8f0; }
  </style>
</head>
<body>
  <div class="pick-list">
    <p class="pick-list-demo-tag">DEMO ONLY · 虚构仓储数据</p>
    <h2 class="pick-list-title">演示拣货清单 WP-PICK-20260624</h2>
    <p class="pick-list-subtitle">演示仓：钱塘仓储中心 · 经办人：王晓明（虚构）</p>
    <table class="pick-list-table">
      <thead>
        <tr>
          <th>行号</th>
          <th>物料编码</th>
// …

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.

Download client free View npm package

06 - Demo pick list

Layout preview

Sample code

Result