كيف يمكن انشاء ملف pdf وحفظة داخل الهاتف react native

حاول استخدام مكتبة "react-native-html-to-pdf" وتثبيتها من خلال التالي:

npm install react-native-pdf-lib

ثم أنشئ دالة تستقبل سلسلة HTML كمدخل وتُرجع وعدًا (promise) يحل بعنوان URI لملف PDF الذي تم إنشاؤه، واستخدم وحدة "Print" من مجموعة أدوات Expo SDK لطباعة ملف PDF على نظام ملفات الجهاز.

واعتمد على خاصية "uri" في وعد الـ promise المُرجع لفتح ملف PDF في تطبيق قارئ PDF الافتراضي في الجهاز.

وإليك مثال:

import { Print } from 'expo-print';
import { htmlToPdf } from 'react-native-html-to-pdf';


const createPDF = async (html) => {
  const pdfUri = await htmlToPdf(html);
  await Print.printToFileAsync({ uri: pdfUri });
  return pdfUri;
};


const App = () => {
  const [pdfUri, setPdfUri] = useState('');


  const handleGeneratePDF = () => {
    setPdfUri(createPDF('<h1>This is a PDF file</h1>'));
  };


  return (
    <View>
      <Button
        title="Generate PDF"
        onPress={handleGeneratePDF}
      />
      {pdfUri && (
        <Text>
          PDF file saved to: {pdfUri}
        </Text>
      )}
    </View>
  );
};


export default App;

ويرسل الكود أولاً سلسلة HTML تحتوي على محتوى ملف PDF، ثم يستخدم دالة htmlToPdf لتحويل سلسلة HTML إلى ملف PDF. بمجرد إنشاء ملف PDF، يتم استخدام وحدة "Print" لطباعة الملف إلى نظام ملفات الجهاز، وفي النهاية تعيين قيمة pdfUri المتغيرة لتحتوي على عنوان URI للملف PDF المُنشأ.

وبإمكانك استخدام متغير الحالة pdfUri لفتح ملف PDF في تطبيق قارئ PDF الافتراضي على الجهاز.

وفي حال واجهت مشاكل في استخدام مكتبة "react-native-html-to-pdf"، حاول تجربة مكتبات أخرى مثل "react-native-pdf-viewer" أو "react-native-pdf-generator".