FreeGraphPaper.net：基於瀏覽器的向量 PDF 方格紙產生器

FreeGraphPaper.net：基於瀏覽器的向量 PDF 方格紙產生器

FreeGraphPaper.net 是一款基於瀏覽器的工具，可產生可列印的向量 PDF 方格紙。它提供大量預先配置的範本，並提供自訂產生器，允許使用者調整間距、顏色與邊距，且不需要登入、註冊或會有浮水印。

技術架構：渲染的唯一真相來源

此工具的核心建立於單一純函式 buildPaper(config)，該函式會輸出幾何基元（線條、圓形與文字）。此架構確保螢幕上的 SVG 預覽、可下載的 PDF 與建置時產出的資產皆來自相同的邏輯，避免在不同輸出格式間出現重複。

渲染管線

  • SVG 預覽： renderPaperSvg() 函式將基元轉換為內嵌於預先渲染 HTML 的 SVG，讓預覽在零客戶端 JavaScript 的情況下即可呈現。
  • PDF 產生： 在瀏覽器中使用自訂設定時，工具透過動態匯入使用 jsPDF。在建置時產生的靜態 PDF，則由 Bun 腳本重用相同的基元來建立檔案。
  • PDF 精確度： 為確保格線比例正確，SVG 的 viewBox 與 PDF 均以毫米為單位定義。建議使用者以 100% 縮放列印（關閉「適合頁面」），以維持精確尺寸。
  • 社群圖片： 建置時的 OG 圖片（1200x630）與完整 A4 紙張皆由 SVG 轉 PNG，使用 @resvg/resvg-js 完成。

靜態產生與 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
uma l Bun 套件管理員與原生 TS 執行器
樣式 Tailwind CSS v4 使用設計代幣的 Scoped CSS
PDF 引擎 jsPDF 動態匯入以在瀏覽器端產生
影像渲染 @resvg/resvg-js SVG 轉 PNG

使用者體驗與社群回饋

此工具提供多種範本，包括方格、點格、等角、六邊形與 Cornell 記錄紙。支援完整的紙張尺寸清單，涵蓋美制 Letter、Legal、Tabloid 以及完整的 ISO A、B、C 系列。

社群見解

使用者回報了少數技術問題與錯誤：

"在 Safari（Mac）上，我看不到前兩個（標準的南北/東西方格）圖形。我只能看到等角與六邊形的。"

"將格線改為六邊形並確定勾選了 'snap to grid'。仍然會對齊到原本的方格。"

使用者也請求加入其他圖案，例如五邊形圖案、對數線性格線與 Smith 圖表。

摘要： FreeGraphPaper.net 是一個免費、免登入的工具，可產生符合比例的向量 PDF 方格、點格、等角與六邊形格線，支援廣泛的 ISO 與美制紙張尺寸。

標題： FreeGraphPaper.net：基於瀏覽器的向量 PDF 方格紙產生器

Sources