Imprimir apenas <div id = "printarea"> </div>?

444

Como imprimo a div indicada (sem desativar manualmente todo o outro conteúdo da página)?

Quero evitar uma nova caixa de diálogo de visualização, portanto, criar uma nova janela com esse conteúdo não é útil.

A página contém algumas tabelas, uma delas contém a div que eu quero imprimir - a tabela é estilizada com estilos visuais para a Web, que não devem aparecer na impressão.

— noesgard
fonte

1

stackoverflow.com/questions/2255291/... este link funciona perfeito

— Jinna Balu

792

Aqui está uma solução geral, usando apenas CSS , que eu verifiquei funcionar.

@media print {
  body * {
    visibility: hidden;
  }
  #section-to-print, #section-to-print * {
    visibility: visible;
  }
  #section-to-print {
    position: absolute;
    left: 0;
    top: 0;
  }
}

Abordagens alternativas não são tão boas. O uso displayé complicado porque, se algum elemento tiver display:none, nenhum de seus descendentes será exibido. Para usá-lo, você precisa alterar a estrutura da sua página.

O uso visibilityfunciona melhor, pois você pode ativar a visibilidade dos descendentes. Os elementos invisíveis ainda afetam o layout, então eu vou section-to-printpara o canto superior esquerdo para que ele seja impresso corretamente.

— Bennett McElwee
fonte

21

esta é de longe a maneira mais rápida e mais limpa, eu me pergunto por que esta resposta não obter a maioria dos votos -.-

— Dany Khalife

34

Um problema a ser observado com esta solução é que você pode acabar imprimindo milhares de páginas em branco em alguns casos. No meu caso, eu consegui resolver isso usando alguma exibição adicional: nenhum estilo para itens selecionados, mas talvez uma solução mais geral seja alcançável por alguma combinação de também forçar alturas, transbordamento: nenhum e posicionamento absoluto para todos os divs ou algo assim.

— Malcolm MacLeod

5

Este é um ótimo começo, mas tive dois problemas: por um, se algum dos pais do elemento estabeleceu seu próprio posicionamento relativo / absoluto, o conteúdo ainda seria compensado, a menos que eu o usasse position:fixed. No entanto, o Chrome e o Safari também truncariam o conteúdo, especialmente após a primeira página. Portanto, minha solução final foi definir o alvo e todos os seus pais paraoverflow:visible; position:absolute !important; top:0;left:0

— natevw

1

@ dudeNumber4 #section-to-printcorresponde à própria seção; #section-to-print *corresponde a cada subelemento da seção. Portanto, essa regra apenas torna visível a seção e todo o seu conteúdo.

— Bennett McElwee

3

Você pode tentar uma solução JavaScript, mas isso não funcionará se o usuário usar o comando Imprimir do navegador.

— Bennett McElwee 15/03

243

Eu tenho uma solução melhor com código mínimo.

Coloque sua parte imprimível dentro de uma div com um ID como este:

<div id="printableArea">
      <h1>Print me</h1>
</div>

<input type="button" onclick="printDiv('printableArea')" value="print a div!" />

Em seguida, adicione um evento como um onclick (como mostrado acima) e passe o ID da div como fiz acima.

Agora vamos criar um javascript realmente simples:

function printDiv(divName) {
     var printContents = document.getElementById(divName).innerHTML;
     var originalContents = document.body.innerHTML;

     document.body.innerHTML = printContents;

     window.print();

     document.body.innerHTML = originalContents;
}

Observe como isso é simples? Sem pop-ups, sem novas janelas, sem estilo maluco, sem bibliotecas JS como o jquery. O problema com soluções realmente complicadas (a resposta não é complicada e não é o que estou me referindo) é o fato de que NUNCA será traduzido em todos os navegadores! Se você quiser diferenciar os estilos, faça o que é mostrado na resposta marcada adicionando o atributo media a um link da folha de estilo (media = "print").

Sem penugem, leve, ele simplesmente funciona.

— Kevin Florida
fonte

