شرح: تعديل ملفات الـPDF وترقيم الصفحات باستخدام JavaScript على المتصفح!
banner
2020-09-08 , 10:07 مساءً
ThamerX’s Avatar
ThamerX

مشارك

المشاركات:103
التسجيل:Oct 2012
ThamerX
السلام عليكم ورحمة الله وبركاته،

دائمًا عندما أضيف ملف PDF إلى One Note لا يظهر لي رقم الصفحات، لذلك أردت عمل سكربت بسيط يقوم بترقيم الصفحات. واليوم سأشرح لكم كيفية التعديل على ملفات الـPDF باستخدام Java Script و مكتبة pdf-lib


مقدمة، المكتبة (pdf-lib) عمرها صغير تقريبًا وتعمل على عدة منصات منها Node, Deno, and React Native والمتصفح

لذلك سأشرح على المتصفح لأنه الأسهل تقريبًا.



أولًا، تجهيز بيئة العمل رح نستخدم codepen.io، لكن بإمكانكم تحميل المشروع وتشغيله على المتصفح وتعديله بأي محرر نصوص.

سنبدأ بإنشاء ملفين main.html و pdfrequests.js وإذا أردتم يمكنكم إنشاء ملف main.css للـStyling
بعد ذلك
نفتح الملف main.html ونضيف المكتبة واحتياجاتها
[CODE]




[/CODE]

إضافة ملف java script إلى ملف الـ main.html وراح يكون pdfrequests.js

[CODE]

[/CODE]


إضافة زر لاستدعاء دالة سنحتاجها لاحقًا وخانة للرفع الـpdf في ملف الـ main.html

[CODE]


[/CODE]

نعرف بعض احتياجات المكتبة في أعلى ملف pdfrequests.js


[CODE] const { PDFDocument, StandardFonts, rgb, degrees } = PDFLib
[/CODE]

نضع الكود الخاص لرفع ملف الـpdf داخل pdfrequests.js

[CODE]
document.getElementById('myFile').addEventListener('change',prepareFile,false);

var pdfToLoad = null
var pdfName = null

function prepareFile(event)
{
var files = event.target.files;
const reader = new FileReader();
pdfName = files[0].name;
reader.readAsDataURL(files[0]);
reader.onload = () => { pdfToLoad = reader.result };


}[/CODE]



انتهينا من تجهيز رفع الـ PDF

ثانيًا، بقي لنا أن نبدأ بإنشاء دالة modifyPdf [CODE]
async function modifyPdf()
{

}[/CODE]

والبدء في إكمال الدالة داخل pdfrequests.js لـتعديل ملفات الـ PDF

لفتح ملف الـ PDF
(داخل دالة modifyPdf)
[CODE]
const pdfDoc = await PDFDocument.load(pdfToLoad)
const pages = pdfDoc.getPages()
[/CODE]


لاختيار الخط (داخل دالة modifyPdf)

[CODE]
const fontPath = 'https://raw.githack.com/thamerx/PDF-numbering-inbrowser/master/fonts/Arslan-Wessam.ttf'
const fontBytes = await fetch(fontPath, {credentials: 'same-origin'}).then(res => res.arrayBuffer())
pdfDoc.registerFontkit(fontkit)
const customFont = await pdfDoc.embedFont(fontBytes)
[/CODE]


لترقيم الصفحات سنقوم بإنشاء for loop يمر على كل الصفحات ويضع رقمها
داخل دالة modifyPdf)

[CODE] for (i = 0; i < pages.length; i++)
{
var { width, height } = pages[i].getSize()
var pageNum = (i+1).toString()


pages[i].drawText(pageNum, {
x: 10,
y: 10,
size: 20,
font: customFont,
color: rgb(1,0,0),
rotate: degrees(0),
})

}[/CODE]


لاحظ أن، pages []i هي الصفحة التي سنأخذ منها أو ندخل بها المعلومات مثل الطول والعرض إلخ..

عندما أردنا اضافة نص استخدمنا

pages[i].drawText(text ,{x: xPos, y: yPos, size: 20, font:customFont, color: rgb(1,0,0), rotate: degrees(0)} )

أي أننا COLOR="mediumturquoise"]سنكتب[/COLOR] [/COLOR;">على [COLOR="DarkOrchid"]الصفحة i في موقع X 10 و y 10 وبحجم خط 20 و باستخدام خط customFont المعرف سابقًا وبلون أحمر ودوران صفر، وستعمل هذه الـFor Loop إلى نهاية عدد الصفحات pages.length()

لنضف بعد ذلك صفحة فارغة في آخر الملف ونكتب في الأسفل
"نستطيع كتابة الحروف العربية!"

[CODE] const newPage = pdfDoc.addPage();
newPage.drawText("نستطيع كتابة الحروف العربية!", {
x: 40,
y: 150,
size: 50,
font: customFont,
color: rgb(1,0,0),
rotate: degrees(45),
})[/CODE]

لحفظ الملف (نهاية دالة modifyPdf)

[CODE]
const pdfBytes = await pdfDoc.save();
const modifedFileName = pdfName.replace(/\.[^/.]+$/,"")+"-edited.pdf"
download(pdfBytes, modifedFileName, "application/pdf");
[/CODE]


لتجربة الدرس
هنا

لتجربة السكربت الذي عملته سابقًا
هنا
سورس


طبعًا الدرس موجه للمبدئين او المتوسطين في عالم الويب واعتبروا أن هذا مدخل!
لعالم الجافا سكربت إذا كانت أول مرة لكم.
وإذا وجد هذا الموضوع تفاعل قد أضيف في المستقبل طريقة محاذاة (النص: يمين، وسط، يسار).


وشكرًا لكم على حسن المتابعة واعذرونا إذا وجدت أخطاء.
دمتم بود:wrd:


Enlarged Image
2020-09-08 , 10:07 مساءً
2020-12-11 , 12:51 مساءً
B E T A’s Avatar
B E T A

بارز

المشاركات:1948
التسجيل:Sep 2009
B E T A
درس جميل وشرح رائح جداً
2020-12-11 , 12:51 مساءً
2020-12-12 , 12:52 صباحاً
أحمد أبوزيد’s Avatar
أحمد أبوزيد

نشيط

المشاركات:628
التسجيل:Dec 2010
أحمد أبوزيد
شكرا ونطمح بالمزيد اخي

ربي يزيدك من علمه
2020-12-12 , 12:52 صباحاً