Build a React.js PDF Editor to Add Text & Images in Browser Using react-pdf Library in Javascript

App.jsx

import React, { useState } from "react";
import { Document, Page, Text, View, Image, StyleSheet, PDFDownloadLink } from "@react-pdf/renderer";
import { Container, Row, Col, Form, Button } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";

// Define styles for the PDF document
const styles = StyleSheet.create({
  page: {
    padding: 30,
    backgroundColor: "#f8f9fa",
  },
  text: {
    fontSize: 12,
    marginBottom: 5,
  },
  image: {
    width: "100%",
    height: "100%",
  },
});

// Create PDF Document Component for Text
const TextDocument = ({ content }) => {
  const linesPerPage = 40;
  const lines = content.split("\n");
  const pages = [];

  for (let i = 0; i < lines.length; i += linesPerPage) {
    pages.push(lines.slice(i, i + linesPerPage));
  }

  return (
    <Document>
      {pages.map((pageLines, index) => (
        <Page key={index} size="A4" style={styles.page}>
          {pageLines.map((line, lineIndex) => (
            <Text key={lineIndex} style={styles.text}>
              {line}
            </Text>
          ))}
        </Page>
      ))}
    </Document>
  );
};

// Create PDF Document Component for Images
const ImageDocument = ({ images }) => (
  <Document>
    {images.map((img, index) => (
      <Page key={index} size="A4" style={styles.page}>
        <Image src={img} style={styles.image} />
      </Page>
    ))}
  </Document>
);

const App = () => {
  const [mode, setMode] = useState("text"); // "text" or "images"
  const [textInput, setTextInput] = useState("");
  const [images, setImages] = useState([]);

  // Handle image file selection
  const handleImageUpload = (e) => {
    const files = Array.from(e.target.files);
    const imageUrls = files.map((file) => URL.createObjectURL(file));
    setImages(imageUrls);
  };

  return (
    <Container>
      <Row className="my-4">
        <Col>
          <h3>Text/Image to PDF Converter</h3>
          <Form.Group>
            <Form.Label>Select Mode</Form.Label>
            <Form.Control
              as="select"
              value={mode}
              onChange={(e) => setMode(e.target.value)}
            >
              <option value="text">Convert Text to PDF</option>
              <option value="images">Convert Images to PDF</option>
            </Form.Control>
          </Form.Group>
        </Col>
      </Row>

      {mode === "text" ? (
        // Text input form
        <Row>
          <Col>
            <Form.Group controlId="textInput">
              <Form.Label>Enter Text</Form.Label>
              <Form.Control
                as="textarea"
                rows={10}
                value={textInput}
                onChange={(e) => setTextInput(e.target.value)}
                placeholder="Type or paste your text here..."
              />
            </Form.Group>
          </Col>
        </Row>
      ) : (
        // Image upload form
        <Row>
          <Col>
            <Form.Group controlId="imageInput">
              <Form.Label>Select Images</Form.Label>
              <Form.Control
                type="file"
                multiple
                accept="image/*"
                onChange={handleImageUpload}
              />
            </Form.Group>
            <Row>
              {images.map((img, index) => (
                <Col key={index} xs={6} md={3} className="mb-3">
                  <img src={img} alt={`Selected ${index}`} width="100%" />
                </Col>
              ))}
            </Row>
          </Col>
        </Row>
      )}

      <Row className="mt-4">
        <Col>
          {(mode === "text" && textInput) || (mode === "images" && images.length > 0) ? (
            <PDFDownloadLink
              document={
                mode === "text" ? (
                  <TextDocument content={textInput} />
                ) : (
                  <ImageDocument images={images} />
                )
              }
              fileName={mode === "text" ? "text_document.pdf" : "image_document.pdf"}
            >
              {({ loading }) =>
                loading ? (
                  "Preparing document..."
                ) : (
                  <Button variant="primary">Download PDF</Button>
                )
              }
            </PDFDownloadLink>
          ) : null}
        </Col>
      </Row>
    </Container>
  );
};

export default App;

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

import React, { useState } from "react";

import { Document, Page, Text, View, Image, StyleSheet, PDFDownloadLink } from "@react-pdf/renderer";

import { Container, Row, Col, Form, Button } from "react-bootstrap";

import "bootstrap/dist/css/bootstrap.min.css";

// Define styles for the PDF document

const styles = StyleSheet.create({

page: {

padding: 30,

backgroundColor: "#f8f9fa",

text: {

fontSize: 12,

marginBottom: 5,

image: {

width: "100%",

height: "100%",

});

// Create PDF Document Component for Text

const TextDocument = ({ content }) => {

const linesPerPage = 40;

const lines = content.split("\n");

const pages = [];

for (let i = 0; i < lines.length; i += linesPerPage) {

pages.push(lines.slice(i, i + linesPerPage));

}

return (

{pages.map((pageLines, index) => (

{pageLines.map((line, lineIndex) => (

{line}

</Text>

))}

</Page>

))}

</Document>

);

};

// Create PDF Document Component for Images

const ImageDocument = ({ images }) => (

{images.map((img, index) => (

</Page>

))}

</Document>

);

const App = () => {

const [mode, setMode] = useState("text"); // "text" or "images"

const [textInput, setTextInput] = useState("");

const [images, setImages] = useState([]);

// Handle image file selection

const handleImageUpload = (e) => {

const files = Array.from(e.target.files);

const imageUrls = files.map((file) => URL.createObjectURL(file));

setImages(imageUrls);

};

return (

<Col>

<h3>Text/Image to PDF Converter</h3>

<Form.Group>

<Form.Label>Select Mode</Form.Label>

<Form.Control

as="select"

value={mode}

onChange={(e) => setMode(e.target.value)}

<option value="text">Convert Text to PDF</option>

<option value="images">Convert Images to PDF</option>

</Form.Control>

</Form.Group>

</Col>

</Row>

{mode === "text" ? (

// Text input form

<Row>

<Col>

<Form.Group controlId="textInput">

<Form.Label>Enter Text</Form.Label>

<Form.Control

as="textarea"

rows={10}

value={textInput}

onChange={(e) => setTextInput(e.target.value)}

placeholder="Type or paste your text here..."

</Form.Group>

</Col>

</Row>

) : (

// Image upload form

<Row>

<Col>

<Form.Group controlId="imageInput">

<Form.Label>Select Images</Form.Label>

<Form.Control

type="file"

multiple

accept="image/*"

onChange={handleImageUpload}

</Form.Group>

<Row>

{images.map((img, index) => (

</Col>

))}

</Row>

</Col>

</Row>

)}

<Col>

{(mode === "text" && textInput) || (mode === "images" && images.length > 0) ? (

<PDFDownloadLink

document={

mode === "text" ? (

) : (

)

}

fileName={mode === "text" ? "text_document.pdf" : "image_document.pdf"}

{({ loading }) =>

loading ? (

"Preparing document..."

) : (

<Button variant="primary">Download PDF</Button>

)

}

</PDFDownloadLink>

) : null}

</Col>

</Row>

</Container>

);

};

export default App;

Build a React.js PDF Editor to Add Text & Images in Browser Using react-pdf Library in Javascript

Comments

Leave a Reply Cancel reply

Archives