צור קובצי PDF בקלות באמצעות ספריית React זו וקצת קוד פשוט.

React היא ספריית JavaScript פופולרית לבניית ממשקי משתמש. אפשר ליצור קבצי PDF מרכיבי React באמצעות ספריית react-pdf.

כאן תלמד כיצד ליצור מסמכי PDF עם רכיבי React באמצעות react-pdf.

מה זה React-pdf?

React-pdf היא ספרייה המאפשרת לך ליצור מסמכי PDF מרכיבי React. הוא מספק קבוצה של רכיבים שתוכל להשתמש בהם כדי לבנות את מסמך ה-PDF שלך ומשתמש ב-DOM וירטואלי כדי לעבד את הרכיבים ל-PDF.

התקנת React-pdf

כדי להתקין react-pdf באמצעות מנהל חבילות הצומת, הפעל את פקודת המסוף הבאה בספריית הפרויקט שלך:

npm התקן את @react-pdf/renderer --save

כדי להתקין אותו עם מנהל חבילות החוטים במקום זאת, הפעל את הפקודה הזו:

חוט הוסף @react-pdf/renderer

יצירת מסמך PDF

כדי ליצור מסמך PDF, תשתמש ברכיבי המסמך, העמוד והטקסט של react-pdf. ה מסמך הרכיב אחראי ליצירת מסמך PDF חדש ולעיבוד תוכנו. ה עמוד רכיב יוצר עמוד חדש בתוך מסמך ה-PDF ומציג את תוכנו. סוף - סוף, ה טֶקסט רכיב מעבד טקסטים בתוך מסמך PDF.

הנה דוגמה לאופן שבו אתה יכול ליצור מסמך PDF באמצעות כל שלושת הרכיבים האלה:

יְבוּא





instagram viewer

 לְהָגִיב מ'לְהָגִיב';
יְבוּא { מסמך, טקסט, עמוד } מ'@react-pdf/renderer';
const MyDocument = () => (


שלום לך</Text>
 </Page>
 </Document>
);
יְצוּאבְּרִירַת מֶחדָל המסמך שלי;

בדוגמה זו, אתה יוצר מסמך PDF עם עמוד בודד המכיל שורת טקסט אחת, "שלום לך". לאחר יצירת מסמך PDF, עליך לעבד אותו באפליקציית React שלך.

כדי להציג את מסמך ה-PDF ביישום שלך, השתמש ב- PDFViewer רכיב, שיוצר את מסמך ה-PDF.

ייבא את PDFViewer רכיב ועטוף בו את המסמך שלך:

יְבוּא לְהָגִיב מ"לְהָגִיב"
יְבוּא { PDFViewer } מ'@react-pdf/renderer';
יְבוּא המסמך שלי מ"./המסמך שלי";
פוּנקצִיָהאפליקציה() {
לַחֲזוֹר (


 </PDFViewer>
 )
}
יְצוּאבְּרִירַת מֶחדָל אפליקציה

לאחר עיבוד היישום שלך, זה ייראה בערך כך:

הוספת סגנונות למסמך PDF

כדי להוסיף סגנונות למסמך ה-PDF שלך, אתה יכול להשתמש ב-react-pdf גיליון סגנון רְכִיב. ה גיליון סגנון רכיב מאפשר לך להגדיר סגנונות מותאמים אישית עבור מסמך ה-PDF שלך.

כדי להשתמש ב גיליון סגנונות רכיב, ייבא אותו מספריית react-pdf והגדר את הסגנונות שלך עבור מסמך ה-PDF.

לדוגמה:

יְבוּא לְהָגִיב מ'לְהָגִיב';
יְבוּא { מסמך, טקסט, דף, גיליון סגנונות } מ'@react-pdf/renderer';
const styles = StyleSheet.create({
 עמוד: {
 יישור טקסט: 'מֶרְכָּז',
 marginTop: 30,
 גודל גופן: 30,
 },
 טקסט: {
 צֶבַע: '#228b22',
 }
});


const MyDocument = () => (


שלום לך</Text>
 </Page>
 </Document>
);
יְצוּאבְּרִירַת מֶחדָל המסמך שלי;

בבלוק הקוד למעלה, אתה מוסיף סגנונות לרכיב ה-PDF שלך. אתה מגדיר את הסגנונות באמצעות ה Stylesheet.create פוּנקצִיָה. ה Stylesheet.create הפונקציה יוצרת אובייקט גליון סגנונות המכיל את עמוד ו טֶקסט סגנונות.

משתמש ב סִגְנוֹן אביזר, אתה עובר את עמוד ו טֶקסט סגנונות שלך עמוד ו טֶקסט רכיבים. זה מבטיח שהסגנונות שלך יחולו על עמוד ו טֶקסט רכיבים.

הוספת פריסות למסמך PDF

