ایجاد فایل پی دی اف در ریکت

مهم نیست که مشغول توسعه یک وبسایت فروشگاهی با ریکت باشید و بخواهید فایل پی دی اف فاکتور فروش را ایجاد کنید، یا در حال سر و کله زدن با یک وبسایت ورزشی بوده و قصد داشته باشید برنامه های تمرینی را به شکل پی دی اف به کاربر ارائه کنید؛ در هر صورت نیازمند ایجاد فایل پی دی اف در ریکت یا نکست هستید. در این مقاله دقیقا به همین موارد خواهیم پرداخت، با کدنایت همراه باشید!

مرحله اول، نصب لایبرری React pdf

در این مقاله برای ایجاد فایل های پی دی اف، از لایبرری قدرتمند React pdf استفاده خواهیم کرد. پس در قدم اول نیاز است اقدام به نصب این لایبرری بر روی پروژه ریکتی خود نماییم. با استفاده از دستورات زیر، می توانید این لایبرری را به پروژه خود اضافه کنید:

نصب با استفاده از yarn:

yarn add @react-pdf/renderer

نصب با استفاده از npm:

npm install @react-pdf/renderer --save

مرحله دوم، ساخت کامپوننت قالب پی دی اف

در مرحله دوم، یک کامپوننت ساده ریکتی را ایجاد می کنیم تا بتوانیم در مراحل آینده، محتویات صفحه پی دی اف خود را به این کامپوننت اضافه کنیم. در واقع این کامپوننت، نقش قالب و تمپلیت خروجی پی دی اف ما را ایفا خواهد نمود و فایل پی دی اف خروجی، از روی این کامپوننت رندر خواهد شد:

// myPdf.tsx

const MyPdf = () => {
  return <>{/* خروجی پی دی اف از محتوای این کامپوننت رندر خواهد شد */}</>;
};

export default MyPdf;

مرحله سوم، اضافه کردن عناصر مختلف به صفحه پی دی اف

لایبرری react pdf، مجموعه ای از کامپوننت ها برای اضافه کردن متن، تصویر، لینک و view های مختلف به صفحه pdf را در اختیار ما قرار می دهد؛ در نتیجه می توانیم با ایمپورت کردن آنها در کامپوننت تمپلیت پی دی اف خود، اقدام به افزودن عناصر مختلف به آن نماییم:

// myPdf.tsx

import { Page, Text, View, Document } from "@react-pdf/renderer";

const MyPdf = () => {
  return (
    <Document>
      <Page size="A4">
        <View>
          <Text>اینجا کدنایته!</Text>
        </View>
      </Page>
    </Document>
  );
};

export default MyPdf;

لیست کامل کامپوننت های در دسترس و پراپ های آنها در وبسایت ریکت پی دی اف موجود است.

مرحله چهارم، اضافه کردن استایل ها

لایبرری React pdf امکان اضافه کردن استایل های مختلف به عناصر افزوده شده در مرحله قبل را در اختیار ما قرار می دهد. برای انجام این کار کافیست از متد StyleSheet.create این لایبرری استفاده نماییم و با استفاده از آن، ابجکت استایل خود را ایجاد کنیم:

// myPdf.tsx

import { Page, Text, View, Document, StyleSheet } from "@react-pdf/renderer";

const MyPdf = () => {
  // در این قسمت می توانید برای هریک از عناصر پی دی اف، استایل های مختلف را در نظر بگیرید
  const styles = StyleSheet.create({
    page: {
      padding: 40,
    },
    CodeNightTitle: {
      fontSize: 16,
    },
  });

  return (
    <Document>
      {/* استایل های ایجاد شده برای پیج را به شکل زیر به آن اعمال می کنیم */}
      <Page size="A4" style={styles.page}>
        <View>
          {/* استایل های ایجاد شده برای تایتل کدنایت را به شکل زیر به آن اعمال می کنیم */}
          <Text style={styles.CodeNightTitle}>اینجا کدنایته!</Text>
        </View>
      </Page>
    </Document>
  );
};

