Print & PDF Export Guide

This guide explains how to use the integrated print and PDF export system in Procesar's documentation.

Overview

The hybrid print system offers two main options:

CSS Print: Uses optimized CSS styles and the browser's print dialog
PDF Export: Generates professional PDFs via Puppeteer on the server

Basic Usage

Print Button

INFORMACIÓN

Location: On all documentation pages (except the homepage), you'll find a floating print button in the bottom right corner.

Available Options

When you click the button, a menu appears with the following options:

1. Print (Printer)

CONSEJO

Recommended use: Ideal for direct paper printing.

Opens the browser's print dialog
Uses CSS optimized styles for printing

2. Export PDF

CONSEJO

Recommended use: Ideal for digital sharing.

Generates a professional PDF file
Offers advanced page configuration

Advanced Configuration

The PDF export menu includes the following configuration options:

Option	Description	Available values
Size	Page format	A4, Letter, Legal
Orientation	Page layout	Portrait, Landscape
Include header	Adds title at the top	Yes/No
Include footer	Adds page numbering	Yes/No

Customization

Per-Page Configuration

You can customize print behavior on each page using frontmatter:

yaml

---
title: "My Document"
print: true
printTitle: "Custom Title"
printTarget: ".specific-content"
printClass: "special-format"
---

Frontmatter Options

Property	Type	Description	Example
`print`	boolean	Enable/disable print button	`false`
`printTitle`	string	Custom title for PDF	`"Official Guide"`
`printTarget`	string	CSS selector of content to print	`".main-content"`
`printClass`	string	Additional CSS classes for printing	`"compact-format"`

Print Styles

Automatic Optimizations

The system includes automatic optimizations for printing:

Typography: Optimized font size (12pt base)
Colors: High contrast for readability
Diagrams: Mermaid diagrams print correctly
Code: Syntax highlighting with good contrast
Tables: Defined borders and clear headers
Links: URLs are shown for reference

CSS Helper Classes

You can use these classes in your content:

html

<div class="page-break-before">Start new page here</div>
<div class="page-break-after">End page here</div>
<div class="avoid-break">This block won't split between pages</div>
<div class="print-only">Visible only when printing</div>
<div class="screen-only">Visible only on screen</div>

PDF Server Configuration

Requirements

INFORMACIÓN

Required dependencies: To use advanced PDF export, you need:

Node.js installed
Chrome or Chromium on your system
Project dependencies installed

Starting the Server

CONSEJO

Option 1: PDF server only

bash

npm run pdf-server

CONSEJO

Option 2: Full development (VitePress + PDF server)

bash

npm run dev:full

Chrome Configuration

ADVERTENCIA

Manual configuration: The server automatically tries to find Chrome on your system. If not found, you can specify the path:

Windows:

bash

set CHROME_PATH="C:\Program Files\Google\Chrome\Application\chrome.exe"
npm run pdf-server

macOS:

bash

export CHROME_PATH="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
npm run pdf-server

Linux:

bash

export CHROME_PATH="/usr/bin/google-chrome-stable"
npm run pdf-server

Troubleshooting

Common Issues

1. PDF is not generated

PELIGRO

Critical issue: PDF server is not running or Chrome is not available.

Solution:

bash

# Check if server is running
curl http://localhost:3001/api/health

# Start the server
npm run pdf-server

2. Print button doesn't appear

ADVERTENCIA

Required configuration: The page has print: false in frontmatter.

Solution: Remove or change to print: true in frontmatter.

3. Content is cut off in PDF

ADVERTENCIA

Layout issue: Elements too large for a page.

Solution: Use CSS helper classes:

html

<div class="avoid-break">
  <!-- Content that should not be split -->
</div>

4. Colors don't look good in print

INFORMACIÓN

Visual issue: Monochrome printer configuration.

Solution: Check printer settings or use specific styles:

css

@media print and (monochrome) {
  .my-element {
    background: #f5f5f5 !important;
    color: #000 !important;
  }
}

Debugging

Enable Debug Mode

CONSEJO

For developers: You can add logs to debug issues:

javascript

// In PrintButton.vue component
console.log('Content to print:', content)
console.log('Options:', printOptions.value)

Check PDF Server

bash

# Health check
curl http://localhost:3001/api/health

# Test manual generation
curl -X POST http://localhost:3001/api/generate-pdf \
  -H "Content-Type: application/json" \
  -d '{"html": "<h1>Test</h1>", "title": "Test PDF"}'

Best Practices

For Technical Documentation

CONSEJO

Recommended structure:

Use hierarchical headings (H1 → H2 → H3)
Keep paragraphs short for better readability
Use lists instead of long paragraphs
Add logical page breaks before large sections

For Quick References

CONSEJO

Optimized format:

Include table of contents at the beginning
Use compact format with printClass="compact-format"
Group related content to avoid splits

For Tutorials

CONSEJO

Educational content:

Include syntax-highlighted code with clear syntax
Use high-resolution screenshots
Add numbered steps with sufficient space

Technical Reference

Involved Components

PrintButton.vue: Main interface component
Layout.vue: Custom layout with floating button
pdf-server.js: Express server with Puppeteer
print.css: Print-optimized styles

Server Endpoints

Endpoint	Method	Description
`/api/health`	GET	Check server status
`/api/generate-pdf`	POST	Generate PDF with advanced options

System Architecture

The system follows a hybrid architecture:

PrintButton.vue: Main component that manages both print options
CSS Option: Uses window.print() with @media print styles
PDF Option: Communicates with Puppeteer server to generate professional PDFs
Configuration: Allows customizing size, orientation, header and footer

Conclusion

The print and PDF export system in Procesar's documentation offers a complete and flexible solution for generating physical and digital copies of content.

With both basic and advanced options, you can adapt the output to your specific needs, whether for quick printing or generating professional PDFs with custom configuration.

Need additional help? Check the Troubleshooting section or contact the development team.

Print & PDF Export Guide ​

Overview ​

Basic Usage ​

Print Button ​

Available Options ​

1. Print (Printer) ​

2. Export PDF ​

Advanced Configuration ​

Customization ​

Per-Page Configuration ​

Frontmatter Options ​

Print Styles ​

Automatic Optimizations ​

CSS Helper Classes ​

PDF Server Configuration ​

Requirements ​

Starting the Server ​

Chrome Configuration ​

Troubleshooting ​

Common Issues ​

1. PDF is not generated ​

2. Print button doesn't appear ​

3. Content is cut off in PDF ​

4. Colors don't look good in print ​

Debugging ​

Enable Debug Mode ​

Check PDF Server ​

Best Practices ​

For Technical Documentation ​

For Quick References ​

For Tutorials ​

Technical Reference ​

Involved Components ​

Server Endpoints ​

System Architecture ​

Conclusion ​

Print & PDF Export Guide

Overview

Basic Usage

Print Button

Available Options

1. Print (Printer)

2. Export PDF

Advanced Configuration

Customization

Per-Page Configuration

Frontmatter Options

Print Styles

Automatic Optimizations

CSS Helper Classes

PDF Server Configuration

Requirements

Starting the Server

Chrome Configuration

Troubleshooting

Common Issues

1. PDF is not generated

2. Print button doesn't appear

3. Content is cut off in PDF

4. Colors don't look good in print

Debugging

Enable Debug Mode

Check PDF Server

Best Practices

For Technical Documentation

For Quick References

For Tutorials

Technical Reference

Involved Components

Server Endpoints

System Architecture

Conclusion