Jump to content
Luiz Henrique

Alterar href para impressão

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
<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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Luiz Henrique
      Olá;
       
      Estrou tentando importar a biblioteca Jquery em um projeto que utilizo o slim framework, mas a biblioteca não funciona se a importação dela for na index, (o slim está usando sistema de rotas), não sei se isso influencia em algo, mas para funcionar as aplicações jquery a importação da biblioteca tem que ser na página em uso.
       
      Criei um arquivo teste.js e uma função para dar um alert apenas e funciona até porque o css funciona o problema está com a biblioteca jquery, preciso configurar alguma coisa para que funcione importando ela pela index ou qualquer outro lugar, para que eu possa solicitar apenas 1 vez e não em todas as páginas ao qual utilizarei o jquery?
       
      Obrigado.
    • By Caio Vargas
      fala pessoal eu aqui de novo kkk
       
      consegui achar um tutorial de como criar o calendario fiz algumas modificaçoes 
       
      porem agora eu quero fazer o seguinte quero definir os dias que os serviços seram apresentados nos dias
       
      tipo tenho segunda terça quarta quinta sexta sabado e domingo ai esses dias seram inseridos no banco 
       
      como posso fazer uma verificação no codigo
       
      <?php // What is the first day of the month in question? function build_calendar($month, $year) { $Read = new Read; $Read->FullRead("SELECT * FROM " . DB_AGENDAMENTO . " WHERE MONTH(date) =:month AND YEAR(date)=:year","month={$month}&year={$year}"); $bookings = array(); if($Read->getResult()): if($Read->getRowCount() > 0): while($row = $Read->getResult()): $bookings[] = $row['date']; endwhile; endif; endif; // Create array containing abbreviations of days of week. // $daysOfWeek = array('Sunday', 'Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'); // Qual é o primeiro dia do mês em questão? $firstDayOfMonth = mktime(0,0,0,$month,1,$year); // Quantos dias este mês contém? $numberDays = date('t',$firstDayOfMonth); // Recuperar algumas informações sobre o primeiro dia do // mês em questão. $dateComponents = getdate($firstDayOfMonth); // What is the name of the month in question? $monthName = $dateComponents['month']; // What is the index value (0-6) of the first day of the // month in question. $dayOfWeek = $dateComponents['wday']; // Create the table tag opener and day headers $datetoday = date('Y-m-d'); $calendar = "<table class='table table-bordered'>"; $calendar .= "<center><h2>$monthName $year</h2>"; // se a data month < que a data atual então o botão sera desativado if($month <=> date('m')): $calendar.= "<a class='btn btn-xs btn-primary' href=". BASE ."/index/month/".date('m', mktime(0, 0, 0, $month-1, 1, $year))."/year/".date('Y', mktime(0, 0, 0, $month-1, 1, $year)).">Previous Month</a> "; else: $calendar.= "<a class='btn btn-xs btn-primary'>Previous Month</a>"; endif; $calendar.= " <a href=". BASE ." class='btn btn-xs btn-primary' data-month='".date('m')."' data-year='".date('Y')."'>Current Month</a> "; $calendar.= "<a href='". BASE ."/index/month/".date('m', mktime(0, 0, 0, $month+1, 1, $year))."/year/".date('Y', mktime(0, 0, 0, $month + 1, 1, $year))."' class='btn btn-xs btn-primary'>Next Month</a></center><br>"; $calendar .= "<tr>"; // Create the calendar headers foreach(getSemana() as $day): $calendar .= "<th class='header'>$day</th>"; endforeach; // Cria o resto do calendário // Inicia o contador de dias, começando com o 1º. $currentDay = 1; $calendar .= "</tr><tr>"; // A variável $dayOfWeek é usada para // assegura que o calendário // display consiste em exatamente 7 colunas. if($dayOfWeek > 0): for($k = 0; $k < $dayOfWeek; $k++): $calendar .= "<td class='empty'></td>"; endfor; endif; $month = str_pad($month, 2, "0", STR_PAD_LEFT); while ($currentDay <= $numberDays): //Sétima coluna (sábado) atingida. Inicie uma nova linha. if ($dayOfWeek == 7): $dayOfWeek = 0; $calendar .= "</tr><tr>"; endif; $currentDayRel = str_pad($currentDay, 2, "0", STR_PAD_LEFT); $date = "$year-$month-$currentDayRel"; //volta para a data atual $dayname = strtolower(date('l', strtotime($date))); $eventNum = 0; $appointment_date = date('Y-m-d', strtotime($appointment_date . ' +1 day')); $day_id = date('w',strtotime($appointment_date)); // var_dump($day_id); $today = $date == date('Y-m-d') ? "today" : ""; if($date < date('Y-m-d')): $calendar.="<td><h4>$currentDay</h4> <button class='btn-danger-no '></button>"; else: $calendar.="<td class='$today'><h4>$currentDay</h4> <a href=".BASE."/book/date/".$date." class='btn btn-success btn-xs'>Book</a>"; endif; $calendar .="</td>"; //Increment counters $currentDay++; $dayOfWeek++; endwhile; //Complete the row of the last week in month, if necessary if ($dayOfWeek != 7): $remainingDays = 7 - $dayOfWeek; for($l=0; $l < $remainingDays; $l++): $calendar .= "<td class='empty'></td>"; endfor; endif; $calendar .= "</tr>"; $calendar .= "</table>"; return $calendar; }  
    • By AWD
      Bom dia!
      Eu tenho um código javascript que chama um arquivo PHP para envio de e-mails.
      Minha dúvida é a seguinte, como fazer com que a função "$j("#retorno").fadeIn("slow").html(resposta);"   seja executada antes do termino da execução do arquivo nscript/enviar2.php. Pois ocorre que eu quero encontrar o erro dentro do arquivo enviar2.php, mas se ocorre algum erro na execução deste arquivo a função "$j("#retorno").fadeIn("slow").html(resposta);" (que mostra o resultado da pagina enviar2.php na div) não é executada pois o arquivo enviar2.php não terminou de carregar.
      Creio que teria de haver um jeito do conteudo da função "function(resposta)" ser executado antes dela ser completamente finalizada, mas estou sem ideia de como fazer.
      Muito obrigado pela atenção e ajuda.
      Segue o código:
       
      $j.post("nscript/enviar2.php",{anexo: anexo, destinatarios: destinatarios, assunto: assunto, mensagem: mensagem}, function(resposta){
                 
                  complete:$j("#carregando").fadeOut("slow");
                  $j("#retorno").fadeIn("slow").html(resposta);
       
               });
    • By Flaviaac
      Boa tarde pessoal,
       
      Sou iniciante em Desenvolvimento Web e não estou conseguindo resolver um problema no meu código, se alguém puder me ajudar agradeço imensamente.
       

      Vamos lá!
       
      Na tela de cadastro eu tenho um campo tipo select, onde escolho o tipo de documento, e no campo de baixo eu tenho um tipo text que mostrará a quantidade de anos para descarte deste documento. Então quando o usuário selecionar um dos documentos no campo de cima automaticamente deve aparecer o valor do tempo de descarte no campo de baixo, e ai sim o usuário poderá cadastrar o documento em si.
       
      Obs.: estou ignorando o restante dos campos de cadastro pois não são relevantes para este problema.
       

       
      Este evento está funcionando perfeitamente, o problema é que quando clico no botão "cadastrar" o campo de "periodicidade de descarte" não está salvando no bando de dados com o valor exibido, mas sim como zero.
       
      No arquivo processa_cadastro.php quando dou um var_dump em $periodo_doc ele imprime: int(0)
       
       
      Não consegui identificar onde estou errando.
       
      Por favor, poderiam me dar uma luz.
      Obrigada!
       
       
       
      Segue os códigos para entendimento.
       
       
      tipo_arquivo.sql:
      -- phpMyAdmin SQL Dump -- version 5.2.0 -- https://www.phpmyadmin.net/ -- -- Host: localhost -- Tempo de geração: 12-Jul-2022 às 14:46 -- Versão do servidor: 10.4.24-MariaDB -- versão do PHP: 7.4.29 SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; START TRANSACTION; SET time_zone = "+00:00"; /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */; /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */; /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */; /*!40101 SET NAMES utf8mb4 */; -- -- Banco de dados: `sistemadescarte` -- -- -------------------------------------------------------- -- -- Estrutura da tabela `tipo_arquivo` -- CREATE TABLE `tipo_arquivo` ( `id_tipo` int(11) NOT NULL, `nome_tipo` varchar(255) NOT NULL, `descarte` int(11) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=utf8; -- -- Extraindo dados da tabela `tipo_arquivo` -- INSERT INTO `tipo_arquivo` (`id_tipo`, `nome_tipo`, `descarte`) VALUES (1, 'Ata Extraordinária', 5), (2, 'Ata Ordinária', 5), (3, 'carta', 8), (4, 'Memorando', 10), (5, 'Memorando Circular', 8), (6, 'Ofício', 5), (7, 'Ofício Circular', 5), (8, 'Processo', 10); -- -- Índices para tabelas despejadas -- -- -- Índices para tabela `tipo_arquivo` -- ALTER TABLE `tipo_arquivo` ADD PRIMARY KEY (`id_tipo`), ADD KEY `id_tipo` (`id_tipo`); -- -- AUTO_INCREMENT de tabelas despejadas -- -- -- AUTO_INCREMENT de tabela `tipo_arquivo` -- ALTER TABLE `tipo_arquivo` MODIFY `id_tipo` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=21; COMMIT; /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */; /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */; /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;  
      documento.sql:
      -- phpMyAdmin SQL Dump -- version 5.2.0 -- https://www.phpmyadmin.net/ -- -- Host: localhost -- Tempo de geração: 12-Jul-2022 às 14:47 -- Versão do servidor: 10.4.24-MariaDB -- versão do PHP: 7.4.29 SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; START TRANSACTION; SET time_zone = "+00:00"; /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */; /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */; /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */; /*!40101 SET NAMES utf8mb4 */; -- -- Banco de dados: `sistemadescarte` -- -- -------------------------------------------------------- -- -- Estrutura da tabela `documento` -- CREATE TABLE `documento` ( `ID_DOC` int(11) NOT NULL, `NUMERO_DOC` varchar(20) NOT NULL, `TIPO_DOC` int(11) NOT NULL, `INTERESSADO` varchar(255) NOT NULL, `TITULO` varchar(400) NOT NULL, `OBS` varchar(400) DEFAULT NULL, `PERIODICIDADE` int(11) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=utf8; -- -- Extraindo dados da tabela `documento` -- INSERT INTO `documento` (`ID_DOC`, `NUMERO_DOC`, `TIPO_DOC`, `INTERESSADO`, `TITULO`, `OBS`, `PERIODICIDADE`) VALUES (2, '788741-2019/65', 1, 'admin', 'Ata extraordinária de 2018', 0), (3, '888888-2021/21', 3, 'gerencia', 'Carta a gerencia', 0), (4, '333653-2022/1', 8, 'teste', 'Processo', 'teste na observação', 0), (6, '224568-2022/3', 2, 'teste', 'Ata Ordinária', 0); -- -- Índices para tabelas despejadas -- -- -- Índices para tabela `documento` -- ALTER TABLE `documento` ADD PRIMARY KEY (`ID_DOC`), ADD KEY `TIPO_DOC` (`TIPO_DOC`); -- -- AUTO_INCREMENT de tabelas despejadas -- -- -- AUTO_INCREMENT de tabela `documento` -- ALTER TABLE `documento` MODIFY `ID_DOC` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=2295; -- -- Restrições para despejos de tabelas -- -- -- Limitadores para a tabela `documento` -- ALTER TABLE `documento` ADD CONSTRAINT `documento_ibfk_1` FOREIGN KEY (`TIPO_DOC`) REFERENCES `tipo_arquivo` (`id_tipo`); COMMIT; /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */; /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */; /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;  
       
      cadastro.php:
      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script type="text/javascript" src="js/descarte.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <title>Cadastro de Documento</title> </head> <form action="" method="post"> <div class="form-row"> <!-- tipo de documento --> <div class="form-group col-md-1"> <label>Tipo de Documento</label> <select name="tipo" id="tipo" class="form-control" onchange="funcaoDescarte()"> <option selected>Selecione...</option> <!--------------- P H P ----------------> <?php while($row = $result->fetch_assoc()) { echo "<option value=".$row['id_tipo'].">".$row['nome_tipo']."</option>"; } ?> <!--------------- F I M P H P ---------> </select> </div> </div> <div class="form-row"> <!-- tempo para descarte --> <div class="form-group col-md-2"> <span class="form-text">Periodicidade para descarte deste documento:</span> <input name="descarte" type="text" class="form-control" id="descarte" value="" disabled=""> <input type="text" readonly class="form-control-plaintext" value="Anos"> </div> </div> <!------------------- botão cadastrar e limpar ----------------------------------------------> &nbsp; </br> <div class="form-row"> <!-- Cadastrar e Limpar --> <div class="form-group col-md-4"> <button type="submit" name="cadastrar_doc" class="btn btn-primary">Cadastrar</button> <button type="reset" name="limpar_doc" class="btn btn-primary">Limpar campos</button> </div> </div> </form  
      descarte.js:
      function funcaoDescarte(){ var x = document.getElementById("tipo").value; y = $.ajax({ url:"periodicidade.php", method:"POST", data:{ id : x }, success:function(data){ $("#descarte").val(data); } }) }  
      periodicidade.php:
      <?php include_once "conexao.php"; $k = $_POST['id']; $k = trim($k); $sql = "SELECT * FROM tipo_doc WHERE id_tipo ='{$k}'"; $result = $conn->query($sql); while($row = $result->fetch_assoc()){ echo $row['descarte']; } ?>  
      processa_cadastro.php:
      <?php $tipo_doc = intval(filter_input(INPUT_POST, 'tipo', FILTER_SANITIZE_NUMBER_INT)); $periodo_doc = intval(filter_input(INPUT_POST, 'descarte', FILTER_SANITIZE_NUMBER_INT)); if(isset($_POST['cadastrar_doc'])) { if($tipo_doc !='' || $periodo_doc !='') { $stmt = $conn->prepare("INSERT INTO documento (tipo_doc, periodicidade) VALUES (?, ?)"); $stmt->bind_param("ii", $tipo_doc, $periodo_doc); $stmt->execute(); echo "<span class='alert alert-success'> Cadastrado com sucesso</span>"; $erro = mysqli_error($conn); echo "Ocorreu o seguinte erro: ", '"', $erro, '"<br>'; }else{ echo "<span class='alert alert-danger'> Não cadastrado</span>"; $erro = mysqli_error($conn); echo "Ocorreu o seguinte erro: ", '"', $erro, '"<br>'; } } $stmt->close(); $conn->close(); ?>  
       
    • By Sapinn
      Estou com um problema. Como faço para montar uma URL quando for clicando nos chebox? Exemplo eu possuio varios checkbox e toda vez que eu marcar um o valor dele é adicionando a uma url e essa mesma url será modificada no link.
      Algo como:
      <a href="user/enviar">Mostrar</a>
      <input type="checkbox" value="1">
      <input type="checkbox" value="2" checked>
      <input type="checkbox" value="3" checked>
      <input type="checkbox" value="4">
      <input type="checkbox" value="5">
       
      Vendo os valores marcados a url ficaria
      <a href="user/enviar/2,3">Mostrar</a>
       
      Eu também queria um checkbox para marcar todos e assim adicionar todos os valores a url, agora caso uma desses checkbox forem desmarcados o valor é retirado da url
       
      Eu fiz um script que funciona mas ele está meio bugado, queria saber se alguém tem algum script para fazer isso em javascript puro ou jquery
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.