@Kevin eu tento isso para o formulário, mas ele imprime o formulário vazio (sem dados) e eu preciso de um formulário preenchido para ser impresso antes de enviá-lo #

— Arif

98

@asprin warning! Este não é um código livre de bagunça. Usar o innerHTML para eliminar e recriar todo o corpo é adequado para páginas simples, mas com personalizações mais avançadas (menus, apresentações de slides etc.), ele pode apagar alguns comportamentos dinâmicos adicionados por outros scripts.

— Christophe

17

Esta solução não funcionará em nenhuma página complexa em que os elementos na área imprimível dependem de estilos e / ou posição dos elementos pai. Se você extrair a div imprimível, pode parecer totalmente diferente porque todos os pais estão ausentes.

— Andrei Volgin

1

Infelizmente, não funciona bem no Chrome se você fechar a janela Visualização de impressão e tentar fazer um jQuery .click. É uma pena, porque o código é muito leve.

— rybo111

3

@BorisGappov, um exemplo muito simples, com apenas um clique, para provar meu argumento: jsfiddle.net/dc7voLzt Vou dizer novamente: este não é um código sem bagunça! O problema não está na impressão em si, é em restaurar a página original!

— Christophe

121

Todas as respostas até agora são muito falho - que quer envolver a adição class="noprint"a tudo ou sujará-se displaydentro #printable.

Eu acho que a melhor solução seria criar um invólucro em torno do material não imprimível:

<head>
    <style type="text/css">

    #printable { display: none; }

    @media print
    {
        #non-printable { display: none; }
        #printable { display: block; }
    }
    </style>
</head>
<body>
    <div id="non-printable">
        Your normal page contents
    </div>

    <div id="printable">
        Printer version
    </div>
</body>

Claro que isso não é perfeito, pois envolve mover um pouco as coisas no seu HTML ...

— Greg
fonte

