بهترین 4 روش برای ایجاد نمایشگر PDF در React.js: PDF.js، react-pdf و موارد دیگر (راهنمای 2024) 🚀

Summarize this content to 400 words in Persian Lang
هنگام کار بر روی پروژه‌های React، چیزی که آموخته‌ام این است که داشتن ابزارهای مناسب می‌تواند تجربه کاربر را ایجاد یا خراب کند. و هنگامی که نوبت به نمایش اسناد می رسد، فایل های PDF هنوز هم یکی از بهترین راه ها برای اشتراک گذاری محتوا هستند، خواه گزارش، کتابچه راهنما یا کتاب الکترونیکی باشد. با این حال، چالش این است که چگونه یک نمایشگر PDF قابل اعتماد را بدون پرش از حلقه ها در برنامه خود ادغام کنید.

در این مقاله، من شما را از طریق چهار راه مختلف برای ایجاد یک نمایشگر PDF در React.js راهنمایی می کنم. از روش‌های ساده و سریع مانند iFrame و باز کردن فایل‌های PDF در یک تب جدید گرفته تا گزینه‌های قابل شخصی‌سازی بیشتر مانند PDF.js و react-pdf—شما می‌توانید رویکردی را انتخاب کنید که برای پروژه خود بهترین کار را دارد.

چرا فایل های PDF در توسعه وب اهمیت دارند؟

رندر کردن فایل های PDF در وب سایت ها با طیف گسترده ای از موارد استفاده می شود. در اینجا چند سناریو وجود دارد که در آن فایل های PDF واقعاً می توانند مفید باشند:

گزارش های مالیتصور کنید که در حال ساخت یک داشبورد مالی هستید و کاربران شما باید به گزارش‌های فصلی یا ترازنامه دسترسی داشته باشند. با قرار دادن این اسناد به صورت PDF، کاربران به راحتی می توانند آنها را با وضوح بالا در هر دستگاهی دانلود، چاپ یا مشاهده کنند. به‌علاوه، قالب‌بندی را ثابت و حرفه‌ای نگه می‌دارید و مطمئن می‌شوید که هیچ چیز نامناسب به نظر نمی‌رسد.
فاکتورهای فروشبرای برنامه‌هایی که فاکتورها را تولید یا نمایش می‌دهند، PDF فرمت مناسبی برای اطمینان از وضوح و دقت است. شما می توانید فاکتورهای قابل بارگیری و چاپی را در اختیار کاربران قرار دهید که طرح و برندی را که طراحی کرده اید، حفظ کند. دیگر نگران تغییر یا تفسیر اشتباه اسناد نباشید.
مقالات پژوهشیاگر روی پلتفرمی کار می‌کنید که محتوای آکادمیک یا تحقیق را مدیریت می‌کند، فایل‌های PDF راهی عالی برای ارائه مقالات، مقالات مجلات و مقالات سفید هستند. محققان می‌توانند برای جزئیات بزرگ‌نمایی کنند، نکات کلیدی را برجسته کنند یا حاشیه‌نویسی بگذارند – همه اینها با حفظ قالب اصلی سند.
قراردادهای حقوقیبرای مشاغلی که با قراردادها، قراردادهای محرمانه یا هر سند قانونی سر و کار دارند، PDF برای حفظ یکپارچگی و امنیت ضروری است. PDF ها تضمین می کنند که قراردادهای قانونی ضد دستکاری باقی می مانند و قالب اصلی را حفظ می کنند و امکان امضای دیجیتال ایمن را فراهم می کنند. این امر هنگام رسیدگی به قراردادهای حساس بسیار مهم است و اطمینان حاصل می شود که آنها می توانند به راحتی توسط همه طرف های درگیر بدون خطر ویرایش به اشتراک گذاشته، مشاهده و ذخیره شوند.

React PDF: یک نمایشگر PDF قابل انعطاف و قدرتمند برای React.js