توضیحات بیشتر در مورد شیوه استایل دهی و پراپرتی های CSS پشتیبانی شده توسط کتابخانه React pdf، در این لینک موجود است.

مرحله پنجم، اضافه کردن فونت ها

لایبرری ریکت پی دی اف، از فونت های دلخواه شما نیز پشتیبانی می کند. شما میتوانید با استفاده از متد Font.register، اقدام به افزودن فونت مد نظر به این لایبرری نمایید:

// myPdf.tsx

import { Page, Text, View, Document, StyleSheet, Font } from "@react-pdf/renderer";

const MyPdf = () => {
  // نام مد نظر برای فونت و آدرس محل قرار گیری فایل فونت را در این قسمت مشخص میکنیم
  Font.register({ family: "iranSans", src: "./iranSans.ttf" });

  const styles = StyleSheet.create({
    page: {
      // حال می توانیم از فونت معرفی شده، در استایل شیت خود استفاده کنیم
      fontFamily: "iranSans",
      padding: 40,
    },
    CodeNightTitle: {
      fontSize: 16,
    },
  });

  return (
    <Document>
      <Page size="A4" style={styles.page}>
        <View>
          <Text style={styles.CodeNightTitle}>اینجا کدنایته!</Text>
        </View>
      </Page>
    </Document>
  );
};

export default MyPdf;

دقت کنید که تنها فونت های TTF در این کتابخانه پشتیبانی می گردند. همچنین برای نمایش صحیح متون فارسی در فایل خروجی، نیاز است الزاما از یک فونت فارسی که از کاراکتر های UTF-8 پشتیبانی می کند استفاده نمایید. اطلاعات بیشتر در این باره را می توانید در وبسایت React pdf مطالعه کنید.

مرحله ششم، ایجاد لینک دانلود فایل پی دی اف

برای ایجاد لینک دانلود فایل پی دی اف ساخته شده در مراحل قبلی، می توانید از هوک usePDF استفاده نمایید. به این صورت که فایل تمپلیت پی دی اف ساخته شده را به این هوک معرفی کرده و این هوک لینک دانلود آنرا برای شما ایجاد می کند. میتوانید این لینک را به یک دکمه با تگ a اختصاص دهید تا فرایند دانلود فایل با کلیک شدن روی آن آغاز گردد:

// index.tsx

import { usePDF } from "@react-pdf/renderer";
import MyPdf from "./myPDF.tsx";

const Home = () => {
  // لینک دانلود، وضعیت لودینگ و ارور های احتمالی با استفاده از این هوک در دسترس خواهند بود
  const [{ loading, url, error }] = usePDF({
    // قالب پی دی اف خود را به عنوان داکیومنت این هوک معرفی می کنیم
    document: <MyPdf />,
  });

  return (
    <>
      {/* با زدن دکمه زیر، فرایند دانلود فایل پی دی اف آغاز خواهد شد */}
      <a href={url}>دانلود فایل</a>
      {/* نمایش ارور های احتمالی در فرایند رندر شدن پی دی اف */}
      {error && <span>{error}</span>}
      {/* نمایش پیغام لودینگ در طول فرایند رندر شدن پی دی اف*/}
      {loading && <span>درحال ساخت فایل پی دی اف...</span>}
    </>
  );
};

export default Home;

تمام! به همین سادگی می توانید فایل پی دی اف ساخته شده خود را دانلود نمایید.

سخن پایانی

لایبرری React pdf بی شک یکی از محبوب ترین و کاربردی ترین کتابخانه ها برای تولید فایل پی دی اف در ریکت است. علاوه بر کامپوننت ها و متد هایی که در این مقاله پوشش داده شد، این لایبرری دارای امکانات متعدد دیگری نیز هست که پیشنهاد می کنیم با جست و جو در وبسایت React pdf با آنها بیشتر آشنا شوید.

مشتاق شنیدن نظرات شما در مورد این لایبرری در بخش کامنت ها هستیم!