Print

JointJS+ provides a Print plugin that enables the ability to prepare the Paper for printing, and initiates printing using the browser print wizard.

Installation

Access print via the format namespace, and pass an instance of dia.Paper to the method.

import { dia, format } from '@joint/plus';

document.getElementById('print-btn').addEventListener('click', () => {

    format.print(paper, {
        padding: 10,
        sheet: { width: 297, height: 210 },
        poster: false,
        margin: 1,
        marginUnit: 'in',
        ready: function(pages, send) {
            pages.forEach(function(pageEl) {
                pageEl.style.border = '1px solid gray';
            });
            send(pages);
        }
    });

}, false);

There is also a UMD version available

Include joint.format.print.js and joint.format.print.css in your HTML:

index.html

<link rel="stylesheet" type="text/css" href="joint.format.print.css">
<script src="joint.js"></script>
<script src="joint.format.print.js"></script>

Access print through the joint.format namespace:

index.js

document.getElementById('print-btn').addEventListener('click', () => {

    joint.format.print(paper, {
        padding: 10,
        sheet: { width: 297, height: 210 },
        poster: false,
        margin: 1,
        marginUnit: 'in',
        ready: function(pages, send) {
            pages.forEach(function(pageEl) {
                pageEl.style.border = '1px solid gray';
            });
            send(pages);
        }
    });

}, false);

Adding a custom logo

If you'd like to add your custom text or logo to all of the printed papers, you can use the following method in your CSS:

@media print {
    body:before {
        content: 'My Cool Company';
        top: -5mm;
    }
}

This adds the text My Cool Company to the top of the printed document. To add a logo image, just set width, height and background-image properties on the ::before pseudo-element.