این وبلاگ در مورد نحوه نمایش فایل PDF در برنامه Next.js صحبت می کند.
پیش نیازها
1. با دستور زیر یک پروژه Next.js ایجاد کنید
npx create-next-app@latest
دستورالعمل ها را دنبال کنید و یک پروژه Next.js جدید ایجاد خواهد شد.
2. پروژه Next.js را اجرا کنید
دستور زیر را در ترمینال تایپ کنید.
npm run dev
یک مرورگر وب مانند کروم را باز کنید و به http://localhost:3000 بروید. پروژه جدید Next.js خود را در حال اجرا خواهید دید.
اکنون از کامپوننت React PDF viewer برای نمایش فایل PDF در صفحه استفاده می کنیم.
برای شروع می توانید به این مستندات مراجعه کنید: شروع به کار — React PDF Viewer
مراحل استفاده از React PDF Viewer:
1. چند بسته نصب کنید
npm install pdfjs-dist@3.4.120
npm install @react-pdf-viewer/core@3.12.0
2. کد اصلی را کپی کنید
به این صفحه بروید و کد را در آن قرار دهید page.js داخل پروژه
import { Viewer, Worker } from "@react-pdf-viewer/core";
export default function Home() {
return (
);
}
3. پروژه را اجرا کنید
به احتمال زیاد با خطا مواجه خواهید شد.
این یک خطای بسیار رایج در Next.js در مورد استفاده از اجزای مشتری است.
اساساً فقط می گوید که مؤلفه React PDF Viewer از کدهایی استفاده می کند که فقط روی مؤلفه های مشتری کار می کند و نه مؤلفه های سرور.
4. خطای سرور را برطرف کنید
کاری که باید انجام دهید این است که فقط تایپ کنید “use client” در بالای صفحه شما
حالا، کد کلی این می شود
5. پروژه را دوباره اجرا کنید
حال با خطای دیگری مواجه خواهید شد.
این خطا زمانی رخ می دهد که در نسخه های worker و the عدم تطابق وجود داشته باشد pdfjs-dist بسته بندی
برای رفع این مشکل، فقط نسخه را تغییر دهید pdfjs-dist درون workerUrl به 3.4.120.
اگر اکنون اجرا کنید، پی دی اف در حال نمایش در صفحه را خواهید دید.
اما دست نگه دار! یه چیز عجیبی هست
به سمت راست صفحه نگاه کنید، پس زمینه سیاهی وجود دارد که عجیب به نظر می رسد.
6. کپی سبک ها
برای درست کردن استایل، استایل ها را از این صفحه کپی و پیست کنید
// Import the styles provided by the react-pdf-viewer packages
import "@react-pdf-viewer/default-layout/lib/styles/index.css";
import "@react-pdf-viewer/core/lib/styles/index.css";
اکنون با یک خطای دیگر مواجه خواهید شد:
Module not found: Error: Can't resolve '@react-pdf-viewer/default-layout/lib/styles/index.css'
برای حل این مشکل، این بسته را نصب کنید:
npm install @react-pdf-viewer/default-layout
اکنون، وابستگی های نهایی هستند
7. پروژه را برای آخرین بار اجرا کنید
پس از اجرای پروژه در حال حاضر، PDF در صفحه کامل نمایش داده می شود.
کد نهایی
"use client";
import { Viewer, Worker } from "@react-pdf-viewer/core";
import "@react-pdf-viewer/default-layout/lib/styles/index.css";
import "@react-pdf-viewer/core/lib/styles/index.css";
export default function Home() {
return (
);
}
نتیجه
در این پست وبلاگ، دیدیم که چگونه می توانید پیش نمایش PDF را در یک صفحه در برنامه Nextjs نمایش دهید.
بیشتر بخوانید:
