docs: add comprehensive user-oriented PDF export guide
Add detailed, user-friendly documentation for PDF export feature in CUSTOMIZATION.md to help template users understand and customize PDF generation. New Documentation: - Clear explanation of how PDF export works - All 4 parameters (lang, length, icons, version) with examples - Filename convention and patterns - Frontend integration examples (HTML, HTMX) - Tips for best PDF results - Troubleshooting common issues - Advanced customization guidance Audience: - Template users who want to customize their own CV - Non-technical users who need to understand PDF options - Developers who want to extend PDF functionality Examples include: - Complete URL patterns for all parameter combinations - Code snippets for frontend buttons - CSS customizations for print appearance - Common troubleshooting solutions
This commit is contained in:
+148
-26
@@ -1148,44 +1148,166 @@ func LoadCV(lang string) (*CV, error) {
|
|||||||
{{end}}
|
{{end}}
|
||||||
```
|
```
|
||||||
|
|
||||||
### Custom PDF Styles
|
### PDF Export Customization
|
||||||
|
|
||||||
PDF generation uses same templates but renders with Chromium. Customize print styles:
|
The CV site includes a powerful PDF export feature with multiple customization options. Users can download their CV as a PDF with different configurations.
|
||||||
|
|
||||||
|
#### How PDF Export Works
|
||||||
|
|
||||||
|
When a user clicks "Download PDF", the server:
|
||||||
|
1. Takes a snapshot of the CV webpage using headless Chrome
|
||||||
|
2. Applies special print-optimized CSS styles (`@media print`)
|
||||||
|
3. Generates a professional PDF document
|
||||||
|
4. Downloads it with a descriptive filename
|
||||||
|
|
||||||
|
#### PDF Export Parameters
|
||||||
|
|
||||||
|
The PDF export endpoint accepts 4 parameters that let users customize their PDF:
|
||||||
|
|
||||||
|
**1. Language (`lang`)**
|
||||||
|
- `en` - English version
|
||||||
|
- `es` - Spanish version
|
||||||
|
- Default: `en`
|
||||||
|
- Example: `/export/pdf?lang=es`
|
||||||
|
|
||||||
|
**2. Length (`length`)**
|
||||||
|
- `short` - Concise version with summaries only
|
||||||
|
- `long` - Detailed version with full descriptions and bullet points
|
||||||
|
- Default: `short`
|
||||||
|
- Example: `/export/pdf?length=long`
|
||||||
|
|
||||||
|
**3. Icons (`icons`)**
|
||||||
|
- `show` - Display all company logos, project icons, and visual elements
|
||||||
|
- `hide` - Text-only version without icons (more formal)
|
||||||
|
- Default: `show`
|
||||||
|
- Example: `/export/pdf?icons=hide`
|
||||||
|
|
||||||
|
**4. Version (`version`)**
|
||||||
|
- `extended` - Full styling with colors and visual elements
|
||||||
|
- `clean` - Minimal, print-optimized design
|
||||||
|
- Default: `extended`
|
||||||
|
- Example: `/export/pdf?version=clean`
|
||||||
|
|
||||||
|
#### Example URLs
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Short, clean English CV (most compact)
|
||||||
|
http://localhost:1999/export/pdf?lang=en&length=short&version=clean
|
||||||
|
|
||||||
|
# Long, detailed Spanish CV with all icons
|
||||||
|
http://localhost:1999/export/pdf?lang=es&length=long&icons=show&version=extended
|
||||||
|
|
||||||
|
# Use defaults (English, short, with icons, extended)
|
||||||
|
http://localhost:1999/export/pdf
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Filename Convention
|
||||||
|
|
||||||
|
PDFs are automatically named following this pattern:
|
||||||
|
```
|
||||||
|
CV-{Your-Name}-{lang}-{length}-{version}.pdf
|
||||||
|
```
|
||||||
|
|
||||||
|
Examples:
|
||||||
|
- `CV-Juan-Andrés-Moreno-Rubio-en-short-clean.pdf`
|
||||||
|
- `CV-Jane-Smith-es-long-extended.pdf`
|
||||||
|
|
||||||
|
#### Customizing PDF Appearance
|
||||||
|
|
||||||
|
PDF appearance is controlled by `@media print` CSS rules. The print styles are already optimized for A4 paper, but you can customize them:
|
||||||
|
|
||||||
|
**Location**: `static/css/08-contexts/_print.css` (or your main CSS file)
|
||||||
|
|
||||||
|
**Common customizations**:
|
||||||
|
|
||||||
**Add to `static/css/main.css`**:
|
|
||||||
```css
|
```css
|
||||||
@media print {
|
@media print {
|
||||||
/* PDF-specific styles */
|
/* Change paper size */
|
||||||
body {
|
|
||||||
background: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cv-page {
|
|
||||||
box-shadow: none;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Custom PDF header/footer */
|
|
||||||
@page {
|
@page {
|
||||||
margin: 20mm;
|
size: Letter portrait; /* US Letter instead of A4 */
|
||||||
|
margin: 10mm; /* Adjust margins */
|
||||||
@top-center {
|
|
||||||
content: "Your Name - CV";
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@bottom-right {
|
/* Customize colors */
|
||||||
content: "Page " counter(page) " of " counter(pages);
|
.section-title {
|
||||||
}
|
color: #000000 !important; /* Force black text */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Prevent orphans/widows */
|
/* Hide specific elements */
|
||||||
p, li {
|
.cv-footer {
|
||||||
orphans: 3;
|
display: none !important;
|
||||||
widows: 3;
|
}
|
||||||
|
|
||||||
|
/* Adjust font sizes */
|
||||||
|
.cv-name {
|
||||||
|
font-size: 18pt !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
#### Frontend Integration
|
||||||
|
|
||||||
|
Add a download button to your templates:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!-- Simple link -->
|
||||||
|
<a href="/export/pdf?lang=en&length=short&version=clean" download>
|
||||||
|
Download PDF
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- HTMX button (recommended) -->
|
||||||
|
<button
|
||||||
|
hx-get="/export/pdf?lang=en&length=short&version=clean"
|
||||||
|
hx-trigger="click">
|
||||||
|
📥 Download Clean PDF
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- Dynamic button with user's current language -->
|
||||||
|
<button
|
||||||
|
hx-get="/export/pdf?lang={{.Lang}}&length=short&version=clean"
|
||||||
|
hx-trigger="click">
|
||||||
|
Download PDF
|
||||||
|
</button>
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Tips for Best PDF Results
|
||||||
|
|
||||||
|
1. **Keep it concise**: Use `length=short` for 1-2 page CVs
|
||||||
|
2. **Professional look**: Use `version=clean&icons=hide` for formal applications
|
||||||
|
3. **Colorful**: Use `version=extended&icons=show` for creative industries
|
||||||
|
4. **Test before sharing**: Always preview the PDF before sending to employers
|
||||||
|
5. **File size**: Short versions ~1.5-2MB, Long versions ~2-2.5MB
|
||||||
|
|
||||||
|
#### Troubleshooting PDF Export
|
||||||
|
|
||||||
|
**Problem**: PDF generation times out
|
||||||
|
- **Solution**: Reduce content in your JSON files, or increase timeout in `internal/pdf/generator.go`
|
||||||
|
|
||||||
|
**Problem**: Fonts look wrong in PDF
|
||||||
|
- **Solution**: Ensure fonts are loaded correctly in your HTML head section
|
||||||
|
|
||||||
|
**Problem**: Images don't appear in PDF
|
||||||
|
- **Solution**: Check that image paths are absolute or relative to server root
|
||||||
|
|
||||||
|
**Problem**: Colors are washed out
|
||||||
|
- **Solution**: Add `-webkit-print-color-adjust: exact !important;` to your print CSS
|
||||||
|
|
||||||
|
#### Advanced: Customizing PDF Generation
|
||||||
|
|
||||||
|
If you need more control over PDF generation, you can modify:
|
||||||
|
|
||||||
|
**File**: `internal/handlers/cv.go` (ExportPDF function)
|
||||||
|
- Add new parameters
|
||||||
|
- Change cookie mappings
|
||||||
|
- Modify filename pattern
|
||||||
|
|
||||||
|
**File**: `internal/pdf/generator.go`
|
||||||
|
- Adjust PDF settings (margins, paper size)
|
||||||
|
- Change timeout duration
|
||||||
|
- Modify chromedp options
|
||||||
|
|
||||||
|
See [3-API.md](3-API.md) for complete API documentation.
|
||||||
|
|
||||||
### Additional Export Formats
|
### Additional Export Formats
|
||||||
|
|
||||||
#### Adding Word Export
|
#### Adding Word Export
|
||||||
@@ -1494,7 +1616,7 @@ curl http://localhost:1999/download/pdf?lang=en --output my-cv.pdf
|
|||||||
**CSS changes**:
|
**CSS changes**:
|
||||||
```css
|
```css
|
||||||
:root {
|
:root {
|
||||||
--accent-blue: #2c3e50; /* Conservative dark blue */
|
--accent-blue: #013c77; /* Conservative dark blue */
|
||||||
--bg-gray: #f4f4f4; /* Light background */
|
--bg-gray: #f4f4f4; /* Light background */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user