Eu acho que você está certo, mas como faço para matar o estilo da tabela em torno do div (se isso é possível para remover o estilo - eu posso imprimir a tabela e excluir o resto do conteúdo com bastante facilidade

— noesgard

I utiliza Javascript para pegar o conteúdo necessário e o CSS, como acima

— noesgard

9

Eu prefiro usar HTML semântico. Idealmente, a formatação de impressão deve ser manuseada por CSS. Veja a minha resposta para saber como fazer isso: stackoverflow.com/questions/468881/...

— Bennett McElwee

De acordo com Bennett, usando a visibilidade em vez de exibição é uma solução mais limpa muito

— guigouz

Eu fiz uma solução realmente simples, mais abaixo neste tópico, que acho que melhor atenderá às necessidades do solicitante. Ele não depende de uma folha de estilo de impressão, pode ser reciclado em todo o site e é incrivelmente leve.

— Kevin Florida

108

Com o jQuery, é tão simples quanto isto:

w=window.open();
w.document.write($('.report_left_inner').html());
w.print();
w.close();

— romaninsh
fonte

3

Isso é muito legal, apesar de aparecer no Chrome como um pop-up bloqueado.

— Rafi Jacoby

8

o truque é chamá-lo em evento gerado pelo usuário, como no clique do mouse. você também pode adicionar após a primeira linha: if (! w) alert ('Ative pop-ups');

— romaninsh

1

alguém conseguiu isso trabalhando no IE11? Ele apenas abre uma janela e a fecha imediatamente. Funciona no Chrome, FF e safari.

— greatwitenorth

3

Perdi o css ao imprimir com isso, existe alguma maneira de manter o css?

— Moxet Khan

2

@MoxetKhan, este post tem uma solução com css vevlo.com/how-to-print-div-content-using-javascript

— lakesare

22

Você poderia usar uma folha de estilo de impressão e CSS para organizar o conteúdo que deseja imprimir? Leia este artigo para mais dicas.

— Paul Dixon
fonte

Eu tenho uma folha de estilo de impressão - tentando evitar colocar uma regra de estilo em todos os outros conteúdos ...

— noesgard

Eu tenho uma tabela com estilo, contendo a div em questão. Se eu definir a tabela para exibição: none - ainda posso exibir a div?

— noesgard

Acho que sim, e você pode tentar marcar a regra como importante para impulsioná-la!

— Paul Dixon

se a tabela não for exibida, não importará, mesmo que a div esteja definida como 'display: awesome;'. Os pais estão ocultos e os filhos também. É uma situação em que você precisa de uma tabela ou é apenas para o layout da página?

— roborourke

"Boom tiro na cabeça!" por layouts de tabela. = |

— ANeves 5/05

19

Isso funciona bem:

<style type="text/css">
@media print
{
body * { visibility: hidden; }
#printcontent * { visibility: visible; }
#printcontent { position: absolute; top: 40px; left: 30px; }
}
</style>

Observe que isso funciona apenas com "visibilidade". "display" não fará isso. Testado em FF3.

— Christian Maioli M.
fonte

15

Eu realmente não gostei de nenhuma dessas respostas como um todo. Se você tem uma classe (digamos printableArea) e a possui como filho imediato do corpo, pode fazer algo assim no seu CSS impresso:

body > *:not(.printableArea) {
    display: none;
}

//Not needed if already showing
body > .printableArea {
    display: block;
}

Para aqueles que procuram printableArea em outro local, você precisa garantir que os pais de printableArea sejam mostrados:

body > *:not(.parentDiv),
.parentDiv > *:not(.printableArea) {
    display: none;
}

//Not needed if already showing
body > .printableArea {
    display: block;
}

O uso da visibilidade pode causar muitos problemas de espaçamento e páginas em branco. Isso ocorre porque a visibilidade mantém o espaço dos elementos, apenas o oculta, enquanto a tela o remove e permite que outros elementos ocupem seu espaço.

A razão pela qual essa solução funciona é que você não está pegando todos os elementos, apenas os filhos imediatos do corpo e os escondendo. As outras soluções abaixo, com display css, ocultam todos os elementos, o que afeta tudo o conteúdo do printableArea.

Eu não sugeriria javascript, pois você precisaria de um botão de impressão no qual o usuário clicasse e os botões de impressão padrão do navegador não teriam o mesmo efeito. Se você realmente precisa fazer isso, o que eu faria é armazenar o html do corpo, remover todos os elementos indesejados, imprimir e adicionar o html novamente. Como mencionado, eu evitaria isso se você puder e usar uma opção CSS como acima.

NOTA: Você pode adicionar qualquer CSS ao CSS de impressão usando estilos embutidos:

<style type="text/css">
@media print {
   //styles here
}
</style>

Ou, como eu costumo usar, é uma tag de link:

<link rel="stylesheet" type="text/css" media="print" href="print.css" />

— fanfavorite
fonte

E se a div que você deseja imprimir não for "um filho imediato do corpo"? Estou tentando fazer isso no vue.js .. Mas estou recebendo muitas páginas em branco ao usar a resposta aceita.

— svenema 8/01

@svenema, você pode usar qualquer CSS que desejar. Este foi apenas um exemplo.

— fanfavorite 9/01

hmm, ainda assim, quando tento isso, de fato não há páginas em branco adicionais, mas a div printableArea também não está sendo exibida; Eu só tenho uma página em branco vazia quando uso esse código.

— svenema 9/01

Eu descobri que é realmente porque a div printableArea não é um filho direto da tag body, quando eu o faço um filho direto, sua solução funciona; no entanto, no meu caso, não posso tornar a printableArea um filho direto. Existe uma maneira de contornar isso?

— svenema 9/01

@svenema, veja minha edição acima.

— fanfavorite 9/01

8

Dê o elemento que você deseja imprimir a identificação printMe.

Inclua este script na sua tag head:

<script language="javascript">
    var gAutoPrint = true;

    function processPrint(){

    if (document.getElementById != null){
    var html = '<HTML>\n<HEAD>\n';
    if (document.getElementsByTagName != null){
    var headTags = document.getElementsByTagName("head");
    if (headTags.length > 0) html += headTags[0].innerHTML;
    }

    html += '\n</HE' + 'AD>\n<BODY>\n';
    var printReadyElem = document.getElementById("printMe");

    if (printReadyElem != null) html += printReadyElem.innerHTML;
    else{
    alert("Error, no contents.");
    return;
    }

    html += '\n</BO' + 'DY>\n</HT' + 'ML>';
    var printWin = window.open("","processPrint");
    printWin.document.open();
    printWin.document.write(html);
    printWin.document.close();

    if (gAutoPrint) printWin.print();
    } else alert("Browser not supported.");

    }
</script>

Chame a função

<a href="javascript:void(processPrint());">Print</a>

— Jason Plank
fonte

Este é um bom trabalho. Mas muito complicado e não funcionará corretamente entre navegadores (especialmente navegadores mais antigos). Eu sugiro que você dê uma olhada na minha solução abaixo.

— Kevin Florida

6

hm ... use o tipo de uma folha de estilo para imprimir ... por exemplo:

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

print.css:

div { display: none; }
#yourdiv { display: block; }

— Andreas Niedermair
fonte

Isso não funcionará se o documento não for baseado em DIV ou #yourdiv também incluir outros DIVs.

— Gumbo

#yourdiv * {display: ...} se você colocar isso no topo da página e ter um navegador de up-to-date você pode então trabalhar com mais seletores para se esconder não divs

— Andreas Niedermair

"#yourdiv * {display: ...}" - o que deveria ser ... sem quebrar o layout?

— Greg

Isso exibirá elementos embutidos também como elementos de bloco. Mas “#yourdiv, #yourdiv div {display: block}” fará isso.

— Gumbo

@dittodhole - pense nisso por um minuto. O que você poderia colocar lá que não quebrará o layout no #yourdiv?

— Greg

6

<script type="text/javascript">
   function printDiv(divId) {
       var printContents = document.getElementById(divId).innerHTML;
       var originalContents = document.body.innerHTML;
       document.body.innerHTML = "<html><head><title></title></head><body>" + printContents + "</body>";
       window.print();
       document.body.innerHTML = originalContents;
   }
</script>

— Dilip Kr Singh
fonte

6

boa aparência, mas você perde todas as ligações javascript e outras impressões posteriores

— Julien

1

Está imprimindo sem css.

— Moxet Khan

6

Etapa 1: escreva o seguinte javascript dentro da tag head

<script language="javascript">
function PrintMe(DivID) {
var disp_setting="toolbar=yes,location=no,";
disp_setting+="directories=yes,menubar=yes,";
disp_setting+="scrollbars=yes,width=650, height=600, left=100, top=25";
   var content_vlue = document.getElementById(DivID).innerHTML;
   var docprint=window.open("","",disp_setting);
   docprint.document.open();
   docprint.document.write('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"');
   docprint.document.write('"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">');
   docprint.document.write('<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">');
   docprint.document.write('<head><title>My Title</title>');
   docprint.document.write('<style type="text/css">body{ margin:0px;');
   docprint.document.write('font-family:verdana,Arial;color:#000;');
   docprint.document.write('font-family:Verdana, Geneva, sans-serif; font-size:12px;}');
   docprint.document.write('a{color:#000;text-decoration:none;} </style>');
   docprint.document.write('</head><body onLoad="self.print()"><center>');
   docprint.document.write(content_vlue);
   docprint.document.write('</center></body></html>');
   docprint.document.close();
   docprint.focus();
}
</script>

Etapa 2: Chame a função PrintMe ('DivID') com um evento onclick.

<input type="button" name="btnprint" value="Print" onclick="PrintMe('divid')"/>
<div id="divid">
here is some text to print inside this div with an id 'divid'
</div>

— Hardik Thaker
fonte

É esse! Usou-o para um Modal e Gallerys. Não há erros de Javascript após o fechamento. Realmente útil, especialmente quando você usa modais com mais de uma página. Bem embrulha isso. Perfeito para pessoas que desejam imprimir na loja.

— TheWeeezel

2

Com o CSS 3, você pode usar o seguinte:

body *:not(#printarea) {
    display: none;
}

— quiabo
fonte

Não é possível usar que eu tenho medo ... (me corrigir se errado) a página que eu estou trabalhando é asp.net 1.1 / DHTML

— noesgard

Depende do navegador se o seletor: not () já está disponível ou não.

— Gumbo

Bem, então minha proposta é apenas uma olhada no futuro ... Não, sério. Eu apenas mencionei isso por uma questão de perfeição. Eu sei que não é viável no momento. Infelizmente.

— Gumbo

Você poderia usar jQuery e esse seletor que (acho) funcionaria no IE6 - $ ('body *: not (#printarea)'). Style ('display', 'none');

— David Heggie

2

isso ocultará todos os descendentes de #printarea, pois são correspondidos por *: not (#printarea). Então, basicamente, você acaba com um recipiente vazio.

— cytofu

2

Eu peguei o conteúdo usando JavaScript e criei uma janela que eu poderia imprimir em vez ...

— noesgard
fonte

Você pode compartilhar o código, ele tem problema de adotar css

— Moxet Khan

2

O método de Sandro funciona muito bem.

Eu o ajustei para permitir a permissão de vários links printMe, especialmente para uso em páginas com guias e expansão de texto.

function processPrint(printMe){ <- chamando por uma variável aqui

var printReadyElem = document.getElementById(printMe); <- removeu as aspas em torno do printMe para solicitar uma variável

<a href="javascript:void(processPrint('divID'));">Print</a><- passando o ID da div a ser impresso na função para transformar a variável printMe no ID da div. são necessárias aspas simples

2

printDiv (divId) : Uma solução generalizada para imprimir qualquer div em qualquer página.

Eu tinha um problema semelhante, mas queria (a) poder imprimir a página inteira ou (b) imprimir qualquer uma das várias áreas específicas. Minha solução, graças a grande parte das opções acima, permite especificar qualquer objeto div a ser impresso.

A chave para esta solução é adicionar uma regra apropriada à folha de estilos da mídia de impressão para que a div solicitada (e seu conteúdo) seja impressa.

Primeiro, crie o css de impressão necessário para suprimir tudo (mas sem a regra específica para permitir o elemento que você deseja imprimir).

<style type="text/css" media="print">
   body {visibility:hidden; }
   .noprintarea {visibility:hidden; display:none}
   .noprintcontent { visibility:hidden; }
   .print { visibility:visible; display:block; }
</style>

Observe que eu adicionei novas regras de classe:

A noprintarea permite suprimir a impressão de elementos dentro de sua divisão - o conteúdo e o bloco.
O noprintcontent permite suprimir a impressão de elementos dentro de sua div - o conteúdo é suprimido, mas a área alocada é deixada em branco.
impressão permite que você tenha itens que aparecem na versão impressa, mas não na página da tela. Eles normalmente terão "display: none" para o estilo da tela.

Em seguida, insira três funções JavaScript. O primeiro apenas ativa e desativa a folha de estilo da mídia de impressão.

function disableSheet(thisSheet,setDisabled)
{ document.styleSheets[thisSheet].disabled=setDisabled; }

O segundo faz o trabalho real e o terceiro limpa depois. O segundo (printDiv) ativa a folha de estilo da mídia de impressão e anexa uma nova regra para permitir que a div desejada seja impressa, emite a impressão e adiciona um atraso antes da limpeza final (caso contrário, os estilos podem ser redefinidos antes da impressão ser realmente feito.)

function printDiv(divId)
{
  //  Enable the print CSS: (this temporarily disables being able to print the whole page)
  disableSheet(0,false);
  //  Get the print style sheet and add a new rule for this div
  var sheetObj=document.styleSheets[0];  
  var showDivCSS="visibility:visible;display:block;position:absolute;top:30px;left:30px;";
  if (sheetObj.rules) { sheetObj.addRule("#"+divId,showDivCSS); }
  else                { sheetObj.insertRule("#"+divId+"{"+showDivCSS+"}",sheetObj.cssRules.length); }
  print();
  //  need a brief delay or the whole page will print
  setTimeout("printDivRestore()",100);  
}

As funções finais excluem a regra adicionada e definem o estilo de impressão novamente como desativado, para que toda a página possa ser impressa.

function printDivRestore()
{
  // remove the div-specific rule
  var sheetObj=document.styleSheets[0];  
  if (sheetObj.rules) { sheetObj.removeRule(sheetObj.rules.length-1); }
  else                { sheetObj.deleteRule(sheetObj.cssRules.length-1); }
  //  and re-enable whole page printing
  disableSheet(0,true);
}

A única outra coisa a fazer é adicionar uma linha ao seu processamento onload para que o estilo de impressão seja inicialmente desativado, permitindo a impressão de toda a página.

<body onLoad='disableSheet(0,true)'>

Então, de qualquer lugar do seu documento, você pode imprimir uma div. Basta emitir printDiv ("thedivid") de um botão ou o que for.

Uma grande vantagem dessa abordagem é fornecer uma solução geral para imprimir o conteúdo selecionado de dentro de uma página. Também permite o uso de estilos existentes para elementos impressos - incluindo a div que contém.

NOTA: Na minha implementação, esta deve ser a primeira folha de estilos. Altere as referências da planilha (0) para o número da planilha apropriado, se precisar fazê-lo posteriormente na sequência da planilha.

— DrDave
fonte

2

@ Kevin Florida Se você tem vários divs com a mesma classe, pode usá-lo assim:

 <div style="display:none">
   <div id="modal-2" class="printableArea">
     <input type="button" class="printdiv-btn" value="print a div!" />
   </div>
 </div>

eu estava usando o tipo de conteúdo interno do Colorbox

$(document).on('click', '.printdiv-btn', function(e) {
    e.preventDefault();

    var $this = $(this);
    var originalContent = $('body').html();
    var printArea = $this.parents('.printableArea').html();

    $('body').html(printArea);
    window.print();
    $('body').html(originalContent);
});

— Stefan
fonte

2

No meu caso, tive que imprimir uma imagem dentro de uma página. Quando usei a solução votada, eu tinha 1 página em branco e a outra mostrando a imagem. Espero que ajude alguém.

Aqui está o css que eu usei:

@media print {
  body * {
    visibility: hidden;
  }

  #not-print * {
    display: none;
  }

  #to-print, #to-print * {
    visibility: visible;
  }

  #to-print {
    display: block !important;
    position: absolute;
    left: 0;
    top: 0;
    width: auto;
    height: 99%;
  }
}

