https://github.com/gadingnst/simple-print
Simple Javascript utility to print HTML element easier.
https://github.com/gadingnst/simple-print
element-print html-print javascript print
Last synced: 5 months ago
JSON representation
Simple Javascript utility to print HTML element easier.
- Host: GitHub
- URL: https://github.com/gadingnst/simple-print
- Owner: gadingnst
- License: mit
- Created: 2019-09-11T19:09:06.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T10:00:17.000Z (over 3 years ago)
- Last Synced: 2025-10-04T07:20:29.367Z (9 months ago)
- Topics: element-print, html-print, javascript, print
- Language: JavaScript
- Homepage: https://sutanlab.js.org/simple-print
- Size: 421 KB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 22
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Simple Print
[](https://github.com/sutanlab/simple-print) [](https://travis-ci.org/sutanlab/simple-print) [](https://www.npmjs.com/package/simple-print) [](https://unpkg.com/simple-print/lib/bundle/simple-print.min.js) [](https://github.com/sutanlab/simple-print/issues)
> Simple Javascript utility to print HTML element easier.
## Getting started
##### See [Demo Here](https://jsfiddle.net/sutanlab/d72ke1sL)
### 1. Use Package with NPM or YARN with ES6 import
```bash
# with npm
$ npm i simple-print --save
# or with yarn
$ yarn add simple-print
```
```js
import SimplePrint from 'simple-print'
```
### 2. With CDN
```html
```
## How to Use
### Simple use
```js
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
```js
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!')
})
}
```
## Support Me
### Global
[](https://ko-fi.com/gadingnst)
### Indonesia
- [Trakteer](https://trakteer.id/gadingnst)
- [Karyakarsa](https://karyakarsa.com/gadingnst)
---
Feel free to contribute [simple-print](https://github.com/sutanlab/simple-print) 🙂
Copyright © 2019 by Sutan Gading Fadhillah Nasution