@zplkit/preview
The <zpl-preview> element, its events and configure().
import "@zplkit/preview";
import { configure } from "@zplkit/preview";Preview shows how to use it in each framework.
<zpl-preview>
| Attribute or property | Type | Default | Description |
|---|---|---|---|
zpl | string, or anything with toZPL() | The ZPL to show. Only the property takes a Label. | |
width, height | number | ^PW and ^LL, else 4 × 6 in | Label size in millimeters |
dpmm | number | 8 | Dots per millimeter: 6, 8, 12 or 24 |
smoothing | number | 0.4 | Edge smoothing, from 0 (the printer's exact dots) to 1 (fully anti-aliased) |
max-labels, maxLabels | number | 20 | Labels to show; past that, a line says how many more there are |
fade | boolean | false | Fade labels in when they first appear, over --zpl-fade-duration (200 ms) |
The images are styled with ::part(label), their container with ::part(labels) and the error message with ::part(error). Each image is in a ::part(item), with copies printed with ^PQ marked in ::part(copies), and the line about more labels is ::part(more).
Events
zpl-render-start
| Property | Type | Description |
|---|---|---|
zpl | string |
zpl-render
| Property | Type | Description |
|---|---|---|
images | string[] | |
copies | number[] | How many times each label prints in a row, from ^PQ |
labels? | number | Different labels and labels printed in all, with the default renderer.
More than |
printed? | number | |
width | number | Label width and height in millimeters |
height | number | |
dpmm | number | |
duration | number | Milliseconds from the start of the render to the images |
zpl-error
| Property | Type | Description |
|---|---|---|
error | Error |
configure
configure(options: ConfigureOptions): voidChanges how every preview on the page renders.
| Property | Type | Default | Description |
|---|---|---|---|
render? | Render | renderZpl from | Use your own renderer, for example one that calls an API |
A renderer is a function (zpl, options) => Promise<string[]> that returns one base64-encoded PNG per label. It's called with:
| Property | Type | Description |
|---|---|---|
widthMm | number | Label width in millimeters |
heightMm | number | Label height in millimeters |
dpmm | number | Dots per millimeter: 6, 8, 12 or 24 |
grayscale | boolean | Anti-aliased 8-bit output instead of the printer's 1-bit dots |
fonts? | Record<string, Uint8Array<ArrayBufferLike>> | Fonts already on the printer, by path like "E:ARIAL.TTF" |
font0? | Uint8Array<ArrayBufferLike> | A font file to draw font 0 with instead of the open-licensed stand-in |
limit? | number | Render only the first labels; a renderer may render all of them |
React
import "@zplkit/preview/react" registers the element and adds its props to React's JSX types, including onzpl-render-start, onzpl-render and onzpl-error. Its props type is exported as ZplPreviewProps.