Skip to content

# Adding a PDF button

Having users create a PDF of your website requires them to navigate to the print page and File > Print > Save as PDF (see export to PDF). You can make downloading a PDF version of your website even easier for your users by including a 'PDF' button on every page (like the one in the right corner of this page 👆).

MkDocs supports theme extension, an easy way to override parts of a theme. That will allow you to add a button to the top of every page.

This plugin adds to the context a `page.url_to_print_page` which contains the relative link from a page to the print page. You can use `page.url_to_print_page` when customizing a theme:

Exporting to PDF is a separate step

While it might be easier for your users, using this option means you need to re-create the PDF everytime you make a change to your website. See how to export to PDF.

If you use this option and you are using version control like git, you might want to also gitignore the PDF file.

## Adding a PDF button to mkdocs-material theme

In the mkdocs-material theme you can create an override for `main.html` (see customization).

Example:

mkdocs.yml

    theme:
    name: material
    custom_dir: docs/overrides

    plugins:
        - print-site:
            path_to_pdf: "assets/the_name_of_your_file.pdf"

docs/overrides/main.html

    {% extends "base.html" %}

    {% block content %}

    {% if page.url_to_pdf %}
        <a href="{{ page.url_to_pdf }}" title="Site PDF" class="md-content__button md-icon">
            {% include ".icons/material/file-pdf-box.svg" %}
        </a>
    {% endif %}

    {{ super() }}
    {% endblock content %}

## Adding a print button to mkdocs theme

You can also customize the base mkdocs theme, by overriding `main.html`.

Example:

mkdocs.yml

    theme:
        name: mkdocs
        custom_dir: docs/overrides

    plugins:
        - print-site:
            path_to_pdf: "assets/the_name_of_your_file.pdf"

docs/overrides/main.html

    {% extends "base.html" %}

    {% block repo %}
        {% if page.url_to_pdf %}
            <li class="nav-item">
                <a href="{{ page.url_to_pdf }}" title="Site PDF" class="nav-link">
                    <i class="fas fa-file-pdf"></i> PDF
                </a>
            </li>
        {% endif %}

    {{ super() }}
    {% endblock repo %}