قم بإنشاء ملفات PDF بسهولة باستخدام مكتبة React هذه وبعض التعليمات البرمجية البسيطة.
React هي مكتبة JavaScript شائعة لبناء واجهات المستخدم. من الممكن إنشاء ملفات PDF من مكونات React باستخدام مكتبة React-pdf.
هنا سوف تتعلم كيفية إنشاء مستندات PDF باستخدام مكونات React باستخدام رد فعل pdf.
ما هو React-pdf؟
React-pdf هي مكتبة تسمح لك بإنشاء ملفات مستندات PDF من مكونات React. يوفر مجموعة من المكونات التي يمكنك استخدامها لبناء مستند PDF الخاص بك ويستخدم DOM الظاهري لتقديم المكونات إلى PDF.
تثبيت React-pdf
لتثبيت رد فعل pdf باستخدام مدير حزمة العقدة ، قم بتشغيل الأمر الطرفي التالي في دليل مشروعك:
npm install @ reaction-pdf / renderer - حفظلتثبيته مع مدير حزمة الغزل بدلاً من ذلك ، قم بتشغيل هذا الأمر:
إضافة الغزل @ رد فعل pdf / عارض
إنشاء وثيقة PDF
لإنشاء مستند PDF ، ستستخدم مكونات المستند والصفحة والنص الخاص بـ React-pdf. ال وثيقة المكون مسؤول عن إنشاء مستند PDF جديد وتقديم محتواه. ال صفحة يقوم المكون بإنشاء صفحة جديدة داخل مستند PDF ويعرض محتواها. وأخيرا، فإن نص يعرض المكون النصوص داخل مستند PDF.
فيما يلي مثال على كيفية إنشاء مستند PDF باستخدام المكونات الثلاثة جميعها:
يستورد تتفاعل من'تتفاعل';
يستورد {مستند ، نص ، صفحة} من"@ رد فعل- pdf / عارض";مقدار ثابت MyDocument = () => (
مرحبا هناك </Text>
</Page>
</Document>
);
يصدّرتقصير ملفاتي؛
في هذا المثال ، تقوم بإنشاء مستند PDF بصفحة واحدة تحتوي على سطر واحد من النص ، "مرحبًا بكم." بعد إنشاء مستند PDF ، يجب عليك عرضه في تطبيق React الخاص بك.
لتقديم مستند PDF في التطبيق الخاص بك ، استخدم ملف برنامج PDFViewer المكون الذي يقوم بإنشاء مستند PDF.
قم باستيراد ملف برنامج PDFViewer المكون وقم بلف المستند فيه:
يستورد تتفاعل من"تتفاعل"
يستورد {PDFViewer} من"@ رد فعل- pdf / عارض";
يستورد ملفاتي من"./ملفاتي";وظيفةبرنامج() {
يعود (
</PDFViewer>
)
}
يصدّرتقصير برنامج
عند تقديم طلبك ، سيبدو مثل هذا:
إضافة أنماط إلى وثيقة PDF
لإضافة أنماط إلى مستند PDF الخاص بك ، يمكنك استخدام ملفات pdf StyleSheet عنصر. ال StyleSheet يسمح لك المكون بتحديد أنماط مخصصة لمستند PDF الخاص بك.
لاستخدام ال ورقة الأنماط المكون ، قم باستيراده من مكتبة رد فعل pdf وحدد الأنماط الخاصة بك لمستند PDF.
على سبيل المثال:
يستورد تتفاعل من'تتفاعل';
يستورد {مستند ، نص ، صفحة ، ورقة أنماط} من"@ رد فعل- pdf / عارض";مقدار ثابت الأنماط = StyleSheet.create ({
صفحة: {
محاذاة النص: 'مركز',
الهامش 30,
حجم الخط: 30,
},
نص: {
لون: "# 228b22",
}
});مقدار ثابت MyDocument = () => (
مرحبا هناك </Text>
</Page>
</Document>
);
يصدّرتقصير ملفاتي؛
في مقطع التعليمات البرمجية أعلاه ، تقوم بإضافة أنماط إلى مكون PDF الخاص بك. يمكنك تحديد الأنماط باستخدام ملف ورقة الأنماط وظيفة. ال ورقة الأنماط تقوم الدالة بإنشاء كائن ورقة أنماط يحتوي على صفحة و نص الأنماط.
باستخدام أسلوب دعم ، يمكنك تمرير صفحة و نص الأنماط الخاصة بك صفحة و نص عناصر. هذا يضمن أن الأنماط الخاصة بك تنطبق على صفحة و نص عناصر.
إضافة تخطيطات إلى وثيقة PDF
لإضافة تخطيطات إلى مستند PDF الخاص بك ، يمكنك استخدام تنسيق منظر عنصر. ال منظر المكون هو مكون حاوية توفره مكتبة رد فعل pdf.
ال منظر المكون يعمل مثل HTML شعبة—عنصر HTML أساسي. باستخدامه ، يمكنك إنهاء المكونات الأخرى ، مثل ملف نص ، وحدد التخطيطات الخاصة بك عن طريق إضافة أنماط إلى ملف منظر عنصر.
مثل ذلك:
يستورد تتفاعل من'تتفاعل';
يستورد {مستند ، نص ، صفحة ، ورقة نمط ، عرض} من"@ رد فعل- pdf / عارض";مقدار ثابت الأنماط = StyleSheet.create ({
صفحة: {
الهامش 30,
حجم الخط: 30,
حشوة: 20,
},
تَخطِيط: {
الهامش 30,
الاتجاه المرن: 'صف',
تبرير المحتوى: 'الفضاء بين'
}
});مقدار ثابت MyDocument = () => (
مرحبا هناك </Text>
</View>مرحبًا !!!/Text>
</View>
</View>
</Page>
</Document>
);
يصدّرتقصير ملفاتي؛
في هذا المثال ، تستخدم الامتداد منظر مكونات لتجميع المكونات الأخرى.
إضافة الصور إلى وثيقة PDF
يمكنك أيضًا عرض الصور في مستند PDF بامتداد صورة المكون الذي توفره مكتبة رد فعل pdf. ال صورة يتيح لك المكون عرض الصور بتنسيقات مختلفة مثل JPEG و PNG و SVG وغيرها الكثير.
ال صورة المكون يأخذ أ src الخاصية التي تحدد عنوان URL للصورة وملف أسلوب دعم لإضافة أنماط مخصصة لصورك.
على سبيل المثال:
يستورد تتفاعل من'تتفاعل';
يستورد {مستند ، صفحة ، ورقة أنماط ، عرض ، صورة} من"@ رد فعل- pdf / عارض";مقدار ثابت الأنماط = StyleSheet.create ({
صفحة: {
حشوة: 20,
العناصر: 'مركز',
},
صورة: {
عرض: 300,
ارتفاع: 200,
}
});مقدار ثابت MyDocument = () => (
src =' https://example.com/image.png'
style = {styles.image} />
</View>
</Page>
</Document>
);
يصدّرتقصير ملفاتي؛
في هذا المثال ، تقوم بإنشاء مستند PDF بصفحة واحدة تحتوي على صورة. ال صورة يعرض المكون صورة بنمط عرض 300 بكسل ونمط ارتفاع 200 بكسل.
قد ترغب على الأرجح في تضمين روابط في مستند PDF الخاص بك. تقوم الروابط بتوجيه المستخدم إلى عنوان URL معين ، والذي قد يقدم معلومات تكميلية غير متوفرة في مستند PDF. ال وصلة يتيح لك مكون مكتبة رد فعل pdf إنشاء روابط داخل مستندات PDF الخاصة بك.
يستغرق مكون الارتباط src prop لإعادة توجيه المستخدمين عند النقر على الرابط. ستتم إعادة توجيههم إلى عنوان URL المحدد في المكون src دعامة إذا حددت واحدة.
لاستخدام ال وصلة المكون ، تحتاج أولاً إلى استيراده من مكتبة رد فعل pdf. يمكنك بعد ذلك إضافته إلى مستند PDF الخاص بك مثل هذا:
يستورد تتفاعل من'تتفاعل';
يستورد {مستند ، صفحة ، ورقة نمط ، عرض ، رابط} من"@ رد فعل- pdf / عارض";مقدار ثابت الأنماط = StyleSheet.create ({
صفحة: {
حشوة: 20,
العناصر: 'مركز',
},
وصلة: {
لون: '#333333',
نص الديكور: 'لا أحد'
}
});مقدار ثابت MyDocument = () => (
' https://example.com' style = {styles.link}> انقر فوق أنا </Link>
</View>
</Page>
</Document>
);
يصدّرتقصير ملفاتي؛
يقوم المثال أعلاه بإنشاء مستند PDF بصفحة واحدة وعرض واحد. في العرض ، أنت تعرض مكون رابط والذي ، عند النقر عليه ، يعيد توجيه المستخدم إلى عنوان URL المحدد ، " https://example.com.”
يمكنك الآن إنشاء مستندات PDF باستخدام React
React-pdf هي مكتبة قوية تتيح لك إنشاء مستندات PDF من مكونات React الخاصة بك. يمكنك إنشاء ملفات PDF باستخدام ملف pdf ، ثم إضافة نصوص وصور وروابط إليها.
باستخدام هذه المكتبة ، يمكنك بسهولة إنشاء ملفات PDF ذات مظهر احترافي بتصميم وتخطيط مخصصين.
