Assignment PDF Generator with HTML2Canvas and jsPDF

This project is a Next.js-based tool that generates a well-structured PDF file by capturing sections of a webpage using html2canvas and jsPDF. It is designed specifically for students who want to submit programming assignments in a uniform PDF format, featuring code, questions, and terminal outputs. The tool allows adding multiple questions, changing the code theme, and selecting the programming language.

📔 Table of Contents

• What It Does
• Motivation
• Features
• Technologies Used
• Setup Instructions
• Usage
• Customization
• License

What It Does

This project simplifies the process of creating assignment PDFs by enabling users to:

• Add multiple questions with corresponding code and terminal output.
• Capture and generate a PDF from dynamically rendered sections of the webpage.
• Customize the code's appearance by selecting different themes and programming languages.
• Automatically expand only the required sections (such as preview sections) for capturing and exclude unnecessary parts.

Motivation

Students, including myself and my batchmates, frequently face the challenge of submitting programming assignments in PDF format. The problem arises because each student creates PDFs in their own structure, making it difficult for professors to grade consistently. To solve this, I built a tool that standardizes the PDF format for assignments. This project ensures that everyone submits a well-organized PDF with a unified structure, making it easier for both students and professors.

Features

• Generate PDF from dynamically rendered questions, code, and terminal output sections of a webpage.
• Add multiple questions and include corresponding code snippets and output in one PDF.
• Change the code theme and select different programming languages for syntax highlighting.
• Excludes unnecessary sections during PDF generation.
• Utilizes html2canvas to capture the DOM and convert it to images.
• Uses jsPDF to combine images into a single PDF file with adjustable page sizes.

📷 Screenshots

🎥 Demo PDF

☕ Buy Me a Coffee

🚀 Follow Me

⚙️ Technologies Used

• Next.js: Server-side rendered React framework.
• React-Syntax-Highlighter: For syntax highlighting of code with customizable themes.
• html2canvas: Converts HTML elements to canvas.
• jsPDF: Creates PDFs from images and other content.
• TypeScript: Ensures type safety and enhanced IDE support.
• CSS Modules: For styling components.

🧰 Setup Instructions

1. Clone the Repository

   git clone https://github.com/idityaGE/Assignment-Code-to-PDF.git
   cd Assignment-Code-to-PDF

2. Install Dependencies

   Install the required dependencies using npm or yarn:

   npm install

   Or with yarn:

   yarn install

3. Run the Application

   To start the application in development mode:

   npm start

   The app will be available at http://localhost:3000.

4. Build for Production

   To create a production build of the application:

   npm run build
   npm run start

📃 Usage

1. Add Questions and Code:
   The tool allows you to input multiple questions, write code for each question, and show the terminal output. You can customize the code's theme and language to suit your preferences.

2. Preview and Generate PDF:

   • Clicking the "Generate PDF" button will expand the relevant sections and capture each part of the webpage as a PNG image.
   • The PNG images are then combined into a PDF file, with each page sized according to the captured content.
   • The final PDF is downloaded with the filename assignment.pdf.

🙌 Contribute

You might encounter some bugs while using this app. You are more than welcome to contribute. Just submit changes via pull request and I will review them before merging. Make sure you follow community guidelines.

🔧 Customization

Modify PDF Layout

• You can customize the layout of the generated PDF, including:
  • Margins: Adjust the imgX and imgY values in the handleGeneratePDF() function to change the positioning of images on the PDF pages.
  • Page Size: The page size is dynamically set based on the content size. If you want a fixed page size, modify the jsPDF constructor to use a fixed dimension.

Capture Additional Sections

• To include additional sections outside of the question/code/output structure, adjust the document.querySelector() calls to target different DOM elements.
• If needed, you can modify the selector logic to include or exclude specific content based on your preferences.

⭐ Give A Star

You can also give this repository a star to show more people and they can use this repository.

🌟 Star History

License

This project is licensed under the MIT License. See the LICENSE file for more details.

(back to top)