السلام عليكم اعمل على اتطبيق react native expo
اقوم بطباعة ملف pdf لكن المشكلة هى ان اقوم بطباعة اراى داخل الملف
اريد طباعة ملف pdf
يمكنك استخدام ايضا مكتبة react-native-pdf-lib لإنشاء وتخصيص ملفات PDF.
تأكد اولا من تثبيت المكتبة في مشروعك باستخدام الأمر التالي:
npm install react-native-pdf-lib
في مكونك الذي يحتوي على عنصر react-native-pdf-lib، قم بإنشاء مصفوفة dataArray واستخدمها لتخزين البيانات التي تريد طباعتها.
بعدها قم بإنشاء دالة لإنشاء ملف PDF، في هذه الدالة يمكنك استخدام مكتبة react-native-pdf-lib لإضافة نص من مصفوفة dataArray إلى ملف PDF. و يكون الكود بالطريقة التالية:
import PDFLib, { PDFDocument, PDFPage, PDFText } from 'react-native-pdf-lib';
const createCustomPDF = async (dataArray) => {
const pdfDoc = await PDFDocument.create();
const page = pdfDoc.addPage([612, 792]);
const pageText = new PDFText()
.setFont('Helvetica')
.setFontSize(12)
.setColor('#000000')
.addText('المحتوى في الملف PDF:', { x: 50, y: 700 });
dataArray.forEach((item, index) => {
pageText.addText(`${index + 1}. ${item}`, { x: 50, y: 700 - (index + 1) * 20 });
});
page.drawText(pageText);
const pdfBytes = await pdfDoc.save();
return pdfBytes;
};
في هذه الحالة يمكنك القيام بنفس الأمر و لكن بهذا الكود الجديد:
اول شيء نقوم بتنسيق المحتوى بكود HTML و يمكنك تغيير الإعدادات على حسب رغبتك:
import React from 'react';
import { PDFViewer, Page, Text, View, Document, StyleSheet } from '@react-pdf/renderer';
const MyDocument = ({ dataArray }) => {
return (
<Document>
<Page size="A4" style={styles.page}>
<View style={styles.section}>
<Text>المحتوى في الملف PDF:</Text>
{dataArray.map((item, index) => (
<Text key={index}>{`${index + 1}. ${item}`}</Text>
))}
</View>
</Page>
</Document>
);
};
const styles = StyleSheet.create({
page: {
flexDirection: 'row',
backgroundColor: 'white',
},
section: {
margin: 10,
padding: 10,
flexGrow: 1,
},
});
export default MyDocument;
بعدها يمكنك استيراد مكون MyDocument الذي تم إنشاؤه في الخطوة السابقة واستخدامه لإنشاء الملف PDF وطباعته.
import React from 'react';
import { Button } from 'react-native';
import * as Print from 'expo-print';
import MyDocument from './MyDocument';
const PrintPDF = ({ dataArray }) => {
const handlePrintPDF = async () => {
const html = MyDocument({ dataArray }).toBlob();
await Print.printToFileAsync({ html });
};
return (
<Button title="طباعة ملف PDF" onPress={handlePrintPDF} />
);
};
export default PrintPDF;
التعليقات