1

اريد طباعة ملف pdf

السلام عليكم اعمل على اتطبيق react native expo

اقوم بطباعة ملف pdf لكن المشكلة هى ان اقوم بطباعة اراى داخل الملف


0
Hedidi_chihab أضف ردا

يمكنك استخدام ايضا مكتبة 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;
};
1
ahmedpahregypt123 أضف ردا

لاكن هذا الطريقة لا تعمل مع expo

انا استخدم مكتبة expo-print

0
Hedidi_chihab أضف ردا

في هذه الحالة يمكنك القيام بنفس الأمر و لكن بهذا الكود الجديد:

اول شيء نقوم بتنسيق المحتوى بكود 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;