Meu html é:

<div id="not-print" >
  <header class="row wrapper page-heading">

  </header>

  <div class="wrapper wrapper-content">
    <%= image_tag @qrcode.image_url,  size: "250x250" , alt: "#{@qrcode.name}" %>
  </div>
</div>

<div id="to-print" style="display: none;">
  <%= image_tag @qrcode.image_url,  size: "300x300" , alt: "#{@qrcode.name}" %>
</div>

— Raphael Monteiro
fonte

2

Melhor css para caber na altura vazia do espaço:

@media print {
  body * {
    visibility: hidden;
    height:0;
  }
  #section-to-print, #section-to-print * {
    visibility: visible;
    height:auto;
  }
  #section-to-print {
    position: absolute;
    left: 0;
    top: 0;
  }
}

— TRI ÂN
fonte

2

A melhor maneira de imprimir uma determinada div ou qualquer elemento

printDiv("myDiv");

function printDiv(id){
        var printContents = document.getElementById(id).innerHTML;
        var originalContents = document.body.innerHTML;
        document.body.innerHTML = printContents;
        window.print();
        document.body.innerHTML = originalContents;
}

— Mahetab
fonte

1

Use uma folha de estilo especial para imprimir

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

e adicione uma classe, ou seja, "noprint" a cada tag cujo conteúdo você não deseja imprimir.

