PDF Generation and Download
Relevant source files
The following files were used as context for generating this wiki page:The PDF Generation and Download system provides two core functionalities within the Resume Enhancer application. First, it allows users to download their AI-enhanced resume content as a newly generated, professional-looking PDF document. Second, it includes a proxy service to securely fetch and display the user's original uploaded PDF for side-by-side comparison in the enhancement interface.
This document outlines the architecture and data flow for both generating new PDFs and proxying existing ones. It also touches upon the initial processing of uploaded PDFs, as the extracted text is the basis for the final generated document.
PDF-Related Libraries
The system relies on several key npm packages for handling PDF documents at different stages of the workflow.
| Library | Version | Purpose | Source File |
|---|---|---|---|
jspdf | ^3.0.3 | Generates new PDF documents from text on the server-side for downloading enhanced resumes. | package.json:101 |
pdf-parse | 1.1.1 | Parses uploaded PDF files on the server to extract raw text content for AI enhancement. | package.json:111 |
react-pdf | ^10.2.0 | Renders PDF documents on the client-side for previewing the original resume. | package.json:121 |
pdfjs-dist | ^5.4.296 | The core PDF rendering engine used by react-pdf. A worker is configured in the UI. | package.json:112 |
Sources: package.json:101, 111, 112, 121, enhance/[id]/_components/enhance-interface.tsx:34-36
Enhanced Resume PDF Generation
This feature is responsible for converting the AI-enhanced text content into a downloadable PDF file. The process is initiated by the user from the enhancement interface and handled by a dedicated API endpoint.
Sources: api/download-resume/[id]/route.ts, enhance/[id]/_components/enhance-interface.tsx:300-325
API Endpoint: GET /api/download-resume/[id]
This endpoint generates and returns a PDF document based on a specific ResumeEnhancement record.
| Parameter | Type | Location | Description |
|---|---|---|---|
id | string | URL Path | The ID of the ResumeEnhancement record to be downloaded. |
Sources: api/download-resume/[id]/route.ts:11-14
Generation Flow
The following sequence diagram illustrates the process of generating and downloading an enhanced resume.
This diagram shows the user initiating a download, the frontend calling the API, the API fetching data, using jsPDF to create the document, and returning it to the user.
Sources: enhance/[id]/_components/enhance-interface.tsx:300-306, api/download-resume/[id]/route.ts:15-61
Implementation Details
The backend route uses the jspdf library to construct the PDF.
- It authenticates the user and fetches the specified
ResumeEnhancementfrom the database. - A new
jsPDFdocument is instantiated. - A title ("Enhanced Resume"), the enhancement type, and the generation date are added to the document.
- The
enhancedContenttext is split into lines that fit the page width and added to the document. - The final document is converted to a
Buffer. - A
NextResponseis returned with the buffer,Content-Type: application/pdf, and aContent-Dispositionheader set toattachmentto prompt a download.
Sources: api/download-resume/[id]/route.ts:24-54
Original PDF Display (Proxy)
To display the original uploaded PDF in the UI for comparison, a backend proxy is used. This is necessary to bypass potential CORS issues when fetching files directly from cloud storage (Supabase Storage) in the browser.
Sources: api/proxy-pdf/[id]/route.ts, enhance/[id]/_components/enhance-interface.tsx:168-171
API Endpoint: GET /api/proxy-pdf/[id]
This endpoint fetches a resume file from Supabase Storage and streams it back to the client.
| Parameter | Type | Location | Description |
|---|---|---|---|
id | string | URL Path | The ID of the Resume record whose original file should be fetched. |
Sources: api/proxy-pdf/[id]/route.ts:10-12
Proxy Flow
The following sequence diagram shows how the original PDF is fetched and displayed.
This diagram illustrates the frontend requesting the PDF via the proxy, which then securely fetches it from Supabase Storage and returns it for rendering.
Sources: enhance/[id]/_components/enhance-interface.tsx:168-171, api/proxy-pdf/[id]/route.ts:13-37
Implementation Details
- The
EnhanceInterfacecomponent, upon loading, calls the/api/proxy-pdf/[id]endpoint if the resume file type is 'pdf'. - The API route authenticates the user and finds the
Resumerecord to get itscloudStoragePath. - It uses the
downloadFileFromSupabaseutility to fetch the file blob from storage. - The blob is converted to a buffer.
- A
NextResponseis returned with the buffer,Content-Type: application/pdf, and aContent-Dispositionofinline, which tells the browser to display the file rather than download it. - On the client,
react-pdfandpdfjs-distare used to render the PDF received from the proxy.
Sources: api/proxy-pdf/[id]/route.ts:22-37, enhance/[id]/_components/enhance-interface.tsx:168-171, 442-466
PDF Text Extraction on Upload
While not a direct part of generation or download, the initial parsing of uploaded PDFs is a critical prerequisite. The text extracted during this step becomes the originalContent that is later enhanced by AI and used to generate the final PDF.
Sources: api/resumes/upload/route.ts
Upload and Parsing Flow
The following diagram shows the process of handling a PDF file upload.
This flowchart outlines the steps from file upload to text extraction and storage.
Sources: api/resumes/upload/route.ts:50-107
Implementation Details
The POST /api/resumes/upload route uses the pdf-parse library to process uploaded PDF files. The extractPdfText helper function takes the file buffer and returns the extracted text content. This text is then stored in the originalContent field of the Resume table in the database, making it available for the enhancement process.
Sources: api/resumes/upload/route.ts:30-37, 81-83
Summary
The application's PDF handling capabilities are threefold: parsing uploaded PDFs for their text content using pdf-parse, generating new PDFs from enhanced text using jspdf, and securely proxying original PDFs from storage for in-browser viewing with react-pdf. These features work together to create a seamless user experience for comparing, enhancing, and exporting resumes.