Alguns aplicativos do site precisam fornecer a função de os usuários imprimirem as páginas diretamente. O mais óbvio são os cupons eletrônicos que inserem o conteúdo de acordo com o modelo fornecido pelo site e, em seguida, geram uma página de cupom. , é um cupom.
Claro, a melhor maneira é gerar um arquivo de imagem com base nesta página. O usuário baixa a imagem e depois a imprime. O efeito de impressão não será afetado pelas configurações do navegador.
Mas se por algum motivo, para agilizar ou economizar custos, você não salvar a página como um arquivo de imagem, então você só poderá imprimir a página HTML diretamente, o que requer alguns requisitos adicionais no design da página, aqui Dois coisas precisam ser observadas:
1. Defina os atributos da tag de estilo:
<style type=”text/css” media=”imprimir”>
Isso significa que os atributos de estilo introduzidos ou definidos neste estilo são usados apenas durante a impressão. Lembre-se, se o atributo de mídia não estiver definido, o estilo definido terá efeito tanto no navegador quanto na impressão, por isso é recomendado usar um. estilo como este Colocado depois de todos os estilos regulares. Por exemplo, esperamos que haja uma linha "Print and Yahoo Word of Mouth Network" na página impressa, mas isso não é realista no navegador:
<p class="printTitle">Rede boca-a-boca impressa e Yahoo</p>
Então podemos definir .printTitle{display:none;} no estilo unificado e defini-lo como .printTitle{display:block;} no estilo subsequente onde a mídia é "print". Os estilos de impressão definidos não têm prioridade mais alta do que os estilos definidos regularmente durante a impressão, por isso é novamente recomendado colocar os estilos de impressão depois de todos os estilos regulares.
2. Quando a página for impressa, as configurações do navegador terão impacto no efeito de impressão. No IE, existe uma opção "Imprimir cor de fundo e imagem" em "Ferramentas" - "Opções da Internet" - "Avançado", semelhante no Firefox. Em "Arquivo" - "Configurar página", há uma opção "Imprimir cor e imagem de fundo". Quando esta opção é selecionada, a cor de fundo e a imagem da página podem ser impressas (alguns navegadores de kernel não padrão do IE parecem ter). algum problema, a cor de fundo pode ser impressa, mas a imagem de fundo não). Se não for selecionada, nem a cor de fundo nem a imagem poderão ser impressas. Portanto, para proteger os usuários de diferentes navegadores e configurações do navegador, sugiro dois. O primeiro é usar A área preenchida com a cor de fundo é usada como limite e uma borda de 1px é adicionada. A cor é igual à cor de fundo, para que nenhuma alteração possa ser vista no navegador. mesmo que as configurações do usuário impeçam a impressão da cor de fundo, ainda pode haver bordas usadas como divisões e o layout da página é mantido na camada maior. A segunda é usar tags <img/> para todas as imagens essenciais; para que essas imagens possam ser impressas independentemente da configuração do navegador do usuário. Isso pode ser o mesmo que Normalmente algumas páginas são desenhadas de maneiras diferentes, mas para unificar o efeito de impressão basta ceder.
Simplesmente levantei alguns problemas encontrados em aplicações práticas. Se você tiver quaisquer novas perguntas ou ideias, poderá trazê-las para discussão juntos.
Texto original: http://ued.koubei.com/?p=918