Como você pode fazer um envio página da web para os diferentes algo de impressora que o que está na janela do navegador?

StackOverflow https://stackoverflow.com/questions/85019

  •  01-07-2019
  •  | 
  •  

Pergunta

O Google Maps usado para fazer isso bit onde quando você acertar o link "Imprimir", o que seria enviado para a impressora não foi exatamente o que você tinha na tela, mas sim uma versão diferente formatado na maior parte a mesma informação .

Parece que eles já em grande parte se afastou este conceito (eu acho que as pessoas não entendem) e a maioria dos sites tem uma "versão de impressão" de coisas como artigos e assim por diante.

Mas se você quiser fazer uma página web de tal forma que uma "impressora friendly" versão da página é o que é enviado para a impressora sem ter que fazer uma página separada para ele, como você faria isso?

Acompanhamento : você pode ter as coisas serem impressos que não são processados ??na página? (Ou seja, escondido de atualmente sendo processado)?

Foi útil?

Solução

Sim, você pode aplicar um css impressora. Há um bom artigo sobre ele aqui .

Outras dicas

Você pode conseguir este efeito através da criação de uma folha de estilo CSS, que é direcionado diretamente para imprimir, e outra direcionada diretamente para a tela.

Use a tag link: 

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

para incorporar sua folha de estilo em seu documento.

Para ocultar é fácil, basta definir o estilo do bloco para oculto em qualquer folha de estilo que você quer e não vai ser exibido. Por exemplo: 

.newStyle1 {
    display: none;
}

set nada Então ao estilo de newStyle1 não será exibido.

Você pode fazer isso com o css quando especificar mídia como impressão.

A regra @media em CSS pode ser usado para definir regras alternativas para print.This é frequentemente usado para esconder a navegação e mudar o estilo de impressão melhor ajuste: 

@media print {
  .sidebar { display: none; }
}

Você também pode vincular uma folha de estilo separada para impressão: 

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

Outra forma, se desejado, é ter o botão 'print' na mudança de página a página de alguma maneira que você decidir, em seguida, executar um javascript 'window.print ();' para abrir de diálogo de impressão do navegador.

Existem várias opções disponíveis para você:

  • Você pode abrir uma nova janela com dados ligeiramente diferentes a serem impressas.
  • Existem também estilos CSS que você pode usar para alterar o layout da página.
  • Finalmente, você pode especificar completamente diferentes folhas de estilo para tela, mídia impressa, Braille leitores etc.

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

Veja também CSS2 Imprimir Referência

Use a estilo de impressão .

Editar:. Quanto ao acompanhamento, você não pode, em geral, adicionar coisas a uma página com CSS

Uma opção é incluir o seu conteúdo somente para impressão na página, e escondê-lo em estilo de tela. Você deve se certificar de que a página ainda faz sentido sem CSS embora.

Outra opção é usar o conteúdo gerado, mas isso não é suportado pelo Internet Explorer 7 e abaixo, e pode ser bastante limitado.

Se o conteúdo somente para impressão é uma imagem, você pode trocar isso usando uma das técnicas populares de substituição de imagem.

A maneira mais fácil é usar tipos de mídia CSS. Para cada arquivo CSS você incluir, você pode especificar onde deve ser utilizado:. Na tela, durante a impressão, para computadores de mão, para leitores de tela, ou várias combinações destes

Exemplo:

Este tem sido um padrão desde CSS2, ea maioria dos navegadores apoiá-lo agora. Mais informações estão disponíveis aqui: http://www.w3.org/TR/CSS2/ media.html

CSS permite criar folhas de estilo para determinados tipos de mídia, o que significa que você pode ter uma folha de estilo que só se aplica quando você está imprimindo uma página, permitindo-lhe fazer com que seja formatado de forma diferente.

Basta incluir uma mídia = "imprimir" atributo no seu link de estilo para esse estilo.

Este A lista de artigos Além parece ser bastante boa sobre o assunto.

