「格纸生成器」：一个纯前端的自定义打印纸工具，源码开源下载

这篇文章配套的源码可以免费下载。如果你也有「想找一张合适的纸却找不到」的经历，希望它对你有用。 下载链接：【在下方】 在线演示：【格纸生成器】

起因：一张田字格纸

事情很小。我需要一张田字格纸给孩子练字，网上搜了一圈，找到的模板有很多，要么是某个网盘的加密压缩包，要么是打着「免费」旗号要关注公众号再回复关键词的，也有一些网站和小程序什么的。

下载的现成 PDF 没法改。想要 A3 横向，它只有 A4 纵向；想把边距调宽一点留出装订位，办不到。

后来我一想：这东西的本质无非就是画一堆线和格子，PDF 又不是什么高深格式。既然找不到合适的，那就自己写一个生成器好了——反正闲着也是闲着，用 Cloudflare Pages 免费部署，以后自己用也方便。

于是就有了这个东西——格纸生成器。

它能做什么

一句话：给它参数，它还你一张能直接送进打印机的纸。

41 种纸型

分类	包含
通用笔记	横线纸、竖线纸、方格纸、点阵纸、空白纸、书法纸、康奈尔笔记、等距网格、六边形网格、法式田字格、分镜纸
乐谱	五线谱、吉他六线谱、五线谱 + TAB 综合谱
中文作业纸	汉语拼音作业纸、拼音田字格、作文纸、算术纸、英语作业纸、练习纸
书法练习纸	书法练字格、米字格、回宫格、九宫格、中国田字格、回米格、硬笔书法纸、交叉格、硬笔回宫格
效率模板	复古笔记纸、儿童涂鸦纸、简约手账纸、学生笔记纸、会议笔记纸、项目规划纸、草图纸、创意记录纸、品牌定制纸、错题整理、语文预习卡、汉英互译单词练习纸

每一项都能改

• 10 种纸张尺寸（A4 / A5 / B5 / Letter / Legal / A3…）加自定义宽高，横竖方向随意
• 单栏 / 双栏，双栏还能调栏间距
• 15 套配色主题，线条颜色、实线 / 虚线 / 点线、粗细、透明度全部可调
• 背景色 + 6 种纸质纹理，还能上传自己的背景图
• 书法框叠加、水印（单个或整版平铺，中英文都行）、页码、多页导出
• 导出三种格式：矢量 PDF、高清 PNG（可选 DPI）、矢量 SVG
• 参数可以存成 JSON 模板导出备份，下次导入接着用

三个我想单独说的技术点

这部分写给对实现感兴趣的朋友。

一、PDF 是真的矢量，不是截图

这是我最在意的一点。很多同类的在线工具，导出 PDF 的做法是：把渲染好的页面截图，再塞进 PDF 里。屏幕上看着正常，一打印就露馅——线条发虚、边缘发灰有锯齿。

格纸生成器的 PDF 是按 PDF 规范一个字节一个字节手写的。所有线条、圆（点阵纸的点）、文本都以矢量指令写进内容流，是数学曲线而不是像素。

代价：我得自己实现 PDF 的对象表、交叉引用表（xref）、资源字典、内容流、坐标系变换、虚线、透明度（ExtGState）这一整套东西。收益很直接：

纸型	A4 单页 PDF 体积
横线纸	1.9 KB
方格纸	2.0 KB
米字格	13.9 KB

放大到 400% 打印依然锐利。

二、中间层设计：41 种纸 × 3 种导出 = 只写 41 份

如果每种纸张都给 SVG、PNG、PDF 各写一遍绘制代码，那就是 123 份，这个项目必然烂成一团面条。

这里的做法是加一层 IR（中间表示）：每种纸张的绘制逻辑只写一次，产出一堆绘图原语（line / rect / circle / path / text），然后三个渲染器消费同一份原语。

好处不只是省事：

• 新增第 42 种纸，三种导出格式自动全部支持
• 预览看到的和导出的，必然一模一样（同一份数据源）
• PNG 导出走的也是「SVG → 光栅化」，所以三种格式视觉完全统一

