- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Creating a PDF in React JS using plain CSS and HTML
In this article, we will see how to create a PDF using React JS. PDFs are versatile document formats which are used for various purposes like reporting, data sharing, data storage, etc. It is really a great help if we can a PDF in React through simple CSS.
Example
First create a React app −
npx create-react-app pdfviewer
Install the react-pdf package
npm i @react-pdf/renderer
We will use this package to create a PDF inside our React frontend using DOM elements and CSS.
Insert the following piece of code in in App.js −
import React from "react"; import { Document, Page, Text, View, StyleSheet, PDFViewer, } from "@react-pdf/renderer"; // Create styles const styles = StyleSheet.create({ page: { flexDirection: "column", backgroundColor: "green", }, title: { margin: 20, fontSize: 25, textAlign: 'center', backgroundColor: '#E4E4E4', textTransform: 'uppercase', }, section: { margin: 10, padding: 10, fontSize:25, }, }); // Create Document Component const MyDocument = () => ( <Document> <Page size="A4" style={styles.page}> <View style={styles.title}> <Text>Welcome to Tutorialspoint...</Text> </View> <View style={styles.section}> <Text>Create PDF using React</Text> </View> <View style={styles.section}> <Text>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididuntut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</Text> </View> </Page> </Document> ); export default function App() { return ( <PDFViewer> <MyDocument /> </PDFViewer> ); }
Explanation
Let us understand this code in brief −
<Document> defines that we are going to create a PDF,
<Page> defines a single page of PDF, and
The content inside <Page> will be the content of a single page of PDF.
You can add any type of style; it is all up to you. Better design will make a better PDF.
Output
On execution, it will produce the following output −
- Related Articles
- Creating a Particle Animation in React JS
- Creating a Customizable Modal in React JS
- Creating a Map in React JS without using third-party API
- Creating a Rich Text Editor in React JS
- Creating animated loading skeletons in React JS
- Creating an Airbnb Rheostat Slider in React JS
- Creating a QR Code of a link in React JS
- Creating an Excel-like data grid in React JS
- Creating a Plane in React using React-Three-Fiber
- Creating a Simple Calculator using HTML, CSS, and JavaScript
- Making a tilt-on-hover effect in React JS without CSS
- Making a timer in React JS using reactspring animation
- Creating Animated Counter using HTML, CSS, and JavaScript
- Creating a parallax scrolling effect in React using react-spring.mp4
- Creating a Sky shader in React using React-Three-Fiber
