Simple Print

Simple Javascript utility to print HTML element easier.

Getting started

See Demo Here

1. Use Package with NPM or YARN with ES6 import

# with npm
$ npm i simple-print --save

# or with yarn
$ yarn add simple-print

import SimplePrint from 'simple-print'

2. With CDN

<!-- PRODUCTION BUILD -->
<script src="https://unpkg.com/simple-print/lib/bundle/simple-print.min.js"></script>

<!-- OR -->

<!-- DEVELOPMENT BUILD -->
<script src="https://unpkg.com/simple-print/lib/bundle/simple-print.dev.js"></script>

How to Use

Simple use

var print = new SimplePrint({
    styles: [
        'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css',
        'assets/css/your.css'
    ]
})

function btnClick() {
    print.render(document.getElementById('element-to-print'))
}

With advanced options and callback

var element = document.getElementById('element-to-print') 

var opts = {
    name: '_blank',
    specs: [
        'fullscreen=yes',
        'titlebar=yes',
        'scrollbars=yes'
    ],
    styles: [
        'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css'
    ]
}

var print = new SimplePrint(opts)

function btnClick() {
    // you can assign your new options like this
    print.options = {
        styles: [
            'your-path/other-style.css'
        ]
    }

    print.render(element, function() {
        console.log('Printing completed or was cancelled!')
    })
}

Feel free to contribute simple-print 🙂

Copyright © 2019 by Sutan Gading Fadhillah Nasution