Como faço para imprimir parte de uma página HTML renderizada em JavaScript?

O código JavaScript window.print () pode imprimir a página HTML atual.

Se eu tiver um div em uma página HTML (por exemplo, uma página renderizada a partir de uma visualização do ASP.NET MVC ), quero imprimir apenas o div.

Existe algum JavaScript não intrusivo do jQuery ou código JavaScript normal para implementar este pedido?

Deixando isso mais claro, suponha que a página HTML renderizada seja como:

       
....
....
....
....
....

Então eu quero clicar no botão Imprimir, apenas imprimindo div3.

Eu faria um pouco assim:

   Print Test Page    

This is a test page for printing

Div 1: Print
This is the div1's print output


Div 2: Print
This is the div2's print output


Div 3: Print
This is the div3's print output

Na mesma linha de algumas das sugestões, você precisa fazer pelo menos o seguinte:

  • Carregue alguns CSS dinamicamente através do JavaScript
  • Crie algumas regras CSS específicas para impressão
  • Aplique suas regras de fantasia CSS através de JavaScript

Um exemplo de CSS pode ser tão simples quanto isto:

 @media print { body * { display:none; } body .printable { display:block; } } 

Seu JavaScript, então, só precisa aplicar a class “imprimível” ao seu div de destino e será a única coisa visível (contanto que não haja outras regras de CSS conflitantes – um exercício separado) quando a impressão acontecer.

  

Você pode querer, opcionalmente, remover a class do destino após a impressão ter ocorrido e / ou remover o CSS adicionado dinamicamente após a impressão ter ocorrido.

Abaixo está um exemplo completo de trabalho, a única diferença é que o CSS de impressão não é carregado dinamicamente. Se você quer que seja realmente discreto, então você precisará carregar o CSS dinamicamente como nesta resposta .

 < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    Print Portion Example     

Print Section Example

Div 1
Div 2
Div 3
Div 4
Div 5
Div 6

Experimente este código JavaScript:

 function printout() { var newWindow = window.open(); newWindow.document.write(document.getElementById("output").innerHTML); newWindow.print(); } 
 
...Your html Page content here....

Para o código printThis.js, copie e coloque abaixo o URL em uma nova aba https://raw.githubusercontent.com/jasonday/printThis/master/printThis.js

Você pode usar uma folha de estilo de impressão, mas isso afetará todas as funções de impressão.

Você poderia tentar ter uma folha de estilos de impressão externa, e ela é incluída via JavaScript quando um botão é pressionado, e depois chamar window.print() , depois disso, removê-la.