יצירת PDF באתר אינטרנט
יכולה להיות דבר פשוט מאוד – אם אנחנו מייצרים ישירות מהדפדפן, עם ספריית JS כלשהיא.
אבל ברגע שרוצים לייצר משהו איכותי, של עשרות או מאות עמודי תוכן, עם עיצוב, מספרי עמודים, תוכן עניינים, כותרת עליונה, תחתונה וכדומה – כאן כבר צריך כלי אחר.
אני כבר כמה שנים משתמש בכלי צד שרת שנקרא wkhtmltopdf.
ההתקנה על windows קלה ביותר.
ההתקנה על linux , עם עברית – עשויה להיות מורכבת, ולא פשוטה כלל.
אחרי שהכלי מותקן על השרת ועובד, השימוש בו מאוד פשוט, זהו למעשה דפדפן שרת פקודה, שמאפשר להדפיס כל עמוד html, לקובץ PDF, עם יכולות עימוד טובות.
כמובן , שצריך לבצע התאמות CSS וכו',
בפוסט הזה אראה 2 יכולות שלו בנוגע למעבר עמוד, ובנוגע למיספור:
מעברי עמוד ב- wkhtmltopdf
- יש אנשים שפשוט ידאגו שכל העמודים יהיו בגודל של A4, וגם זו שיטה.
- אני פחות אוהב, ולכן אני מגדיר 3 קלאסים של CSS ומשתמש בהם לפי הצורך.
- אין צורך לשים את זה ב-media של print, כי זה פשוט לא יעבוד.
.keep-together { page-break-inside: avoid; } .break-before { page-break-before: always; } .break-after { page-break-after: always; }
מספרי עמודים ב-wkhtmltopdf
- אני מדגים את מספרי העמודים בהנחה שיש לכם עמוד \ route נפרד עבור ה- footer
- אבל…זה אפשרי כמובן לשלב בעמוד של ה-content העיקרי.
- הרעיון פשוט – מגדירים פונקצית JS שמעבירה את העמודים
- בתגית ה- body – נפעיל אותה
- ואז במקום שנרצה נשים את הערכים הרלוונטים עבור עמוד…מתוך….
<script> function subst() { var vars = {}; var query_strings_from_url = document.location.search.substring(1).split('&'); for (var query_string in query_strings_from_url) { if (query_strings_from_url.hasOwnProperty(query_string)) { var temp_var = query_strings_from_url[query_string].split('=', 2); vars[temp_var[0]] = decodeURI(temp_var[1]); } } var css_selector_classes = ['page', 'frompage', 'topage', 'webpage', 'section', 'subsection', 'date', 'isodate', 'time', 'title', 'doctitle', 'sitepage', 'sitepages']; for (var css_class in css_selector_classes) { if (css_selector_classes.hasOwnProperty(css_class)) { var element = document.getElementsByClassName(css_selector_classes[css_class]); for (var j = 0; j < element.length; ++j) { element[j].textContent = vars[css_selector_classes[css_class]]; } } } } </script>
<body onload="subst()">
עמוד <span class="page"></span> מתוך <span class="topage"></span>
