21 | );
22 | }
23 |
24 | export default App;
25 |
--------------------------------------------------------------------------------
/src/assets/react.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/PDF.jsx:
--------------------------------------------------------------------------------
1 | import {
2 | Document,
3 | Text,
4 | Page,
5 | StyleSheet,
6 | Image,
7 | View,
8 | } from "@react-pdf/renderer";
9 | import nextLogo from "../nextjslogo.png";
10 |
11 | const styles = StyleSheet.create({
12 | page: {
13 | backgroundColor: "#E4E4E4",
14 | padding: 30,
15 | },
16 | title: {
17 | fontSize: 24,
18 | textAlign: "center",
19 | fontWeight: "bold",
20 | },
21 | section: {
22 | display: "flex",
23 | flexDirection: "row",
24 | margin: 10,
25 | padding: 10,
26 | },
27 | parragraph: {
28 | fontSize: 12,
29 | textAlign: "justify",
30 | lineHeight: 1.5,
31 | margin: 10,
32 | },
33 | pageNumber: {
34 | position: "absolute",
35 | fontSize: 12,
36 | bottom: 30,
37 | left: 0,
38 | right: 0,
39 | textAlign: "center",
40 | color: "grey",
41 | }
42 | });
43 |
44 | function PDF() {
45 | return (
46 |
47 |
48 | Hello world
49 |
50 |
51 |
52 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aspernatur
53 | ad, rem iste similique voluptatem totam earum minima veritatis porro
54 | illum alias quasi maxime labore voluptatibus reiciendis ipsa,
55 | sapiente velit, facere quibusdam doloremque impedit expedita
56 | laudantium. Fugiat quod reprehenderit a vero, non in reiciendis iure
57 | doloribus id ipsa recusandae tempore, blanditiis quia totam
58 | temporibus voluptatum? Dolorem, repellat ducimus tenetur expedita
59 | natus deleniti quaerat magni itaque beatae animi nemo dolorum, modi
60 | accusantium cumque atque rerum nobis sit dolor non quae, quibusdam
61 | aliquam dolores delectus? Ipsam in perspiciatis id, temporibus dicta
62 | odio corporis adipisci, distinctio inventore dolor fugiat modi eos
63 | sint unde culpa.
64 |
65 |
66 |
67 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, totam explicabo quam officiis illo optio eum distinctio nihil in quidem delectus ex expedita voluptatibus. Est nobis ex beatae doloribus illum, autem maiores pariatur ea sed soluta nesciunt debitis corporis. Soluta, quis dolor deleniti quibusdam iste eveniet aliquid minus dolorem, molestias natus quam quo labore repellendus! Saepe magni doloribus suscipit quas consectetur velit facere dolorem culpa? Eveniet nihil quo accusamus. Numquam vero quos nobis veniam sequi, nihil earum voluptatibus aliquam id tempora non suscipit beatae, quo distinctio totam repellendus recusandae optio ex? Qui maxime veritatis quaerat esse nam repellendus sed, tempora, illum aliquam dolorum praesentium soluta excepturi fuga, minus consequatur suscipit. Cumque odio sapiente molestiae non, fugit culpa dolore aspernatur ea placeat suscipit reprehenderit rerum quia, fugiat ex, sequi sunt autem totam eius delectus! Eos beatae incidunt, recusandae rem possimus repellat architecto ipsa obcaecati reprehenderit quia magni dignissimos quae? Excepturi, sed culpa quo autem ipsum nobis hic recusandae modi facere optio provident odit corporis tempora voluptatum facilis earum qui laboriosam? Quisquam blanditiis consequuntur nam! Reprehenderit explicabo illo, mollitia non cumque sunt sapiente aut esse laborum quis excepturi saepe architecto ipsum repudiandae quasi beatae necessitatibus neque facere laboriosam fugit? Officia, illo officiis!
68 |
69 |
70 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi veritatis ea corrupti voluptatibus ratione? Eaque provident blanditiis nemo dolores tenetur facere maxime vitae. Aliquam sunt doloremque, ducimus amet, non deleniti perferendis voluptate fugit maiores maxime sit magnam ab soluta cum esse quod, neque aspernatur? Ut in dolores quia minima, voluptates esse tempora itaque doloremque expedita cumque maiores! Magnam amet non porro a voluptatem laborum soluta atque aspernatur veniam unde, iusto debitis et maxime possimus sequi ex quod perferendis voluptate repudiandae itaque mollitia quasi sit. Quibusdam mollitia enim nemo velit dolore quas molestias ratione sapiente reprehenderit, eos voluptates hic rem impedit, aspernatur atque incidunt. Sed, esse odit voluptates enim impedit ad culpa reprehenderit veniam aliquid voluptate repellat tempora. Ipsum mollitia doloremque ducimus accusantium debitis a maxime, quaerat laudantium aliquid earum consequuntur animi hic nisi similique deleniti praesentium harum sequi commodi facere reiciendis illo temporibus officiis amet! Hic libero animi facilis reprehenderit veritatis? Ab minus consectetur enim corporis deserunt consequatur adipisci sit eligendi fuga voluptatum reiciendis, natus pariatur sapiente praesentium omnis beatae cupiditate dolores nesciunt est distinctio facilis quaerat temporibus similique nisi. Veniam cum totam iusto, dignissimos voluptatem, aut recusandae tempore unde, praesentium officiis ipsa ad commodi nulla quasi repellat eveniet voluptate.
71 |
72 |
73 |
74 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi veritatis ea corrupti voluptatibus ratione? Eaque provident blanditiis nemo dolores tenetur facere maxime vitae. Aliquam sunt doloremque, ducimus amet, non deleniti perferendis voluptate fugit maiores maxime sit magnam ab soluta cum esse quod, neque aspernatur? Ut in dolores quia minima, voluptates esse tempora itaque doloremque expedita cumque maiores! Magnam amet non porro a voluptatem laborum soluta atque aspernatur veniam unde, iusto debitis et maxime possimus sequi ex quod perferendis voluptate repudiandae itaque mollitia quasi sit. Quibusdam mollitia enim nemo velit dolore quas molestias ratione sapiente reprehenderit, eos voluptates hic rem impedit, aspernatur atque incidunt. Sed, esse odit voluptates enim impedit ad culpa reprehenderit veniam aliquid voluptate repellat tempora. Ipsum mollitia doloremque ducimus accusantium debitis a maxime, quaerat laudantium aliquid earum consequuntur animi hic nisi similique deleniti praesentium harum sequi commodi facere reiciendis illo temporibus officiis amet! Hic libero animi facilis reprehenderit veritatis? Ab minus consectetur enim corporis deserunt consequatur adipisci sit eligendi fuga voluptatum reiciendis, natus pariatur sapiente praesentium omnis beatae cupiditate dolores nesciunt est distinctio facilis quaerat temporibus similique nisi. Veniam cum totam iusto, dignissimos voluptatem, aut recusandae tempore unde, praesentium officiis ipsa ad commodi nulla quasi repellat eveniet voluptate.
75 |
76 |
77 |
78 | `${pageNumber}/${totalPages}`} />
79 |
80 |
81 |
82 | );
83 | }
84 |
85 | export default PDF;
86 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fazt/react-pdf-tutorial/41575b0158e55e323cb9b82180804cdecf635a05/src/index.css
--------------------------------------------------------------------------------
/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import App from './App'
4 | import './index.css'
5 |
6 | ReactDOM.createRoot(document.getElementById('root')).render(
7 |
8 |
9 | ,
10 | )
11 |
--------------------------------------------------------------------------------
/src/nextjslogo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fazt/react-pdf-tutorial/41575b0158e55e323cb9b82180804cdecf635a05/src/nextjslogo.png
--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | })
8 |
--------------------------------------------------------------------------------