I'm building a drag-and-drop, resizable report designer (hospital bills, cheques, A4/A5) using react-moveable in React.
The editor canvas uses px for positions/sizes (e.g. A4 ≈ 827×1169 px at what I assume is 96 dpi).
Elements are positioned with absolute left/top/width/height in px.
When I generate PDF (using jsPDF + autotable or html2pdf.js) or print directly, the output is often off by 2–5 mm on real printers (especially cheques need high precision for payee/amount fields).
Questions:
- Is there a reliable way to keep internal units in px but guarantee print accuracy across printers?
- Should I force 96 dpi in jsPDF? (e.g. format: [210, 297], unit: 'mm' but convert all px → mm first?)
- Any best practices for snapping in react-moveable to simulate mm grid (e.g. snapGrid to ~3.78 px for 1 mm)?
- Has anyone solved similar "px editor → real paper mm" mismatch in invoice/report builders?
Current helpers I'm using:
const PX_PER_MM = 96 / 25.4; // ≈3.7795
But even with this, printed output shifts slightly.
Any tips / libraries / conversion tricks appreciated!
I'm building a drag-and-drop, resizable report designer (hospital bills, cheques, A4/A5) using react-moveable in React.
The editor canvas uses px for positions/sizes (e.g. A4 ≈ 827×1169 px at what I assume is 96 dpi).
Elements are positioned with absolute left/top/width/height in px.
When I generate PDF (using jsPDF + autotable or html2pdf.js) or print directly, the output is often off by 2–5 mm on real printers (especially cheques need high precision for payee/amount fields).
Questions:
Current helpers I'm using:
const PX_PER_MM = 96 / 25.4; // ≈3.7795
But even with this, printed output shifts slightly.
Any tips / libraries / conversion tricks appreciated!