No uso de CSS

.noprint {
  display: none;
}

— Xn0vv3r
fonte

1

Se você deseja apenas imprimir esta div, deve usar a instrução:

@media print{
    *{display:none;}
    #mydiv{display:block;}
}

— Jason Plank
fonte

1

A função printDiv () saiu algumas vezes, mas nesse caso, você perde todos os seus elementos de ligação e valores de entrada. Então, minha solução é criar uma div para tudo chamado "body_allin" e outra fora do primeiro chamado "body_print".

Então você chama esta função:

function printDiv(divName){

    var printContents = document.getElementById(divName).innerHTML;

    document.getElementById("body_print").innerHTML = printContents;

    document.getElementById("body_allin").style.display = "none";
    document.getElementById("body_print").style.display = "";

    window.print();

    document.getElementById("body_print").innerHTML = "";
    document.getElementById("body_allin").style.display = "";
    document.getElementById("body_print").style.display = "none";

}

— pmrotule
fonte

Essa linha pode ser útil se você quiser um ID exclusivo: printContents = printContents.replace (/ id = ("| ') (. *?) (" |') / G, 'id = $ 1 $ 2_2 $ 3');

— Pmrotule 27/02

1

Você pode usar um estilo CSS separado que desativa todos os outros conteúdos, exceto aquele com o ID "printarea".

Consulte Design CSS: Indo para impressão para obter mais explicações e exemplos.

— Kosi2801
fonte

Atualizado o link para o novo local. Um comentário em vez de um voto negativo teria sido bom.

— precisa saber é o seguinte

1

Eu tinha várias imagens, cada uma com um botão, e precisava clicar em um botão para imprimir cada div com uma imagem. Esta solução funciona se eu tiver desativado o cache no meu navegador e o tamanho da imagem não for alterado no Chrome:

        function printDiv(divName) {

        var printContents = document.getElementById(divName).innerHTML;
        w = window.open();

        w.document.write(printContents);
        w.document.write('<scr' + 'ipt type="text/javascript">' + 'window.onload = function() { window.print(); window.close(); };' + '</sc' + 'ript>');

        w.document.close(); // necessary for IE >= 10
        w.focus(); // necessary for IE >= 10

        return true;
    }

<div id="printableArea">
      <h1>Print me</h1>
</div>

<input type="button" onclick="printDiv('printableArea')" value="print a div!" />

— amor ao vivo
fonte

1

Mais uma abordagem sem afetar a página atual e também persiste o css durante a impressão. Aqui, o seletor deve ser um seletor div específico, que conteúdo precisamos imprimir.

printWindow(selector, title) {
   var divContents = $(selector).html();
   var $cssLink = $('link');
   var printWindow = window.open('', '', 'height=' + window.outerHeight * 0.6 + ', width=' + window.outerWidth  * 0.6);
   printWindow.document.write('<html><head><h2><b><title>' + title + '</title></b></h2>');
   for(var i = 0; i<$cssLink.length; i++) {
    printWindow.document.write($cssLink[i].outerHTML);
   }
   printWindow.document.write('</head><body >');
   printWindow.document.write(divContents);
   printWindow.document.write('</body></html>');
   printWindow.document.close();
   printWindow.onload = function () {
            printWindow.focus();
            setTimeout( function () {
                printWindow.print();
                printWindow.close();
            }, 100);  
        }
}

Aqui, desde que haja um tempo limite, mostre que o css externo é aplicado a ele.

— Mukesh Kumar Suman
fonte

Às vezes, o CSS leva tempo para carregar. Essa é a abordagem que eu estava procurando para recarregar a página antes da impressão. Obrigado

— Arpit Shrivastava

1

Tentei muitas das soluções fornecidas, nenhuma delas funcionou perfeitamente. Eles perdem ligações CSS ou JavaScript. Encontrei uma solução perfeita e fácil que não perde as ligações CSS nem JavaScript.

HTML:

<div id='printarea'>
    <p>This is a sample text for printing purpose.</p>
    <input type='button' id='btn' value='Print' onclick='printFunc();'>
</div>
<p>Do not print.</p>

Javascript:

function printFunc() {
    var divToPrint = document.getElementById('printarea');
    var htmlToPrint = '' +
        '<style type="text/css">' +
        'table th, table td {' +
        'border:1px solid #000;' +
        'padding;0.5em;' +
        '}' +
        '</style>';
    htmlToPrint += divToPrint.outerHTML;
    newWin = window.open("");
    newWin.document.write("<h3 align='center'>Print Page</h3>");
    newWin.document.write(htmlToPrint);
    newWin.print();
    newWin.close();
    }

— BibanCS
fonte

Esta abertura e criação de outra janela que não funciona no Android. Somente o window.print () direto funciona.

— Merv

1

Estou muito atrasado para esta festa, mas gostaria de abordar outra abordagem. Eu escrevi um pequeno módulo JavaScript chamado PrintElements para imprimir dinamicamente partes de uma página da web.

Ele funciona através da iteração através dos elementos de nó selecionados e, para cada nó, ele percorre a árvore DOM até o elemento BODY. Em cada nível, incluindo o inicial (que é o nível do nó a ser impresso), ele anexa uma classe de marcador ( pe-preserve-print) ao nó atual. Em seguida, anexa outra classe de marcador ( pe-no-print) a todos os irmãos do nó atual, mas apenas se não houver pe-preserve-printclasse neles. Como terceiro ato, também atribui outra classe aos elementos ancestrais preservados pe-preserve-ancestor.

Um css suplementar de impressão simples simples oculta e mostra os respectivos elementos. Alguns benefícios dessa abordagem são que todos os estilos são preservados, ela não abre uma nova janela, não há necessidade de movimentar muitos elementos DOM e geralmente não é invasiva no documento original.

Veja a demonstração ou leia o artigo relacionado para obter mais detalhes .

— András Szepesházi
fonte

0

Você pode usar isso: http://vikku.info/codesnippets/javascript/print-div-content-print-only-the-content-of-an-html-element-and-not-the-whole-document/

Ou use visibility:visiblee visibility:hiddenpropriedade css junto com@media print{}

'display: none' oculta todos os 'display: block' aninhados. Isso não é solução.

— 0xC0DEGURU
fonte

0

Eu encontrei a solução.

@media print {
    .print-area {
        background-color: white;
        height: 100%;
        width: auto;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index:1500;
        visibility: visible;
    }
    @page{
        size: portrait;
        margin: 1cm;
    }
/*IF print-area parent element is position:absolute*/
    .ui-dialog,
    .ui-dialog .ui-dialog-content{
        position:unset !important;
        visibility: hidden;
    }
}

— user2573099
fonte

0

com base na resposta do @Kevin Florida, criei uma maneira de evitar o script na desativação da página atual devido à substituição do conteúdo. Eu uso outro arquivo chamado "printScreen.php" (ou .html). Enrole tudo o que você deseja imprimir em uma div "printSource". E com javascript, abra uma nova janela criada anteriormente ("printScreen.php") e, em seguida, pegue o conteúdo em "printSource" da janela superior.

Aqui está o código.

Janela principal :

echo "<div id='printSource'>";
//everything you want to print here
echo "</div>";

//add button or link to print
echo "<button id='btnPrint'>Print</button>";

<script>
  $("#btnPrint").click(function(){
    printDiv("printSource");
  });

  function printDiv(divName) {
   var printContents = document.getElementById(divName).innerHTML;
   var originalContents = document.body.innerHTML;
   w=window.open("printScreen.php", "_blank", "toolbar=yes,scrollbars=yes,resizable=yes,top=50,left=50,width=900,height=400");
   }
</script>

Este é "printScreen.php" - outro arquivo para pegar o conteúdo para imprimir

<head>
// write everything about style/script here (.css, .js)

</head>
<body id='mainBody'></body>
</html>


<script>
    //get everything you want to print from top window
    src = window.opener.document.getElementById("printSource").innerHTML;

    //paste to "mainBody"
    $("#mainBody").html(src);
    window.print();
    window.close();
</script>

— QeiNui
fonte