window.open adding styles at the time of printing

Question

window.open adding styles at the time of printing

Navigation

#1 by (1 votes)

2

I have a page in HTML of test and inside it a button which activates a function so that the page can be printed.

How can I do so that at the moment of printing I respect my styles css on the page?

This is the code of the button:

<div id="Imprimeme">Este es un div.<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <p id="Estilo">Parrafo</p>
</div>
<a onclick="javascript:Imprime('Imprimeme');" class="btn btn-primary">Imprime</a>

The imprime function is as follows:

function Imprime(Imprimeme){
            var c, tmp;
            c = document.getElementById(Imprimeme);
            tmp = window.open('','Impresion');
            tmp.document.open();
            tmp.document.write('<head><link href="css/print.css" type="text/css" rel="stylesheet" media="print"/></head>');
            tmp.document.write(c.innerHTML);
            tmp.document.close();
            tmp.print();
            tmp.close();
        }

And this is the CSS , I do not have more than the following:

@media print {
    #Estilo{
      font-size: 100px;
    }
}

Screenshot:

javascript

asked by José MN 24.03.2017 в 19:43

source

1 answer

Error in inRange () "TypeError: unknown is not a numpy array" Perform popup ASP jQuery C #

score 1 · Accepted Answer

To make the print from a new window, you would have to send the CSS inline in the HTML . Another option is to print directly on the same page, for example:

function Imprime(Imprimeme){
    window.print()
}

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title></title>
   <style media="print">
       #Estilo{
         font-size: 100px;
       }
   </style>
</head>
<body>
   <div id="Imprimeme">Este es un div.<br/>
      <p id="Estilo">Parrafo</p>
   </div>
   <a onclick="javascript:Imprime('Imprimeme');" class="btn btn-primary">Imprime</a>
</body>
</html>