قبل از پرداختن به جنبه فنی، اجازه دهید React PDF را به شما معرفی کنم—کتابخانه ای که من روی آن کار کرده ام و مشاهده PDF را مستقیماً به برنامه های React یا Next.js شما می آورد. با بیش از 20 ویژگی از جمله سفارشی‌سازی تم، APIهای خارجی و طرح‌بندی‌های واکنش‌گرا، برای اطمینان از اینکه کاربران شما می‌توانند بدون خروج از سایت شما با فایل‌های PDF تعامل داشته باشند، عالی است.

اگر علاقه مند به امتحان کردن آن هستید، اگر بتوانید React PDF را بررسی کنید، بسیار سپاسگزار خواهم بود. حمایت شما به من انگیزه می دهد تا به تولید محتوای بیشتر ادامه دهم! ❤️‍🔥

روش 1: PDF را در یک برگه جدید باز کنید

اگر در React کار می‌کنید و به یک راه ساده برای باز کردن PDF نیاز دارید، روش 1 راه حل اصلی شماست: باز کردن PDF در یک برگه مرورگر جدید. بیایید آن را تجزیه کنیم:

1. یک پیوند یا دکمه اضافه کنید

در کامپوننت React خود، یک پیوند یا دکمه برای باز کردن PDF ایجاد کنید.

2. PDF را فعال کنید

یک را اضافه کنید onclick رویداد برای باز کردن PDF در یک برگه جدید.

const pdfUrl = ‘/your-pdf-url-goes-here.pdf’;

document.getElementById(‘pdf-button’).onclick = function() {
window.open(pdfUrl, ‘_blank’);
};

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مزایا و معایب

جوانب مثبت:

آسان برای پیاده سازی: این روش سریع و ساده است.

دسترسی مستقیم: کاربران می توانند پی دی اف را بدون هیچ چیزی در این بین مشاهده کنند.

معایب:

کنترل محدود: شما نمی توانید به طور کامل نحوه نمایش PDF را کنترل کنید.

تفاوت های مرورگر: نحوه عملکرد آن می تواند بین مرورگرها متفاوت باشد.

زمان استفاده از آن

زمانی که می خواهید نمایشگر PDF را از وب سایت اصلی خود جدا نگه دارید، از این روش استفاده کنید. به عنوان مثال، اگر قرار دادن آن در یک iframe ایده آل نیست.

روش 2: استفاده از iFrame، Embed یا Object

یک راه ساده برای نمایش فایل های PDF در React استفاده از یک است ، ، یا element. These methods leverage the browser’s built-in PDF capabilities, allowing you to embed the PDF directly into your app.

How to Implement:

Create your React project.
Add one of these elements (، ، یا ) in your JSX.
Set the src به URL فایل PDF نسبت داده شود.

مثال:

<iframe src=”/your-pdf-url.pdf” width=”100%” height=”600px”>iframe>

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مثال:

<embed src=”/your-pdf-url.pdf” width=”100%” height=”600px” type=”application/pdf” />

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

Example:

<object data=”/your-pdf-url.pdf” width=”100%” height=”600px” type=”application/pdf”>
<p>Your browser doesn’t support PDFs. Please download the PDF to view it: <a href=”/your-pdf-url.pdf”>Download PDFa>.p>
object>

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

می توانید یک کد React را در مخزن Github من مشاهده کنید

جوانب مثبت:

فوق العاده آسان: اجرای آن سریع و ساده است.

از نمایشگر PDF مرورگر استفاده می کند: نیازی به کتابخانه اضافی نیست—فقط از نمایشگر PDF بومی مرورگر استفاده کنید.

بدون نیاز به راه اندازی: بلافاصله بدون تنظیمات اضافی کار می کند.

معایب:

کنترل محدود: نمی توانید رابط نمایشگر PDF را کنترل کنید یا آن را سفارشی کنید.

سازگاری مرورگر: همه مرورگرها این روش ها را به یک شکل اداره نمی کنند.

