divjs
A jQuery plugin for printing specific selection/element with customization.
Features
- Select specific
HTML
element. - Load body
CSS
with extraCSS
. - Hide specific element during print.
- Customize document page.
- Wrap element with specific HTML
To Do
- Override
HTML
attribute (replace). - Auto reponsive.
Getting started
clone divjs
repo or download it in your project directory.
git clone https://github.com/zxalif/divjs.git
Add divjs.js
after jQuery
<script src="http://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script> <script type="text/javascript" src="divjs/divjs.js"></script>
Documentation
select an element
Just select an element to print it. example
$('#example').printElement();
divjs
support six(6) options
Current - title: The title of the print document.
- css: Loading internal
css
. - ecss: Loading customize sytles for print.
- lcss: List of local
css
to be add. - keepHide: Hide this selection in document page (no need to print this).
- wrapper: Wrap html element within it.
change title
To change the document title
$('#example').printElement({ title: 'New title for Window' // default is page title });
loading internal css
Loading page css
. css:
options are 3 types.
extend
to load all thecss
(links and styles) ofthis
page.style
to load onlycss
instyle
tag.link
loads only linkscss
.
Example (extend) It will load all kind of styles
.
$('#example').printElement({ title: 'Loading all styles in this page.', css: 'extend' // it will load all `css` });
Example (style) It will load only styles in style tag.
$('#example').printElement({ title: 'Loading only css of style tag.', css: 'style' });
Example (link) To load link css
use link
.
$('#example').printElement({ title: 'Loading link css', css: 'link' });
inserting extra css
The options ecss
used to perform loading customize of some style
. Example
$('#example').printElement({ title: 'Loading link css', css: 'link', ecss: '.active{background-color: red;} #counter{background-color: #000; color: #fff;}' });
inserting extra css
Loading link extra css
. lcss: [] // lcss is an array to used load extarnal or cdn.
Example
$('#example').printElement({ title: 'Loading link css', css: 'link', ecss: '.active{background-color: red;} #counter{background-color: #000; color: #fff;}', lcss: ['example.css', '/local/css/print.css'] });
Wraping with HTML
To wrap
element
with specific element just select the element with jQuery or use it as string
.
Wraping with jQuery selector
Example
<p id="contacts">All the contacts are going to be print.<p> <button id="printer">Print</button> <div> <h1>Somethig goes before the printer element</h1> <div id="wrapper"></div> <p>Footer after the wrapper</p> </div>
jQuery('#printer').on('click', function(event){ event.preventDefault(); jQuery('#contacts').printElement({ wrapper: { wrapper: $('#selector'), // the element that going to be wrap `#contacts` selector: '#wrapper', // inside the `#wrapper` id it will wrap } }); });
Wraping with html as string
Example
<p id="contacts">All the contacts are going to be print.<p> <button id="printer">Print</button>
jQuery('#printer').on('click', function(event){ event.preventDefault(); jQuery('#contacts').printElement({ wrapper: { wrapper: '<div><h1>Somethig goes before the printer element</h1><div id="wrapper"></div><p>Footer after the wrapper</p></div>', // the element that going to be wrap `#contacts` selector: '#wrapper', // inside the `#wrapper` id it will wrap } }); });
Output
Author
Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
License
Free Software, Hell Yeah!