我正在尝试在 React 中渲染多页 pdf 文档。 pdf 文件位于 src/assets 中。 jsx 文件位于名为 Hero.jsx 的 src 文件夹中，用于使用 css 设置样式。 pdf 文件应完全垂直呈现。 我尝试使用react-pdf，但似乎有些东西搞砸了并且没有渲染。 如果有人有一个脚本，我将非常感激。 该网站到目前为止仅适用于客户端。
import React, { useState } from 'react';
import { Worker } from '@react-pdf-viewer/core';
import { Viewer } from '@react-pdf-viewer/core';
import './Hero.css';
import myImage from './assets/profilepicture.png';
import myPDF from './assets/example.pdf';
const Hero = () => {
return (
<div className='hero1'>
<div className='introduction'>
<div className='intr1'>
Üdvözlünk a MathPlus világában!
</div>
<div className='intr2'>
A MathPlus célja, hogy a matematikát és a kapcsolódó tudományterületeket mindenki számára elérhetővé és érthetővé tegye. Legyen szó érettségi felkészülésről, egyetemi vizsgákról vagy a data science világába való elmélyülésről, nálunk megtalálod azokat az online anyagokat, amelyekkel magabiztosan vághatsz neki a kihívásoknak.
</div>
<div className='intr2'>
Modern és felhasználóbarát platformunkon lépésről lépésre vezetünk végig a szükséges tananyagokon, hogy a lehető legjobban felkészülhess. Tanulj a saját tempódban, bárhol és bármikor! Nálunk nem csak megérted a matekot, de meg is szereted.
</div>
</div>
<div className='details'>
<div className='intr1'>
Kurzusok
</div>
<div className='intr2'>
A MathPlus küldetése, hogy a matematika és a kapcsolódó tudományterületek tanulását mindenki számára elérhetővé, érthetővé és élvezetessé tegye. Akár középiskolai érettségire készülsz, egyetemi vizsgákra tanulsz, vagy a data science területén szeretnél fejlődni, platformunkon olyan online kurzusokat találsz, amelyek támogatnak céljaid elérésében.
</div>
<div className='details-container'>
<div className='click-container'>
<h1 className='dch1'>
Középiskola
</h1>
<div className='button-group'>
<button className="school-button">Közép Matematika Érettségi</button>
<button className="school-button">Emelt Matematika Érettségi</button>
<button className="school-button">Közép Informatika Érettségi</button>
</div>
</div>
<div className='dchs'></div>
<div className='click-container'>
<h1 className='dch1'>
Egyetem
</h1>
<div className='button-group'>
<button className="school-button">Analízis</button>
<button className="school-button">Valószínűség számítás</button>
<button className="school-button">Lineáris Algebra</button>
<button className="school-button">Statisztika</button>
<button className="school-button">Ökonometria</button>
</div>
</div>
<div className='dchs'></div>
<div className='click-container'>
<h1 className='dch1'>
Programozás
</h1>
<div className='button-group'>
<button className="school-button">Bevezetés</button>
<button className="school-button">Machine Learning</button>
<button className="school-button">AI</button>
</div>
</div>
</div>
</div>
<div className='about'>
<div className='intr1'>
Bemutatkozás
</div>
<div className='about2'>
<div>
<img src={myImage} className='profile-picture'/>
</div>
<div className='intr2'>
A nevem Horváth Máté, a MathPlus alapítója. Tanulmányaim során a Corvinus Egyetemen sok olyan emberrel találkoztam, akik nehezen vették az akadályokat akár egyetemi tárgyaknál vagy érettséginél. Ebből az okból indítottam el ezt az oldalt, hogy a tanulók, akik el akarják érni a céljaikat tudjanak is tenni érte, ráadásul könnyebben. Az oldal anyagai az elvárásokhoz igazítva lettek összeállítva, ezzel is növelve a felkészülés hatékonyságát. Minden kurzus tartalmaz egy ingyenes demó verziót, mely egy összefoglalója a kurzus anyagának és stílusának. Kifejezetten ajánlom a demo verzió használatát az előfizetés megkezdése előtt. Sikeres felkészülést!
</div>
</div>
</div>
<div style={{ height: '600px' }}>
<Worker workerUrl={`https://unpkg.com/[email protected]/build/pdf.worker.min.js`}>
<Viewer fileUrl="/assets/example.pdf" />
</Worker>
</div>
</div>
);
};
export default Hero
我希望这能回答您的问题。请随意发表评论。 在 React 组件中渲染多个 PDF 文件可以使用 React-pdf 等库或直接使用 PDF.js 来完成。
安装react-pdf npm install @react-pdf/renderer 或 yarn add @react-pdf/renderer
创建组件来渲染多个 PDF
调整页数 在下面的示例中，Array.from(new Array(2)) 行假定每个 PDF 有 2 页。您可能希望动态确定每个 PDF 的页数。不幸的是，react-pdf 没有提供一种简单的方法来同步获取总页数，因此如果需要，您可能需要单独加载 PDF 来计算其页数。
或者你可以使用react-router-dom制作多页面SPA
import React from 'react';
import { Document, Page, pdfjs } from 'react-pdf';
// Import the worker script for PDF.js
pdfjs.GlobalWorkerOptions.workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
const MultiplePDFs = ({ pdfFiles }) => {
return (
<div>
{pdfFiles.map((file, index) => (
<div key={index} style={{ marginBottom: '20px' }}>
<h3>Document {index + 1}</h3>
<Document file={file}>
{Array.from(new Array(2)).map((_, pageIndex) => ( // Adjust number of pages if known
<Page key={pageIndex} pageNumber={pageIndex + 1} />
))}
</Document>
</div>
))}
</div>
);
};
// Sample usage
const App = () => {
const pdfFiles = [
'path/to/file1.pdf',
'path/to/file2.pdf',
'path/to/file3.pdf',
];
return (
<div>
<h1>Multiple PDF Renderer</h1>
<MultiplePDFs pdfFiles={pdfFiles} />
</div>
);
};
export default App;