Javascript print with styles

1.5k Views Asked by Jaro At 11 October 2021 at 09:54

I'd like to ask if there's an option to print(send to printer) in js some part of website with css styles ?

I've created code:

  let print_area = window.open();
print_area.document.write(print_div.innerHTML);
  print_area.document.close();
  print_area.focus();
  print_area.print();
  print_area.close();

it prints exactly what I want, but I have no css styles there(but I've created media print)

my project on jsfiddle: https://jsfiddle.net/z58pr1fL/

Original Q&A

There are 1 best solutions below

Reuno On 11 October 2021 at 10:11

I advice to create a css file for printer and insert this:

(…)
<head>
   (…)
   <link rel="stylesheet" media="print" href="print.css" />
   (…)
</head>
(…)

Inside this print.css subtract lots of colors as you can. Just for save inks in your users :)

Keep only border of your elements and texts with the shades of grey.

You could create a button for send to user's printer like this:

  <button type="button" onClick="window.print()">

or the best way is

  <button type="button" onClick="./path/of/javascript/files/printer.js">

printer.js

'use strict'
window.print();

If you not convince, try window.print() in your console.

Javascript print with styles

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in CSS

Related Questions in PRINTING-WEB-PAGE

Trending Questions

Popular # Hahtags

Popular Questions