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.

21 - Preview only

action: "preview" generates PDF only. Open printPreviewUrl in a new tab or iframe (call from a user click to avoid popup blockers).

Sample code

const res = await webPrintPdf.printHtml(html, { paperFormat: 'A4' }, { paperFormat: 'A4' }, {
  action: 'preview',
  requestTimeout: 15
});

const previewUrl = res.data.printPreviewUrl;
if (!previewUrl) throw new Error('未返回预览地址');

// 展示方式由业务决定(请在「用户点击」回调里调用,避免 window.open 被拦截):

// 方式 A:新标签页打开 PDF(勿在 window.open 返回 null 后再 a.click,否则会开两个窗口)
window.open(previewUrl, '_blank', 'noopener,noreferrer');

// 方式 B:当前页 iframe 内嵌
// document.getElementById('pdf-preview').src = previewUrl;

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