三、零依赖、零构建、离线可用

整个站：

• 没有 npm、没有 webpack、没有打包步骤
• 没有引用任何 CDN 上的第三方库，连字体都是系统的
• 打开就是一个 index.html + 传统 <script> 标签

这意味着什么？

• 不会失效。不用担心某个 CDN 挂掉、某个 npm 包作者删库
• 可以离线。把整个文件夹存到本地，双击 index.html 就能用，断网照样导出 PDF（已实测）
• 能长期保存。十年后打开依然跑得起来
• 改起来简单。想改配色就改 CSS，想加纸型就加一个函数，改完刷新页面立即可见

关于隐私：它天生就没法偷数据

这句话不是宣传语，是架构决定的。

这个工具没有后端。你在页面上调的每一个参数、上传的每一张背景图、生成的每一个 PDF，全程都在你自己的浏览器里完成。生成 PDF 时不发一个网络请求——你可以按 F12 打开 Network 面板自己验证：点「导出 PDF」的瞬间，请求数是 0。

没有账号系统，没有统计脚本，没有广告代码，整页不加载任何第三方域名。

唯一会留在本地的是一组参数偏好（存在 localStorage），随时可以清掉。

怎么用

最省事的用法：打开在线地址直接用，不用装任何东西。我自己那份就部署在 Cloudflare Pages 上，免费额度对这个纯静态站来说绰绰有余。【演示地址】

想自己部署：整个项目是纯静态文件，总共不到 500KB。扔到 Cloudflare Pages、GitHub Pages、Vercel、或者你自己的 Nginx 上都行，几秒钟的事。

想离线自用：下载源码解压，双击里面的 index.html，完事。手机上想用也可以把文件夹丢进网盘同步。

想二次开发？项目结构一览

零构建的项目有个好处：改完刷新就能看到效果，不需要懂工程化。

├── index.html                 主生成器页面
├── guide / about / privacy / terms.html   四个静态页
├── assets/
│   ├── css/style.css          全站样式（改配色改这里）
│   ├── js/
│   │   ├── app.js             UI 双向绑定
│   │   ├── core/
│   │   │   ├── units.js       单位换算（mm / px / pt）
│   │   │   ├── ir.js          【核心】绘图中间表示规范
│   │   │   ├── presets.js     41 种纸 / 主题 / 尺寸注册表
│   │   │   └── state.js       配置树 + 本地存档 + 模板导入导出
│   │   ├── render/
│   │   │   ├── composer.js    把各图层合成一页
│   │   │   ├── patterns/      41 种纸张的绘制逻辑（改纸型看这里）
│   │   │   └── renderers/     svg.js / pdf.js 两个渲染器
│   │   └── export/exporters.js  三种格式的导出
│   └── img/                   logo、二维码、favicon

想加一种新纸型？ 两步：

1. 在 presets.js 的 PATTERNS 数组里加一条（id、名称、分类、推荐间距）
2. 在 patterns/ 目录下写 PM.patterns.<id> = function(ctx){ return [ /* IR 原语 */ ]; }

不需要碰任何导出代码——三种格式会自动支持。

几句必须说清楚的话

这个项目的纸型取自常见的打印纸样式（米字格、田字格、康奈尔笔记这些都是公共领域里通行几十年的排版格式），全部绘制代码、PDF 生成器、界面均为从零编写，没有使用任何第三方闭源资源。

它是我为了自己用而写的工具，顺手整理出来分享。有任何 bug、想要的纸型、或者哪里的格子比例你觉得不对，都欢迎反馈——工具类的东西，只有被真正用过才知道哪里别扭。

最后

如果你常年需要打印某种特定的纸——不管是给学生出算术练习、给团队做会议记录模板、还是自己练字——花两分钟排一张，往后几年都省事。

源码免费下载——不用关注公众号，不用转存网盘，压缩包不设密码。开头让我头疼的那几件事，我不想再让它发生在别人身上。

祝打印愉快。