# Export Docs Plugin

The export plugin allows you to export content directly from the Jodit editor to supported formats (PDF, DOCX) to your local computer.
By default, the conversion is performed server-side via Ajax. You can also provide a custom client-side converter function to skip the server entirely.

## Installation

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

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

## 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.
You can also use separate `exportToPDF` and `exportToDOCX` buttons.

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

## Options

When exporting, you can change a number of parameters:

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

## API Reference

### Configuration Interface

The export-docs plugin extends the Jodit configuration with the following interface:

```typescript
interface Config {
    exportDocs: {
        ajax?: AjaxOptions;
        css: string;
        pdf: {
            allow: boolean;
            externalFonts: string[];
            converter: ((html: string) => Promise<Blob>) | null;
            options: {
                defaultFont: string;
                format: 'A4' | 'A3' | 'A5' | 'Letter' | 'Legal';
                page_orientation: 'landscape' | 'portrait';
            };
        };
        docx: {
            allow: boolean;
            converter: ((html: string) => Promise<Blob>) | null;
        };
    };
}
```

### Controls

The plugin registers three toolbar controls:

- `exportDocs` — dropdown with both PDF and DOCX options
- `exportToPDF` — standalone PDF export button
- `exportToDOCX` — standalone DOCX export button

```js
const editor = Jodit.make('#editor', {
    buttons: ['exportDocs', '|', 'exportToPDF', 'exportToDOCX']
});
```

### Commands

#### exportToPDF

Exports the current editor content to PDF format.

```js
editor.execCommand('exportToPDF');
```

#### exportToDOCX

Exports the current editor content to DOCX format.

```js
editor.execCommand('exportToDOCX');
```

### css

- Type: String
- Default: ''

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

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

### ajax

- Type: AjaxOptions
- Default: undefined

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

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

### pdf.allow

- Type: Boolean
- Default: true

Allows or disallows export to PDF.

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

### 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.

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

### pdf.options.format

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

Page format for the exported PDF document.

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

### pdf.options.page_orientation

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

Page orientation for the exported PDF document.

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

### 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.

```js
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" />'
            ]
        }
    }
});
```

### pdf.converter

- Type: `((html: string) => Promise<Blob>) | null`
- Default: `null`

Custom client-side converter function for PDF. When set, the server request is skipped entirely.
The function receives the full HTML string (with styles) and must return a `Promise<Blob>` with the PDF content.

```js
import { jsPDF } from 'jspdf';

Jodit.make('#editor', {
    exportDocs: {
        pdf: {
            converter: async (html) => {
                const doc = new jsPDF();
                await doc.html(html, { margin: [10, 10, 10, 10] });
                return doc.output('blob');
            }
        }
    }
});
```

### docx.converter

- Type: `((html: string) => Promise<Blob>) | null`
- Default: `null`

Custom client-side converter function for DOCX. When set, the server request is skipped entirely.
The function receives the full HTML string (with styles) and must return a `Promise<Blob>` with the DOCX content.

```js
import { asBlob } from 'html-docx-js-typescript';

Jodit.make('#editor', {
    exportDocs: {
        docx: {
            allow: true,
            converter: async (html) => {
                const fullHtml = `<!DOCTYPE html><html><head><meta charset="utf-8"></head><body>${html}</body></html>`;
                return asBlob(fullHtml);
            }
        }
    }
});
```

### docx.allow

- Type: Boolean
- Default: false

Allows or disallows export to DOCX.

```js
Jodit.make('#editor', {
    exportDocs: {
        docx: {
            allow: true
        }
    }
});
```

## 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.

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

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

```js
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" />'
            ]
        }
    }
});
```

## Examples

### Basic Usage

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

### Configuring Page Format and Orientation

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

### Using Custom Styles and Fonts

```js
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'
            }
        }
    }
});
```

### Client-Side DOCX Export (No Server Required)

Using [html-docx-js](https://www.npmjs.com/package/html-docx-js):

```bash
npm install html-docx-js
```

```js
import htmlDocx from 'html-docx-js';

const editor = Jodit.make('#editor', {
    buttons: ['exportToDOCX'],
    exportDocs: {
        docx: {
            allow: true,
            converter: async (html) => {
                const styles = [];
                const body = html.replace(/<style[^>]*>[\s\S]*?<\/style>/gi, (match) => {
                    styles.push(match);
                    return '';
                });

                const page = '<!DOCTYPE html><html><head><meta charset="utf-8">' +
                    styles.join('\n') + '</head><body>' + body + '</body></html>';

                return htmlDocx.asBlob(page, {
                    margins: { top: 720, right: 720, bottom: 720, left: 720 }
                });
            }
        }
    }
});
```

### Client-Side PDF Export (No Server Required)

#### Using npm

```bash
npm install jspdf
```

```js
import { jsPDF } from 'jspdf';

const editor = Jodit.make('#editor', {
    buttons: ['exportToPDF'],
    exportDocs: {
        pdf: {
            converter: async (html) => {
                const doc = new jsPDF({ format: 'a4', orientation: 'portrait' });
                await doc.html(html, {
                    margin: [10, 10, 10, 10],
                    width: 190,
                    windowWidth: 800
                });
                return doc.output('blob');
            }
        }
    }
});
```

### Client-Side Export via CDN (No Server, No Bundler)

```html
<script src="https://cdn.jsdelivr.net/npm/dompurify@3/dist/purify.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/html2canvas@1/dist/html2canvas.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jspdf@2/dist/jspdf.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/html-docx-js@0.3.1/dist/html-docx.min.js"></script>

<div id="editor"></div>

<script>
    const editor = Jodit.make('#editor', {
        buttons: ['exportDocs'],
        exportDocs: {
            pdf: {
                converter: async function (html) {
                    const doc = new jspdf.jsPDF({ format: 'a4', orientation: 'portrait' });
                    await doc.html(html, {
                        margin: [10, 10, 10, 10],
                        width: 190,
                        windowWidth: 800
                    });
                    return doc.output('blob');
                }
            },
            docx: {
                allow: true,
                converter: async function (html) {
                    const styles = [];
                    const body = html.replace(/<style[^>]*>[\s\S]*?<\/style>/gi, function (match) {
                        styles.push(match);
                        return '';
                    });
                    const page ='<!DOCTYPE html><html><head><meta charset="utf-8">' +
                        styles.join('\n') + '</head><body>' + body + '</body></html>';
                    return htmlDocx.asBlob(page, {
                        margins: { top: 720, right: 720, bottom: 720, left: 720 }
                    });
                }
            }
        }
    });
</script>
```