【Web开发】不用服务器不用数据库，一个浏览器就能跑的打印设计器

当前位置：点晴教程→知识管理交流 →『技术文档交流』

admin

2026年8月26日 14:52 本文热度 136

最近在弄一个仓储类的项目，客户那边要打快递面单、出库单，还得带条码、二维码，你说这活以前怎么干？找个前端写个死模板，或者套个报表控件，客户改一次布局就得改半天代码，改到最后自己都烦。

后来翻到一个开源项目OpenPrint，用下来是真省事，今天带大家看看它到底能干嘛。

✨一、OpenPrint 到底是什么？

一句话：开源的 Web 打印模板可视化设计器，快递面单、发票、标签、报表，全部靠拖拽就能设计，还带 AI 一句话生成模板，号称 3 分钟对接 ERP。

最爽的一点是纯前端架构—— 不用服务器、不用数据库，浏览器打开就能跑。我们经常要去客户现场做演示，拷个静态文件就能跑起来，这点太友好了。

它能干的活挺全：

模板设计：文本、图片、矩形、圆形、线条、条码、二维码、表格、富文本、图表，10 种控件随便拖，所见即所得
AI 生成：直接打字说 "帮我生成一张快递面单，含收件人、寄件人和运单号条码"，它自动建模板、排好控件、加上条码，一键就能用
多格式导出：PDF、JPG、SVG、HTML 随便导
多页设计：每页独立页眉页脚，页间距可调
数据绑定：支持 JSON / CSV / API 数据源，用 Mustache 表达式绑字段

还有一个我觉得特别值的设计 ——框架无关。它把引擎层和 UI 层完全解耦了：

引擎层（@openprint/engine）是纯 TypeScript，零框架依赖
官方设计器用 Vue 3 + Naive UI 做的
你项目是 React、Vue、Angular 还是原生 JS，都能接进来

换句话说，不管你现在用什么技术栈，这套引擎都能用，不用为了它迁框架。

🚀二、它用了哪些技术？

说几个我比较看重的点：

1. 引擎 / UI 分层架构

排版引擎、渲染引擎、导出引擎全是纯 TypeScript 写的，核心零依赖。官方设计器是 Vue 3 + Naive UI + Fabric.js，但引擎这套是独立存在的，谁都能调。

2. 一套完整的打印体系

Web 直接打印：浏览器调系统打印对话框，免装驱动
C++ Qt 桌面客户端：静默打印，零弹窗，支持 CSV/JSON 批量打印，Windows / Linux /macOS 都能跑
云打印：多门店远程打印，模板统一管理，有打印队列、断线自动重试、权限管控、日志审计

对我们这种要对接现场设备的，静默打印真的很香，不用每次打一张弹一个对话框。

3. ERP 对接够简单

标准 HTTP API，设计器里拖出模板导出 .json，ERP 那边推数据 + 模板 ID 就触发打印了，不用写一堆对接代码。

4. 部署是真省事

构建产物是纯静态文件，Nginx / Vercel / Netlify 随便丢，还能 Docker 一键起。Node 要求 22.18 以上，pnpm 9.x。

光说不练假把式，看看怎么用：

npm i openprint26

Vue 3 项目里，几行就接上：

import { createApp } from 'vue'import OpenPrint from 'openprint26'import 'openprint26/dist/style.css' const app = createApp(App)app.use(OpenPrint)app.mount('#app')

<template>  <OpenPrintDesigner /></template>

React 或者原生 JS 项目，直接调引擎 SDK，零依赖：

import { renderTemplate, exportPDF } from 'openprint26/sdk' // 渲染模板为 HTML，直接塞进页面const html = renderTemplate(templateJson, {  sender_name: '张三',  receiver_name: '李四',  tracking_no: 'SF1234567890',})document.getElementById('print-area').innerHTML = html // 导出 PDFconst pdfBlob = await exportPDF(templateJson, data)