Export in PDF Plugin

The export plugin allows you to export content directly from the Jodit editor to supported formats (PDF, DOC, etc.) to your local computer.

Installation

Add "exportDocs" to your Jodit editor's plugin list:

const editor = Jodit.make('#editor', {
    extraPlugins: ['exportDocs']
});
Copy

Usage

The plugin adds an "Export" button to the editor toolbar in the "media" group. When you click on this button, a dropdown list with available export formats opens (currently only PDF is supported).

const editor = Jodit.make('#editor', {
    buttons: ['exportDocs'],
    extraPlugins: ['exportDocs']
});
Copy

Options

When exporting, you can change a number of parameters:

Jodit.make('#editor', {
    exportDocs: {
        css: '* {color: red;}',
        pdf: {
            options: {
                defaultFont: 'courier',
                format: 'A4',
                page_orientation: 'portrait'
            }
        }
    }
});
Copy

css

• Type: String
• Default: ''

A string with CSS styles that will be applied to the exported document.

Jodit.make('#editor', {
    exportDocs: {
        css: 'body { font-family: Arial; color: #333; } h1 { color: blue; }'
    }
});
Copy

ajax

• Type: AjaxOptions
• Default: undefined

Options for the Ajax request during export. If not specified, settings from filebrowser.ajax are used.

Jodit.make('#editor', {
    exportDocs: {
        ajax: {
            url: 'https://example.com/export.php',
            headers: {
                'X-CSRF-Token': 'token123'
            }
        }
    }
});
Copy

pdf.allow

• Type: Boolean
• Default: true

Allows or disallows export to PDF.

Jodit.make('#editor', {
    exportDocs: {
        pdf: {
            allow: true // Allow export to PDF
        }
    }
});
Copy

pdf.options.defaultFont

• Type: String
• Default: 'courier'
• Possible values:
  • 'courier'
  • 'courier-bold'
  • 'courier-oblique'
  • 'courier-boldoblique'
  • 'helvetica'
  • 'helvetica-bold'
  • 'helvetica-oblique'
  • 'helvetica-boldoblique'
  • 'times-roman'
  • 'times-bold'
  • 'times-italic'
  • 'times-bolditalic'
  • 'symbol'
  • 'zapfdingbats'

Default font for the exported PDF document.

Jodit.make('#editor', {
    exportDocs: {
        pdf: {
            options: {
                defaultFont: 'helvetica'
            }
        }
    }
});
Copy

pdf.options.format

• Type: String
• Default: 'A4'
• Possible values:
  • 'A4'
  • 'A3'
  • 'A5'
  • 'Letter'
  • 'Legal'

Page format for the exported PDF document.

Jodit.make('#editor', {
    exportDocs: {
        pdf: {
            options: {
                format: 'Letter'
            }
        }
    }
});
Copy

pdf.options.page_orientation

• Type: String
• Default: 'portrait'
• Possible values:
  • 'portrait'
  • 'landscape'

Page orientation for the exported PDF document.

Jodit.make('#editor', {
    exportDocs: {
        pdf: {
            options: {
                page_orientation: 'landscape'
            }
        }
    }
});
Copy

pdf.externalFonts

• Type: Array<String>
• Default: []

An array of strings with URLs of external fonts or HTML <link> tags that will be used when exporting to PDF.

Jodit.make('#editor', {
    exportDocs: {
        pdf: {
            externalFonts: [
                'https://fonts.googleapis.com/css2?family=Roboto&display=swap',
                '<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet" />'
            ]
        }
    }
});
Copy

About Fonts and Character Encoding

PDF documents natively support the following fonts: Helvetica, Times-Roman, Courier, Zapf-Dingbats, and Symbol. These fonts are limited to Windows ANSI encoding. If you need to display characters outside the Windows ANSI range, you must use an external font. Dompdf (the library used on the server side) can embed any font in the PDF if it was preloaded or available and specified through CSS @font-face rules.

The server side comes with pre-installed DejaVu TrueType fonts, which by default provide good support for Unicode characters. To use these fonts, simply specify them in your CSS. For example: body { font-family: DejaVu Sans; } applies the DejaVu Sans font. The following DejaVu 2.34 fonts are included: DejaVu Sans, DejaVu Serif, and DejaVu Sans Mono.

To enable Unicode character support in your PDF, consider specifying a compatible font through CSS configuration.

Jodit.make('#editor', {
    exportDocs: {
        css: 'body { font-family: DejaVu Sans; }'
    }
});
Copy

But if you need your own font, you can specify it through the externalFonts option:

Jodit.make('#editor', {
    exportDocs: {
        css: 'body { font-family: "Noto Sans KR", sans-serif !important; }',
        pdf: {
            externalFonts: [
                'https://fonts.googleapis.com/css2?family=Montserrat&display=swap', // As a link
                // Or as a <link> tag
                '<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet" />'
            ]
        }
    }
});
Copy

Examples

Basic Usage

const editor = Jodit.make('#editor', {
    buttons: ['exportDocs'],
    extraPlugins: ['exportDocs']
});
Copy

Configuring Page Format and Orientation

const editor = Jodit.make('#editor', {
    buttons: ['exportDocs'],
    extraPlugins: ['exportDocs'],
    exportDocs: {
        pdf: {
            options: {
                format: 'A3',
                page_orientation: 'landscape'
            }
        }
    }
});
Copy

Using Custom Styles and Fonts

const editor = Jodit.make('#editor', {
    buttons: ['exportDocs'],
    extraPlugins: ['exportDocs'],
    exportDocs: {
        css: `
            body {
                font-family: 'Open Sans', sans-serif;
                color: #333;
                line-height: 1.5;
            }
            h1, h2, h3 {
                font-family: 'Roboto', sans-serif;
                color: #0066cc;
            }
            table {
                border-collapse: collapse;
                width: 100%;
            }
            table, th, td {
                border: 1px solid #ddd;
                padding: 8px;
            }
        `,
        pdf: {
            externalFonts: [
                'https://fonts.googleapis.com/css2?family=Open+Sans&family=Roboto:wght@400;700&display=swap'
            ],
            options: {
                format: 'Letter',
                page_orientation: 'portrait'
            }
        }
    }
});
Copy