כדי להוסיף פריסות למסמך ה-PDF שלך, אתה משתמש ב- נוף רְכִיב. ה נוף רכיב הוא רכיב מיכל המסופק על ידי ספריית react-pdf.

ה נוף הרכיב פועל כמו HTML div—אלמנט HTML בסיסי. עם זה, אתה עוטף רכיבים אחרים, כגון טֶקסט רכיב, והגדר את הפריסות שלך על ידי הוספת סגנונות ל- נוף רְכִיב.

ככה:

יְבוּא לְהָגִיב מ'לְהָגִיב';
יְבוּא { Document, Text, Page, StyleSheet, View } מ'@react-pdf/renderer';
const styles = StyleSheet.create({
 עמוד: {
 marginTop: 30,
 גודל גופן: 30,
 ריפוד: 20,
 },
 פריסה: {
 marginTop: 30,
 flexDirection: 'שׁוּרָה',
 justifyContent: 'רווח-בין'
 }
});


const MyDocument = () => (




שלום לך</Text>
 </View>

ברוך הבא!!!</Text>
 </View>
 </View>
 </Page>
 </Document>
);
יְצוּאבְּרִירַת מֶחדָל המסמך שלי;

בדוגמה זו, אתה משתמש ב- נוף רכיבים כדי לקבץ רכיבים אחרים.

הוספת תמונות למסמך PDF

אתה יכול גם לרנדר תמונות במסמך ה-PDF עם ה- תמונה רכיב מסופק על ידי ספריית react-pdf. ה תמונה רכיב מאפשר לך להציג תמונות בפורמטים שונים כגון JPEG, PNG, SVG ועוד רבים אחרים.

ה תמונה רכיב לוקח א src prop המציין את כתובת ה-URL של התמונה וא סִגְנוֹן אביזר כדי להוסיף סגנונות מותאמים אישית לתמונות שלך.

לדוגמה:

יְבוּא לְהָגִיב מ'לְהָגִיב';
יְבוּא { Document, Page, StyleSheet, View, Image } מ'@react-pdf/renderer';
const styles = StyleSheet.create({
 עמוד: {
 ריפוד: 20,
 alignItems: 'מֶרְכָּז',
 },
 תמונה: {
 רוֹחַב: 300,
 גוֹבַה: 200,
 }
});


const MyDocument = () => (



 src=' https://example.com/image.png'
 style={styles.image} />
 </View>
 </Page>
 </Document>
);
יְצוּאבְּרִירַת מֶחדָל המסמך שלי;

בדוגמה זו, אתה יוצר מסמך PDF עם עמוד בודד המכיל תמונה. ה תמונה רכיב מציג תמונה עם סגנון רוחב של 300 פיקסלים וסגנון גובה של 200 פיקסלים.

סביר להניח שתרצה לכלול קישורים במסמך ה-PDF שלך. קישורים מפנים את המשתמש לכתובת URL ייעודית, אשר עשויה להציע מידע משלים שאינו זמין במסמך ה-PDF. ה קישור הרכיב של ספריית react-pdf מאפשר לך ליצור קישורים בתוך מסמכי ה-PDF שלך.

רכיב הקישור לוקח א src התקן להפנות משתמשים כאשר הם לוחצים על הקישור. הם יופנו לכתובת ה-URL שצוינה ב-URL של הרכיב src prop אם אתה מגדיר אחד.

כדי להשתמש ב קישור רכיב, תחילה עליך לייבא אותו מספריית react-pdf. לאחר מכן תוכל להוסיף אותו למסמך ה-PDF שלך כך:

יְבוּא לְהָגִיב מ'לְהָגִיב';
יְבוּא { Document, Page, StyleSheet, View, Link } מ'@react-pdf/renderer';
const styles = StyleSheet.create({
 עמוד: {
 ריפוד: 20,
 alignItems: 'מֶרְכָּז',
 },
 קישור: {
 צֶבַע: '#333333',
 טקסט קישוט: 'אף אחד'
 }
});


const MyDocument = () => (



' https://example.com' style={styles.link}>לחץ עליי</Link>
 </View>
 </Page>
 </Document>
);
יְצוּאבְּרִירַת מֶחדָל המסמך שלי;

הדוגמה שלמעלה יוצרת מסמך PDF עם עמוד אחד ותצוגה אחת. בתוך התצוגה, אתה מציג רכיב קישור אשר, כאשר לוחצים עליו, מפנה את המשתמש לכתובת האתר שצוינה, " https://example.com.”

עכשיו אתה יכול ליצור מסמכי PDF באמצעות React

React-pdf היא ספרייה רבת עוצמה המאפשרת לך ליצור מסמכי PDF מרכיבי React שלך. אתה יכול ליצור קבצי PDF באמצעות react-pdf, ואז להוסיף להם טקסט, תמונות וקישורים.

על ידי שימוש בספרייה זו, אתה יכול ליצור בקלות קבצי PDF בעלי מראה מקצועי עם סגנון ופריסה מותאמים אישית.