Skip to content
Simple Javascript utility to print HTML element easier.
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
.gitignore
.travis.yml
LICENSE
README.md
_config.yml
package.json
renovate.json
webpack.config.js
yarn.lock

README.md

Simple Print

GitHub Build Status npm npm GitHub issues

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

You can’t perform that action at this time.