Print Specific Element With CSS - jQuery divjs

Print Specific Element With CSS - jQuery divjs
File Size: 4.89 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

divjs is a lightweight and easy jQuery element printing plugin which allows the user to print only a selected HTML element with additional CSS styles.

How to use it:

1. To use the element printing plugin, load the main JavaScript file divjs.js after jQuery.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="divjs/divjs.js"></script>

2. Attach the function printElement to the element you want to print. That's it.

$('.printButton').click(function(){
  $('.element').printElement();
})

3. Customize the title of the document.

$('.element').printElement({
  title: 'Custom Title Here'
});

4. Apply CSS files and styles to the print document.

  • extend: all the CSS files and inline styles
  • style: only inline styles
  • link: only CSS links
$('.element').printElement({
  css: 'extend'
});

5. Apply inline CSS styles to the print document.

$('.element').printElement({
  ecss: 'CSS rules here'
});

6. Apply external CSS files to the print document.

$('.element').printElement({
  lcss: ['example.css', '/path/to/print.css']
});

7. Define an array of elements to hide while printing.

$('.element').printElement({
  keepHide: []
});

This awesome jQuery plugin is developed by zxalif. For more Advanced Usages, please check the demo page or visit the official website.