FreeGraphPaper.net：基于浏览器的矢量 PDF 方格纸生成器

FreeGraphPaper.net：基于浏览器的矢量 PDF 方格纸生成器

FreeGraphPaper.net 是一个基于浏览器的工具，可生成可直接打印的矢量 PDF 方格纸。它提供了大量预设模板，并提供自定义生成器，允许用户在无需登录、注册或添加水印的情况下调整间距、颜色和边距。

技术架构：渲染的唯一真相来源

该工具的核心建立在一个纯函数 buildPaper(config) 上，它会输出几何原语（线、圆和文字）。这种架构确保屏幕上的 SVG 预览、可下载的 PDF 以及构建时的资产全部来源于同一套逻辑，消除了不同输出格式之间的重复。

渲染管线

  • SVG 预览： renderPaperSvg() 函数将原语转换为内联 SVG，嵌入预渲染的 HTML 中。这使得预览在零客户端 JavaScript 的情况下即可渲染。
  • PDF 生成： 对于浏览器中的自定义配置，工具通过动态导入使用 jsPDF。对于构建时生成的静态 PDF，Bun 脚本复用相同的原语来创建文件。
  • PDF 精度： 为确保网格比例准确，SVG 的 viewBox 和 PDF 都使用毫米为单位。建议用户以 100% 缩放打印（关闭“适合页面”），以保持精确尺寸。
  • 社交图片： 构建时的 OG 图片（1200x630）和完整的 A4 纸张通过 @resvg/resvg-js 将 SVG 转为 PNG 生成。

静态生成与 pSEO 策略

站点完全静态，部署到 Cloudflare Pages，作为普通文件，无需后端或数据库。

生成规模

  • 页面数量： 大约 1,900 个页面在构建时预渲染为 HTML，约 1,700 个 PDF 在构建时预生成。
  • 数据驱动的 pSEO： 站点基于单一数据表为约 40 种样式生成页面，覆盖完整的 ISO A/B/C 系列和美制/英制纸张尺寸。包括用于 WebSite、HowTo、FAQ 和 Breadcrumb 架构的 JSON‑LD，以优化搜索引擎。
  • 薄内容管理： 对需求低的尺寸组合使用选择性的 noindex 标签，防止薄内容稀释 SEO 排名。

技术栈

组件 技术 技术
框架 Nuxt 4 / Vue 3 TypeScript, script setup
静态生成 Nitro (nuxt generate) Cloudflare Pages
运行时 Bun 包管理器和原生 TS 运行器
样式 Tailwind CSS v4 带设计令牌的 Scoped CSS
PDF 引擎 jsPDF 浏览器端动态导入生成
图片渲染 @resvg/resvg-js SVG 转 PNG 转换

用户体验与社区反馈

该工具提供多种模板，包括方格、点阵、等距、六边形以及 Cornell 笔记纸。它支持包括 US Letter、Legal、Tabloid 在内的完整美制纸张尺寸，以及完整的 ISO A、B、C 系列。

社区洞察

用户报告了一些技术问题和 bug：

"在 Safari（Mac）上，我在前两个（标准的南北/东西方网格）看不到任何网格。我只能看到等距和六边形的。"

"将网格改为六边形并确保勾选了‘snap to grid’。仍然会对齐到原来的方格网格。"

用户还请求添加更多图案，例如五边形图案、对数线性网格和 Smith 图表。

Sources