Eu tentei usar diferentes folhas de estilo com base nos meios de comunicação, mas eu corri em problemas para obter todas as opções que eu precisava no. Desde então eu costumo redirecionar para uma entrada diferente do nosso quadro (Fusebox) (ie print.php em vez de index.php) que, em essência, é o mesmo arquivo, exceto que define um sinalizador de cama / constante.

No arquivo XSL associado com a página que eu, em seguida, faça um trabalho adicional com base nesse sinalizador / constante como deixar o menu, colunas de uma tabela etc.

i. (Página mostra um link que o usuário tem que clicar para exibir a senha na tela. A versão impressa tem a senha impressa.) 

if (!BOOL_PRINT)
  echo "<TD class=\"tbl_teams_scroll_item\"><SPAN class=\"span_password_hidden\" id=\"span_password_{\$team_id}\" onClick=\"RevealPassword('{\$team_id}','{\$password}');\"><xsl:value-of select=\"/PAGE/TEXTS/HIDDEN\" /></SPAN></TD>\n";
else
  echo "TD class=\"tbl_teams_scroll_item\"><xsl:value-of select=\"PASSWORD\" /></TD>\n";

Você pode definir regras css que são específicos para um tipo de mídia. O seguinte é um exemplo CSS (copiado do http://www.w3.org/TR /CSS2/media.html , seção 7.2.1) que especifica diferentes tamanhos de fonte que é exibido em uma página da web eo que será impresso. 

 @media print {
    BODY { font-size: 10pt }
  }
  @media screen {
    BODY { font-size: 12pt }
  }
  @media screen, print {
    BODY { line-height: 1.2 }
  }

Como alternativa, você pode especificar o que media uma folha de estilo deve ser aplicado quando incluí-lo em uma página: 

 <link href="webstyles.css" type="text/css" rel="stylesheet" media="screen"/>
 <link href="printstyles.css" type="text/css" rel="stylesheet" media="print"/>
 <link href="commonstyles.css" type="text/css" rel="stylesheet" media="screen,print"/>

No entanto, outra opção é ter um IFRAME oculto que você chama iframe.contentWindow.print () no. Isso permitirá que você criar um layout invisível que imprime exatamente como você quer que ele.

É claro, uma solução ainda melhor é exportar o arquivo para um PDF e permitir que o usuário imprimi-lo dessa forma. PDFs produzir a mais alta qualidade de saída, período. No entanto, é mais um aro para o usuário que saltar através de, por isso, a regra de ouro é:

  • PDFs para quando os assuntos de layout de impressão
  • HTML para quando o texto puro é mais importante do que o layout

Qualquer coisa que você pode fazer com CSS você pode fazer em uma folha de estilo de impressão. Isto significa que você pode ocultar o conteúdo na versão impressa que é mostrado na versão cinematográfica ou esconder o conteúdo na versão de tela que você quer mostrar-se quando printing.All você fazer é aplicar display: none para as seções apropriadas no estilo apropriado.

Também é uma boa idéia para o tamanho do seu texto em pontos para a versão impressa (que é uma mau idéia para a versão de tela - vara para pixels, ems ou percentagens aqui). Há um consenso universal sobre o que impresso tamanhos de ponto são onde, como mapeamentos de pixels para pontos variará com dispositivos de resolução diferentes.

Aqui está outro link de A List Apart sobre a impressão css chamado Imprimindo um livro com CSS: Crescimento! http://www.alistapart.com/articles/boom/

nsayer menciona ter uma mudança botão de impressão do layout da tela e, em seguida, dando início a uma window.print()

Esta é uma solução que irá provavelmente ter sido negligenciado por muitas pessoas e deve ser considerado quando você acha que seus usuários querem um pouco mais de um WYSIWYG. Provavelmente deve ser um link "impressão" no entanto, que altera o tipo de mídia de sua folha folhas ao invés de "imprimir esta".

Usando jQuery, você poderia fazer algo assim (não marcado): 

$(document).ready(function(){
    $("#printFriendly").click(function(){
       $(link[rel=link][media=screen]).remove();
       $(link[rel=link][media=print]).attr("media","screen");
    });
});
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top