السلام عليكم اعمل على اتطبيق react native expo
اقوم بطباعة ملف pdf لكن المشكلة هى ان اقوم بطباعة اراى داخل الملف
اريد طباعة ملف pdf
حاول استخدام مكتبة React Native PDF، كالتالي:
import React, { useState } from "react";
import { Pdf, PdfPage } from "react-native-pdf";
function App() {
const [array, setArray] = useState([
"عنصر 1",
"عنصر 2",
"عنصر 3",
]);
return (
<Pdf>
{array.map((item, index) => (
<PdfPage key={index}>
<Text>
#{index}: {item}
</Text>
</PdfPage>
))}
</Pdf>
);
}
والنتيجة هي إنشاء ملف PDF يحتوي على ثلاثة صفحات، كل صفحة تحتوي على عنصر من array.
أيضًا يتوفر ميثود addPage() لإضافة صفحات إلى ملف PDF، ويمكنك استخدامها لإضافة صفحة تحتوي على array بأكملها:
import React, { useState } from "react";
import { Pdf, PdfPage } from "react-native-pdf";
function App() {
const [array, setArray] = useState([
"عنصر 1",
"عنصر 2",
"عنصر 3",
]);
const pdf = new Pdf();
pdf.addPage(
<PdfPage>
{array.map((item, index) => (
<Text>
#{index}: {item}
</Text>
))}
</PdfPage>
);
return (
<Pdf ref={pdf} />
);
}
وسيتم إنشاء ملف PDF يحتوي على صفحة واحدة تحتوي على array بأكملها.
حاول استيراد المكتبات التالية:
import * as Print from 'expo-print';
import { shareAsync } from 'expo-sharing';
ثم استخدام الدالة التالي printToFile لطباعة ما تريده كالتالي:
const printToFile = async () => {
const data = [
"عنصر 1",
"عنصر 2",
"عنصر 3",
]
const { uri } = await Print.printToFileAsync({ data});
console.log('File has been saved to:', uri);
await shareAsync(uri, { UTI: '.pdf', mimeType: 'application/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;
التعليقات