PDF Merger – Merge, Rotate, Organize, Delete & Preview PDF – React Next.js Web App

Introduction

In today's digital age, managing and merging PDF files has become an essential task for both personal and professional use. Whether you're a student, a business professional, or a developer, having the ability to merge, rotate, organize, delete, and preview PDF files can save you a significant amount of time and effort.

In this tutorial, we will be creating a React Next.js web app that allows users to perform these tasks with ease. We will be using a PDF merger library to handle the merging and rotation of PDF files, and will also implement features to delete and preview PDF files.

Step 1: Create a new React Next.js project

To get started, create a new React Next.js project by running the following command in your terminal:

npx create-next-app pdf-merger

This will create a new project called pdf-merger with the basic structure and files needed for a React Next.js app.

Step 2: Install required dependencies

In this project, we will need to install the following dependencies:

• react-pdf: a library for working with PDF files in React
• file-saver: a library for saving files to the user's computer
• pdf-lib: a library for merging and manipulating PDF files

Run the following command to install these dependencies:

npm install react-pdf file-saver pdf-lib

Step 3: Create the PDF merger component

Create a new file called PdfMerger.js in the components directory of your project. This file will contain the logic for merging, rotating, organizing, deleting, and previewing PDF files.

In this file, import the PdfFile component from react-pdf and create a new component called PdfMerger.

import { PdfFile } from 'react-pdf';

const PdfMerger = () => {
  // logic for merging, rotating, organizing, deleting, and previewing PDF files
  return <div>PDF Merger</div>;
};

export default PdfMerger;

Step 4: Implement PDF merging functionality

To implement PDF merging functionality, we will use the pdf-lib library. This library allows us to create, manipulate, and merge PDF files.

Create a new function called mergePdfFiles that takes an array of PDF file URLs as an argument and returns a merged PDF file.

import { Document } from 'pdf-lib';

const mergePdfFiles = async (pdfFiles) => {
  const mergedPdf = await Document.create();
  for (const pdfFile of pdfFiles) {
    const pdf = await mergedPdf.addPage(pdfFile);
  }
  return mergedPdf;
};

Step 5: Implement PDF rotation functionality

To implement PDF rotation functionality, we will use the pdf-lib library. This library allows us to rotate PDF pages.

Create a new function called rotatePdfFile that takes a PDF file URL and a rotation angle as arguments and returns the rotated PDF file.

const rotatePdfFile = async (pdfFile, angle) => {
  const pdf = await pdfFile.get();
  const rotatedPdf = await pdf.rotate(angle);
  return rotatedPdf;
};

Step 6: Implement PDF organization functionality

To implement PDF organization functionality, we will create a new component called PdfOrganizer that allows users to drag and drop PDF files into a specific order.

Create a new file called PdfOrganizer.js in the components directory of your project.

import React, { useState } from 'react';
import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';

const PdfOrganizer = () => {
  const [pdfFiles, setPdfFiles] = useState([]);
  const [draggingPdf, setDraggingPdf] = useState(null);

  const handleDragStart = (event) => {
    setDraggingPdf(event.target);
  };

  const handleDragEnd = (event) => {
    setDraggingPdf(null);
  };

  const handleDrop = (event) => {
    const newPdfFiles = [...pdfFiles];
    newPdfFiles.splice(event.index, 0, draggingPdf);
    setPdfFiles(newPdfFiles);
  };

  return (
    <div>
      <Droppable droppableId="pdf-droppable">
        {(provided) => (
          <div
            ref={provided.innerRef}
            {...provided.droppableProps}
          >
            {pdfFiles.map((pdfFile, index) => (
              <Draggable key={pdfFile.id} index={index}>
                {(provided) => (
                  <div
                    ref={provided.innerRef}
                    {...provided.draggableProps}
                  >
                    {pdfFile.name}
                  </div>
                )}
              </Draggable>
            ))}
            {provided.placeholder}
          </div>
        )}
      </Droppable>
    </div>
  );
};

export default PdfOrganizer;

Step 7: Implement PDF deletion functionality

To implement PDF deletion functionality, we will create a new function called deletePdfFile that takes a PDF file URL as an argument and returns a boolean indicating whether the file was deleted successfully.

Create a new function called deletePdfFile in the PdfMerger component.

const deletePdfFile = async (pdfFile) => {
  try {
    await pdfFile.remove();
    return true;
  } catch (error) {
    return false;
  }
};

Step 8: Implement PDF preview functionality

To implement PDF preview functionality, we will use the react-pdf library. This library allows us to display PDF files in a React component.

Create a new component called PdfPreview that takes a PDF file URL as an argument and returns a PDF preview component.

import { PdfFile } from 'react-pdf';

const PdfPreview = ({ pdfFile }) => {
  return <PdfFile src={pdfFile} />;
};

export default PdfPreview;

Step 9: Put it all together

Now that we have implemented all the required functionality, let's put it all together in the PdfMerger component.

import React, { useState } from 'react';
import { mergePdfFiles, rotatePdfFile, deletePdfFile } from './PdfMerger';
import { PdfOrganizer } from './PdfOrganizer';
import { PdfPreview } from './PdfPreview';

const PdfMerger = () => {
  const [pdfFiles, setPdfFiles] = useState([]);
  const [mergedPdf, setMergedPdf] = useState(null);
  const [rotatedPdf, setRotatedPdf] = useState(null);

  const handleMergePdfFiles = async () => {
    const mergedPdf = await mergePdfFiles(pdfFiles);
    setMergedPdf(mergedPdf);
  };

  const handleRotatePdfFile = async (pdfFile, angle) => {
    const rotatedPdf = await rotatePdfFile(pdfFile, angle);
    setRotatedPdf(rotatedPdf);
  };

  const handleDeletePdfFile = async (pdfFile) => {
    const deleted = await deletePdfFile(pdfFile);
    if (deleted) {
      setPdfFiles(pdfFiles.filter((file) => file!== pdfFile));
    }
  };

  return (
    <div>
      <PdfOrganizer pdfFiles={pdfFiles} onDrop={setPdfFiles} />
      <button onClick={handleMergePdfFiles}>Merge PDF Files</button>
      <button onClick={() => handleRotatePdfFile(pdfFiles[0], 90)}>Rotate PDF File</button>
      <button onClick={() => handleDeletePdfFile(pdfFiles[0])}>Delete PDF File</button>
      {mergedPdf && (
        <PdfPreview pdfFile={mergedPdf} />
      )}
      {rotatedPdf && (
        <PdfPreview pdfFile={rotatedPdf} />
      )}
    </div>
  );
};

export default PdfMerger;

That's it! We have now created a React Next.js web app that allows users to merge, rotate, organize, delete, and preview PDF files.

You can run the app by running the following command in your terminal:

npm run dev

This will start the development server and you can access the app by visiting http://localhost:3000 in your web browser.

I hope this tutorial has been helpful in creating a React Next.js web app that meets your PDF merging and management needs.