Alterar href para impressão

[Luiz Henrique 1]

Olá,

Criei uma function para alterar o href de um arquivo css para impressão, tenho 3 botões e cada um carrega um css print diferente, o problema é que se eu adicionar o windows.print(); logo após a alteração do href o css não funciona mas se eu pressionar as teclas de atalho do windows Ctrl+p funciona, segue code:

 

function printPg(alvo){
    var link = document.querySelector('#cssPrint');
    link.setAttribute('href', '/app/css/'+alvo+'.css');
    window.print();
  }

<link rel="stylesheet" type="text/css" media="print" href="/app/css/default.css" id="cssPrint">

Obrigado.

[Omar~ 87]

Tenta usar o comando print no css, então você dispensa alterar um elemento na header.

Ele é justamente para personalizar quando a impressão é acionada

@media print {
  /* suas definições */
}

Também não sei se vai funcionar no seu caso, mas não custa tentar, ao invés de substituir o css, crie uma nova tag link na header com o javasript e adicione o css desejado então, nesse css contendo as definições personalizadas na teoria irá sobrescrever quaisquer css já carregado.

[Luiz Henrique 1]

Não funcionou nenhuma das alternativas.

Parece que o js muda o link / inclui o elemento mas não aplica  o css, porém funciona no atalho (CTRL + p)!
Enfim vou mudar o método e imprimir a div, assim aplico o css específico para impressão nas respectivas divs, mais simples, segue para quem precisar:

 

function printPg(alvo){
    var alvo = $('#'+alvo).html();
    printOut = window.open('about:blank');
    printOut.document.write(alvo);
    printOut.window.print();
    printOut.window.close();
 }

Obrigado.

[Jack Oliveira 1]

<style>
  body {
  font-family: Helvetica;
  color: rgb(85, 85, 85);
}


/* backgroud color */

h1 {
  font-size: 24px;
  font-weight: normal;
  margin: 0.4em 0;
}

.container {
  width: 100%;
  margin: 0 auto;
}

.container .row {
  float: left;
  clear: both;
  width: 100%;
}

.container .col {
  float: left;
  margin: 0 0 1.2em;
  padding-right: 1.2em;
  padding-left: 1.2em;
}

.container .col.twelve {
  width: 100%;
}

@media screen and (min-width: 200px) {
  .container {
    width: 50%;
    max-width: 1080px;
    margin: 0 auto;
  }
  .container .row {
    width: 100%;
    float: left;
    clear: both;
  }
  .container .col {
    float: left;
    margin: 0 0 1em;
    padding-right: .5em;
    padding-left: .5em;
  }
  .container .col.four {
    width: 50%;
  }
  .container .col.tweleve {
    width: 100%;
  }
}

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

a {
  text-decoration: none;
}

.btnOn {
  font-size: 20px;
  white-space: nowrap;
  width: 100%;
  padding: .8em 1.5em;
  font-family: Helvetica;
  line-height: 20px;
  display: inline-block;
  zoom: 1;
  color: rgb(255, 255, 255);
  text-align: center;
  position: relative;
  -webkit-transition: border .25s linear, color .25s linear, background-color .25s linear;
  transition: border .25s linear, color .25s linear, background-color .25s linear;
}

.btnOn.btn-sea {
  background-color: rgb(15, 219, 0);
  border-color: rgb(10, 145, 0);
  -webkit-box-shadow: 0 3px 0 rgb(10, 145, 0);
  box-shadow: 0 3px 0 rgb(10, 145, 0);
}

.btnOn.btn-sea: hover {
  background-color: rgb(10, 145, 0);
}

.btnOn.btn-sea: active {
  top: 3px;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.btnOff {
  font-size: 20px;
  white-space: nowrap;
  width: 100%;
  padding: .8em 1.5em;
  font-family: Helvetica;
  line-height: 20px;
  display: inline-block;
  zoom: 1;
  color: rgb(255, 255, 255);
  text-align: center;
  position: relative;
  -webkit-transition: border .25s linear, color .25s linear, background-color .25s linear;
  transition: border .25s linear, color .25s linear, background-color .25s linear;
}

.btnOff.btn-sea {
  background-color: rgb(255, 42, 42);
  border-color: rgb(204, 0, 0);
  -webkit-box-shadow: 0 3px 0 rgb(204, 0, 0);
  box-shadow: 0 3px 0 rgb(204, 0, 0);
}

.btnOff.btn-sea: hover {
  background-color: rgb(204, 0, 0;
}

.btnOff.btn-sea: active {
  top: 3px;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}
  
  </style>
<script type="text/javascript">
function changeStatus (el) {
  var isOn = el.innerHTML == "ON";
  el.className = 'btn-sea ' + (isOn ? "btnOff" :  "btnOn");
  el.innerHTML = isOn ? "OFF" : "ON";
}
</script>

<div class='container'>
  <div class='row'>
    <div class='col twelve'>
      <p align='center'>
        <font size='10'>REMOTE CONTROL</font>
      </p>
    </div>
  </div>
  <div class='row'>
    <div class='col four'>
      <a href='javascript:void(0)' onclick="changeStatus(this)" class='btnOn btn-sea'>ON</a>
    </div>
  </div>
  <div class='col twelve'> </div>
</div>

Veja aqui