Como imprimir o conteúdo HTML no clique de um botão, mas não na página?

Como imprimir o conteúdo HTML no clique de um botão, mas não na página?
Quando um usuário clica em um botão, o HTML permite que eles adicionem dados a um contêiner e imprimam algum conteúdo HTML. Como resultado, o diálogo de impressão do navegador é aberto, mas o conteúdo da página da web não é impresso. No entanto, esta operação imprime algum outro texto em HTML que não é visível na página.

Esta postagem demonstrará sobre a impressão do conteúdo HTML com o clique de um botão, mas não a página.

Como imprimir o conteúdo do HTML clicando em um botão?

O CSS “@meios de comunicação”A regra é utilizada para aplicar uma seção de uma folha de estilo com base nos resultados de uma ou mais consultas de mídia. Os usuários podem fornecer uma consulta de mídia se e somente se ela satisfazer o dispositivo utilizado para visualizar o conteúdo.

Para imprimir o conteúdo HTML com um clique de um botão, tente as instruções abaixo.

Etapa 1: Insira a primeira direção

Primeiro de tudo, adicione o primeiro título com a ajuda da tag de título de “

" para o "
”Tag, onde o

A tag é utilizada para o título mais importante.

Etapa 2: Adicione o segundo cabeçalho

Em seguida, adicione um segundo título usando o “

Etapa 3: Crie o botão

Depois disso, crie um botão utilizando o “" elemento. Em seguida, adicione os seguintes atributos dentro:

  • ““tipo”Atributo aloca o tipo de entrada. Por exemplo, o “botão”O tipo é utilizado para criar um botão.
  • Em seguida, o “valor”O atributo é utilizado para especificar o valor para um elemento de entrada. Este atributo pode ser usado de várias maneiras para vários tipos de entrada.
  • O usuário pode utilizar o “ONCLICK”Atributo para realizar um evento em um elemento HTML.
  • ““aula”Especifica uma ou mais classes para um elemento. O atributo de classe é usado principalmente para apontar para uma classe em uma folha de estilo:


Linuxhint Content Creators (imprima isto)



Criadores de conteúdo TSL (sem impressão)


Como resultado, é criado um botão que pode ser utilizado para imprimir o conteúdo HTML no clique de um botão.

Como imprimir o conteúdo HTML no clique de um botão, mas não na página?

Para imprimir o conteúdo HTML com o clique de um botão sem imprimir a página inteira, observe as instruções fornecidas.

Etapa 1: Utilize a regra "@media"

Agora, utilize o “@meios de comunicação”Regra para imprimir o conteúdo específico da div sem imprimir a página inteira. Para fazer isso, acesse a classe div usando o “.NoprinaSeletor T ”.

Etapa 2: Atributo da classe de acesso

@media print
.Noprint
Mostrar nenhum;


H1
Cor: RGBA (50, 9, 233, 0.4);

Acesse o atributo de classe utilizando o valor da classe e aplique o “mostrar”Propriedade do CSS com o valor“nenhum”. Então, aplique o “cor”Propriedade para o cabeçalho que o usuário deseja imprimir.

Saída

Pode -se observar que, quando o botão é clicado, o conteúdo HTML adicionado está pronto para imprimir.

Conclusão

Para imprimir o conteúdo do HTML clicando em um botão, mas não na página, primeiro, crie dois títulos. Em seguida, crie um botão utilizando o “”Elemento e adicione os atributos, incluindo“tipo","ONCLICK", e "aula”. Em seguida, use o “janela.imprimir()"Como um"ONCLICK" valor. Depois disso, utilize o “@meios de comunicação.imprimir”Regra e acesse o valor da classe para imprimir o conteúdo HTML com o clique de um botão. Esta postagem demonstrou o método para imprimir o conteúdo com o clique de um botão.