המטרה
חלופה self-hosted ל-DocuSign עם תמיכה מלאה בעברית. מנהל מעלה תבנית PDF, מסמן ויזואלית איפה כל שדה יושב על הדף, שולח לינק לחותם, ומקבל בחזרה PDF חתום שהעברית בו מרונדרת נכון - בלי סימני שאלה, בלי ריבועים, ובלי להוציא את המסמך לשירות חיצוני.
הפתרון
אפליקציית ווב בשני חלקים. ה-frontend ב-Vue 3 ו-Quasar מרנדר את ה-PDF עם pdfjs-dist גם למסך הצבת השדות של המנהל וגם למסך החתימה של החותם. ה-backend ב-Express שומר את התבניות, ממלא אותן עם pdf-lib ו-fontkit תוך הטמעת NotoSansHebrew כדי שעברית תיכתב כטקסט אמיתי ולא כתמונה, וצורב את תמונות החתימה מ-base64 ישירות לתוך ה-PDF במיקום שהוגדר.
עיקרי הדברים
- רנדור עברית native ב-PDFs שנוצרים בצד השרת
- הצבת שדות ויזואלית עם תיקון ציר Y אוטומטי
- לכידת חתימה touch-friendly כ-PNG
- אחסון file-system שומר על המערכת ניתנת לדיבוג
האתגר
ברירת המחדל של pdf-lib היא קידוד WinAnsi, שמפיל אותיות עבריות בשקט - בלי שגיאה, בלי אזהרה, פשוט טקסט חסר במסמך הסופי.
רישום של fontkit על כל מסמך שנוצר, והטמעה מפורשת של NotoSansHebrew-Regular.ttf. מרגע זה העברית נכתבת כטקסט אמיתי בתוך ה-PDF - ניתן לחיפוש, לבחירה ולהעתקה, ולא רסטר.
ציר ה-Y של הדפדפן גדל כלפי מטה, בעוד שנקודת המוצא של PDF היא הפינה השמאלית-התחתונה. שדה שהוצב בממשק ב-y=120 לא יושב ב-y=120 של המסמך.
המרה אחת בצד השרת - y = page.getHeight() - f.y - 12 - גורמת לקואורדינטות מהממשק להתאים למסמך. מי שבונה תבנית לא צריך לחשוב על זה בכלל, וכל שאר המוצר נשאר פשוט כי ההיפוך קורה במקום אחד.
רוב החותמים מגיעים מסמארטפון או טאבלט, ולכידת חתימה נקייה במגע היא תנאי סף - חתימה מרוססת או חתוכה שוברת את האמון במסמך.
ה-frontend לוכד את החתימה כ-data:image/png;base64. השרת מפצל את המחרוזת, מפענח עם Buffer.from(..., 'base64'), ואז embedPng ו-drawImage בקואורדינטות של השדה - כך שהחתימה נוחתת בדיוק במקום שסומן.
מה נמסר
- Frontend ב-Vue 3 ו-Quasar (UploadTemplate.vue, SignForm.vue, PdfSigner.vue)
- Backend ב-Express (index.js) עם CRUD לתבניות ונקודת קצה /api/forms/:id/fill
- Pipeline להטמעת גופן עברי - fontkit יחד עם NotoSansHebrew TTF
- start.bat להרצה מקומית בלחיצה אחת
- סכמת JSON לשדות (type, x, y) לכל תבנית
תוצאות
text + signature
סוגי שדות
Hebrew + Latin
שפות
Self-hosted
ארכיטקטורה
מה זה לימד אותי
- לכל מוצר PDF שמכוון לעברית, fontkit יחד עם קובץ TTF עברי אמיתי אינם אופציונליים - בלעדיהם הטקסט נעלם בלי להתריע
- היפוך ציר ה-Y פעם אחת בצד השרת שומר על כל שאר המוצר פשוט, במקום לפזר תיקוני קואורדינטות בכל מסך
- אחסון תבניות במערכת הקבצים במקום במסד נתונים שומר על האפליקציה ניתנת לאבחון - אפשר לפתוח את הקובץ ולראות מה קרה