محدودیت های سفارشی سازی: این گزینه ها انعطاف زیادی برای سفارشی کردن تجربه مشاهده ارائه نمی دهند.

زمان استفاده از آن:

زمانی که می خواهید راه حلی سریع و ساده داشته باشید و نیازی به شخصی سازی نمایشگر PDF ندارید از این روش ها استفاده کنید.

روش 3: استفاده از PDF.js

اگر به کنترل بیشتری بر نحوه نمایش و تعامل فایل‌های PDF نیاز دارید، PDF.js یک گزینه عالی است. PDF.js که توسط Mozilla ایجاد شده است، به شما امکان می‌دهد تجربه مشاهده PDF را در برنامه خود کاملاً سفارشی کنید.

نحوه پیاده سازی:

کتابخانه PDF.js را در پروژه React نصب کنید.

npm install pdfjs-dist

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

یک کامپوننت React برای رندر PDF با استفاده از PDF.js ایجاد کنید.

import { PdfProps } from “../types”;
import * as PDFJS from “pdfjs-dist”;
import type {
PDFDocumentProxy,
RenderParameters,
} from “pdfjs-dist/types/src/display/api”;
import { useCallback, useRef, useState, useEffect } from “react”;

export default function PdfJs(props: PdfProps) {
PDFJS.GlobalWorkerOptions.workerSrc =
“https://unpkg.com/pdfjs-dist@4.7.76/build/pdf.worker.min.mjs”;

const { src } = props;
const canvasRef = useRef<HTMLCanvasElement>(null);

const [pdfDoc, setPdfDoc] = useState<PDFDocumentProxy>();
const [currentPage, setCurrentPage] = useState(1);
let renderTask: PDFJS.RenderTask;

const renderPage = useCallback(
(pageNum: number, pdf = pdfDoc) => {
const canvas = canvasRef.current;
if (!canvas || !pdf) return;
canvas.height = 0;
canvas.width = 0;
// canvas.hidden = true;
pdf
.getPage(pageNum)
.then((page) => {
const viewport = page.getViewport({ scale: 1.5 });
canvas.height = viewport.height;
canvas.width = viewport.width;
const renderContext: RenderParameters = {
canvasContext: canvas.getContext(“2d”)!,
viewport: viewport,
};
try {
if (renderTask) {
renderTask.cancel();
}
renderTask = page.render(renderContext);
return renderTask.promise;
} catch (error) {}
})
.catch((error) => console.log(error));
},
[pdfDoc] );

useEffect(() => {
renderPage(currentPage, pdfDoc);
}, [pdfDoc, currentPage, renderPage]);

useEffect(() => {
const loadingTask = PDFJS.getDocument(src);
loadingTask.promise.then(
(loadedDoc) => {
setPdfDoc(loadedDoc);
},
(error) => {
console.error(error);
}
);
}, [src]);

const nextPage = () =>
pdfDoc && currentPage < pdfDoc.numPages && setCurrentPage(currentPage + 1);

const prevPage = () => currentPage > 1 && setCurrentPage(currentPage – 1);

return (
<div>
<button onClick={prevPage} disabled={currentPage <= 1}>
Previous
button>
<button
onClick={nextPage}
disabled={currentPage >= (pdfDoc?.numPages ?? -1)}
>
Next
button>
<canvas ref={canvasRef}>canvas>
div>
);
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

می توانید یک کد نمونه کامل را در Github من پیدا کنید: components/PdfJs.tsx.

اینم نتیجه👇

جوانب مثبت:

ویژگی های پیشرفته: PDF.js رندر قدرتمند PDF را با گزینه هایی مانند زوم، پیمایش صفحه و موارد دیگر ارائه می دهد.

بسیار قابل تنظیم: شما کنترل کاملی بر نحوه نمایش PDF و تعامل با آن دارید.

پشتیبانی از مرورگرهای مختلف: در اکثر مرورگرهای مدرن کار می کند.

به خوبی نگهداری شده است: توسط یک جامعه بزرگ با به روز رسانی های منظم پشتیبانی می شود.

معایب:

منحنی یادگیری: یادگیری و اجرا به زمان نیاز دارد.

پیچیده تر: تنظیم آن در مقایسه با استفاده از iFrame یا باز کردن فایل‌های PDF در یک برگه جدید سخت‌تر است.

چالش های مستندسازی: پیگیری اسناد ممکن است سخت باشد.

مسائل یکپارچه سازی: سفارشی کردن آن برای چارچوب هایی مانند React، Angular یا Vue می تواند مشکل باشد.

پیچیدگی بالاتر: مدیریت تعاملات پیشرفته با فایل های PDF پیچیدگی را افزایش می دهد.

زمان استفاده از آن:

زمانی که به کنترل کامل روی نمایشگر PDF نیاز دارید و می خواهید ویژگی های پیشرفته را مستقیماً به رابط برنامه خود اضافه کنید از PDF.js استفاده کنید.

روش 4: استفاده از react-pdf (MIT)

react-pdf یک بسته منبع باز است که بر روی PDF.js ساخته شده است که نمایش PDF در برنامه های React را آسان تر می کند و در عین حال فرآیند توسعه را ساده می کند.

نحوه پیاده سازی:

نصب کنید react-pdf با استفاده از npm یا نخ.

npm install react-pdf

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

وارد کنید react-pdf جزء در برنامه شما

import { pdfjs } from “react-pdf”;

pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

برای راه اندازی دقیق، دستورالعمل های GitHub را دنبال کنید.
یک کامپوننت React برای رندر PDF ایجاد کنید

export default function PdfReactPdf({ src }: PdfProps) {
const [numPages, setNumPages] = useState<number>();
const [pageNumber, setPageNumber] = useState<number>(1);

function onDocumentLoadSuccess({ numPages }: { numPages: number }): void {
setNumPages(numPages);
}

function nextPage() {
setPageNumber((v) => ++v);
}

function prevPage() {
setPageNumber((v) => –v);
}

return (
<div style={{ width: “100%”, height: “100%” }}>
<button onClick={prevPage} disabled={pageNumber <= 1}>
Previous
button>
<button onClick={nextPage} disabled={pageNumber >= (numPages ?? -1)}>
Next
button>
<Document
file={src}
onLoadSuccess={onDocumentLoadSuccess}
className=”my-react-pdf”
>
<Page pageNumber={pageNumber} />
Document>
<p>
Page {pageNumber} of {numPages}
p>
div>
);
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

می توانید نمونه من را در Github من بررسی کنید: components/PdfReactPdf.tsx.

جوانب مثبت:

ادغام آسان: با React به راحتی کار می کند. اسناد توسعه دهنده بهتر در مقایسه با PDF.js.

کنترل بیشتر: سفارشی سازی بیشتری نسبت به روش های iFrame یا New Tab ارائه می دهد.

پاسخگو و قابل تنظیم: به خوبی با اندازه های مختلف صفحه تنظیم می شود و برخی سفارشی سازی ها را ارائه می دهد.

معایب:

تنظیمات بیشتر: راه اندازی در مقایسه با روش های ساده تر کمی تلاش بیشتری می کند.

ویژگی های پیشرفته محدود: به اندازه استفاده از کتابخانه کامل PDF.js انعطاف پذیری را ارائه نمی دهد.

زمان استفاده از آن:

اگر برای پروژه React خود به یک نمایشگر PDF قابل تنظیم و پیاده سازی آسان نیاز دارید از react-pdf استفاده کنید.

نتیجه گیری

راه های مختلفی برای پیاده سازی نمایشگر PDF در React.js وجود دارد. استفاده از iFrame یا باز کردن PDF در یک برگه جدید سادگی را ارائه می دهد اما سفارشی سازی را محدود می کند. PDF.js ویژگی ها و کنترل پیشرفته ای را ارائه می دهد، اما با پیچیدگی بیشتری همراه است. react-pdf (متن باز) با ارائه سهولت استفاده با گزینه های سفارشی سازی، شکاف را پر می کند.

روشی را انتخاب کنید که به بهترین وجه با نیازهای پروژه شما مطابقت دارد، خواه سرعت، سادگی یا کنترل تجربه کاربر باشد.

آیا راه حل بهتری وجود دارد؟

در حالی که روش‌هایی مانند iFrame یا باز کردن فایل‌های PDF در یک برگه جدید می‌توانند رفع سریع باشند، اما کنترل یا سفارشی‌سازی زیادی را ارائه نمی‌دهند. PDF.js و react-pdf (یک کتابخانه منبع باز برای React) گزینه های پیشرفته تری را ارائه می دهند، اما چالش های خاص خود را دارند – به خصوص اگر به دنبال چیزی برای پیاده سازی، نگهداری و سفارشی سازی برای پروژه خاص React خود هستید. .

به همین دلیل است که React PDF را می سازم (با react-pdf اشتباه نشود). در حالی که react-pdf یک کتابخانه منبع باز عالی است، React PDF برای ارائه انعطاف‌پذیری بیشتر، گزینه‌های سفارشی‌سازی قدرتمند و فرآیند راه‌اندازی ساده‌تر برای توسعه‌دهندگانی که بر روی برنامه‌های کوچک و پیچیده React کار می‌کنند، طراحی شده است.

ساخته شده برای React.js: برخلاف کتابخانه های عمومی تر، React PDF از ابتدا ساخته شده است تا به طور یکپارچه با React کار کند. چه به رندر سریع یا ویژگی های پیشرفته نیاز داشته باشید، تنها با چند خط کد به راحتی در پروژه شما ادغام می شود.
سفارشی سازی بدون پیچیدگی: با React PDF، کنترل کاملی بر ظاهر و رفتار نمایشگر PDF خود دارید. می‌توانید طراحی بیننده را با موضوع برنامه‌تان مطابقت دهید، ویژگی‌های تعاملی مانند جستجو و نشانک‌گذاری را اضافه کنید، و طرح‌بندی را سفارشی کنید—همه اینها بدون هیچ زحمتی از سر و کار داشتن با پیکربندی‌های پیچیده.
مجموعه ویژگی های گسترده: چه به عملکردهای اولیه مانند مشاهده PDF یا ویژگی های پیشرفته تر مانند چرخش، حالت های مختلف پیمایش و طراحی واکنش گرا نیاز داشته باشید، پی دی اف واکنش نشان دهید آیا شما را پوشش داده است به‌علاوه، با در نظر گرفتن عملکرد ساخته شده است، بنابراین لازم نیست در هنگام مدیریت فایل‌های حجیم نگران تاخیر باشید.
مستندات کاربر پسند: من مطمئن شده ام که اسناد فنی واضح و قابل پیگیری هستند. از کیت های آغازین گرفته تا مراجع دقیق API، همه چیز برای کمک به شما در راه اندازی و اجرای سریع وجود دارد.
پشتیبانی و به روز رسانی قابل اعتماد: به عنوان توسعه دهندگان، می دانم که داشتن پشتیبانی قابل اعتماد چقدر مهم است. به همین دلیل است پی دی اف واکنش نشان دهید همراه با پشتیبانی پاسخگو از مشتری و به روز رسانی های منظم برای بهینه نگه داشتن کتابخانه و بدون اشکال.

اگر این چیزی است که شما نیاز دارید، ممنون می‌شوم اگر بتوانید React PDF را بررسی کنید. حمایت شما مرا تشویق می کند که به پیشرفت و ساختن ابزار برای جامعه ادامه دهم. متشکرم 🙏

const pdfUrl = '/your-pdf-url-goes-here.pdf';

document.getElementById('pdf-button').onclick = function() {
    window.open(pdfUrl, '_blank');
};

<iframe src="/your-pdf-url.pdf" width="100%" height="600px">iframe>

<embed src="/your-pdf-url.pdf" width="100%" height="600px" type="application/pdf" />

<object data="/your-pdf-url.pdf" width="100%" height="600px" type="application/pdf">
  <p>Your browser doesn’t support PDFs. Please download the PDF to view it: <a href="/your-pdf-url.pdf">Download PDFa>.p>
object>

npm install pdfjs-dist

import { PdfProps } from "../types";
import * as PDFJS from "pdfjs-dist";
import type {
  PDFDocumentProxy,
  RenderParameters,
} from "pdfjs-dist/types/src/display/api";
import { useCallback, useRef, useState, useEffect } from "react";

export default function PdfJs(props: PdfProps) {
  PDFJS.GlobalWorkerOptions.workerSrc =
    "https://unpkg.com/pdfjs-dist@4.7.76/build/pdf.worker.min.mjs";

  const { src } = props;
  const canvasRef = useRef<HTMLCanvasElement>(null);

  const [pdfDoc, setPdfDoc] = useState<PDFDocumentProxy>();
  const [currentPage, setCurrentPage] = useState(1);
  let renderTask: PDFJS.RenderTask;

  const renderPage = useCallback(
    (pageNum: number, pdf = pdfDoc) => {
      const canvas = canvasRef.current;
      if (!canvas || !pdf) return;
      canvas.height = 0;
      canvas.width = 0;
      // canvas.hidden = true;
      pdf
        .getPage(pageNum)
        .then((page) => {
          const viewport = page.getViewport({ scale: 1.5 });
          canvas.height = viewport.height;
          canvas.width = viewport.width;
          const renderContext: RenderParameters = {
            canvasContext: canvas.getContext("2d")!,
            viewport: viewport,
          };
          try {
            if (renderTask) {
              renderTask.cancel();
            }
            renderTask = page.render(renderContext);
            return renderTask.promise;
          } catch (error) {}
        })
        .catch((error) => console.log(error));
    },
    [pdfDoc]
  );

  useEffect(() => {
    renderPage(currentPage, pdfDoc);
  }, [pdfDoc, currentPage, renderPage]);

  useEffect(() => {
    const loadingTask = PDFJS.getDocument(src);
    loadingTask.promise.then(
      (loadedDoc) => {
        setPdfDoc(loadedDoc);
      },
      (error) => {
        console.error(error);
      }
    );
  }, [src]);

  const nextPage = () =>
    pdfDoc && currentPage < pdfDoc.numPages && setCurrentPage(currentPage + 1);

  const prevPage = () => currentPage > 1 && setCurrentPage(currentPage - 1);

  return (
    <div>
      <button onClick={prevPage} disabled={currentPage <= 1}>
        Previous
      button>
      <button
        onClick={nextPage}
        disabled={currentPage >= (pdfDoc?.numPages ?? -1)}
      >
        Next
      button>
      <canvas ref={canvasRef}>canvas>
    div>
  );
}

npm install react-pdf

import { pdfjs } from "react-pdf";

pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`;

export default function PdfReactPdf({ src }: PdfProps) {
  const [numPages, setNumPages] = useState<number>();
  const [pageNumber, setPageNumber] = useState<number>(1);

  function onDocumentLoadSuccess({ numPages }: { numPages: number }): void {
    setNumPages(numPages);
  }

  function nextPage() {
    setPageNumber((v) => ++v);
  }

  function prevPage() {
    setPageNumber((v) => --v);
  }

  return (
    <div style={{ width: "100%", height: "100%" }}>
      <button onClick={prevPage} disabled={pageNumber <= 1}>
        Previous
      button>
      <button onClick={nextPage} disabled={pageNumber >= (numPages ?? -1)}>
        Next
      button>
      <Document
        file={src}
        onLoadSuccess={onDocumentLoadSuccess}
        className="my-react-pdf"
      >
        <Page pageNumber={pageNumber} />
      Document>
      <p>
        Page {pageNumber} of {numPages}
      p>
    div>
  );
}