API Documentation

Integrate Markdown to PDF conversion into your applications

📘 Client-Side Library

MarkdownPDF operates entirely in the browser. Below is documentation for integrating the same functionality into your own applications using JavaScript.

Getting Started

To integrate Markdown to PDF conversion in your application, you'll need two libraries:

1. Include Required Libraries

<!-- Markdown Parser -->
<script src="https://cdn.jsdelivr.net/npm/marked@11.1.1/marked.min.js"></script>

<!-- PDF Generator -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>

2. Basic Usage

// Convert Markdown to HTML
const markdownText = '# Hello World\n\nThis is **bold** text.';
const html = marked.parse(markdownText);

// Convert HTML to PDF
const element = document.createElement('div');
element.innerHTML = html;

html2pdf()
    .set({
        margin: 10,
        filename: 'document.pdf',
        html2canvas: { scale: 2 },
        jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
    })
    .from(element)
    .save();

Configuration Options

PDF Options

Option Type Default Description
margin number | array 10 Page margins in mm
filename string 'document.pdf' Output filename
image.type string 'jpeg' Image type (jpeg/png)
image.quality number 0.98 Image quality (0-1)
html2canvas.scale number 2 Rendering scale
jsPDF.unit string 'mm' Unit (mm/in/pt)
jsPDF.format string | array 'a4' Page format
jsPDF.orientation string 'portrait' portrait/landscape

Page Formats

// Standard formats
'a4'      // 210 × 297 mm
'letter'  // 8.5 × 11 inches
'legal'   // 8.5 × 14 inches
'a3'      // 297 × 420 mm

// Custom size
[width, height]  // in specified units

Advanced Examples

Example 1: Custom Page Size

const options = {
    margin: [15, 15, 15, 15],
    filename: 'custom-document.pdf',
    jsPDF: {
        unit: 'mm',
        format: [210, 297],  // Custom A4 size
        orientation: 'portrait'
    }
};

html2pdf().set(options).from(element).save();

Example 2: Landscape Orientation

const options = {
    margin: 10,
    filename: 'landscape-doc.pdf',
    jsPDF: {
        unit: 'mm',
        format: 'a4',
        orientation: 'landscape'
    }
};

html2pdf().set(options).from(element).save();

Example 3: High Quality Output

const options = {
    margin: 10,
    filename: 'high-quality.pdf',
    image: {
        type: 'jpeg',
        quality: 1.0
    },
    html2canvas: {
        scale: 3,
        useCORS: true,
        letterRendering: true
    },
    jsPDF: {
        unit: 'mm',
        format: 'a4',
        orientation: 'portrait'
    }
};

html2pdf().set(options).from(element).save();

Example 4: Complete Integration

class MarkdownPDFConverter {
    constructor(options = {}) {
        this.defaultOptions = {
            margin: 10,
            filename: 'document.pdf',
            image: { type: 'jpeg', quality: 0.98 },
            html2canvas: { scale: 2 },
            jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
        };
        this.options = { ...this.defaultOptions, ...options };
    }

    async convert(markdownText) {
        // Parse Markdown to HTML
        const html = marked.parse(markdownText);
        
        // Create temporary container
        const container = document.createElement('div');
        container.innerHTML = html;
        container.style.padding = '20px';
        container.style.fontFamily = 'Arial, sans-serif';
        
        // Generate PDF
        return html2pdf()
            .set(this.options)
            .from(container)
            .save();
    }

    setPageSize(format) {
        this.options.jsPDF.format = format;
        return this;
    }

    setOrientation(orientation) {
        this.options.jsPDF.orientation = orientation;
        return this;
    }

    setFilename(filename) {
        this.options.filename = filename;
        return this;
    }
}

// Usage
const converter = new MarkdownPDFConverter();
converter
    .setPageSize('a4')
    .setOrientation('portrait')
    .setFilename('my-document.pdf')
    .convert('# Hello World\n\nThis is a test.');

Markdown Configuration

Marked.js Options

marked.setOptions({
    breaks: true,          // Convert \n to <br>
    gfm: true,            // GitHub Flavored Markdown
    headerIds: true,      // Add IDs to headings
    mangle: false,        // Don't escape email addresses
    sanitize: false       // Don't sanitize HTML
});

Custom Renderer

const renderer = new marked.Renderer();

// Custom heading renderer
renderer.heading = function(text, level) {
    return `<h${level} style="color: #667EEA;">${text}</h${level}>`;
};

// Custom code block renderer
renderer.code = function(code, language) {
    return `<pre style="background: #f5f5f5; padding: 1em;">
        <code>${code}</code>
    </pre>`;
};

marked.use({ renderer });

Error Handling

async function convertMarkdownToPDF(markdown) {
    try {
        const html = marked.parse(markdown);
        
        if (!html || html.trim() === '') {
            throw new Error('Empty Markdown content');
        }
        
        const element = document.createElement('div');
        element.innerHTML = html;
        
        await html2pdf()
            .set(options)
            .from(element)
            .save();
            
        console.log('PDF generated successfully');
        
    } catch (error) {
        console.error('PDF generation failed:', error);
        throw error;
    }
}

Browser Compatibility

Browser Minimum Version Status
Chrome 60+ ✅ Fully Supported
Firefox 55+ ✅ Fully Supported
Safari 11+ ✅ Fully Supported
Edge 79+ ✅ Fully Supported
Opera 47+ ✅ Fully Supported

⚠️ Important Notes

  • All processing happens client-side in the browser
  • Large documents may take longer to process
  • Images must be CORS-enabled or base64 encoded
  • Some CSS features may not render perfectly in PDF