Crie Relatórios HTML Deslumbrantes com PowerShell & CSS

PowerShell é uma ferramenta poderosa que ajuda a simplificar e automatizar tarefas tediosas e repetitivas. Os administradores geralmente utilizam o PowerShell para extrair informações de um sistema ou banco de dados quando o conjunto de dados necessário precisa ser apresentado como um relatório. No entanto, relatórios em arquivos de texto ou CSV geralmente carecem do estilo e formatação elegante do HTML. Neste tutorial, você aprenderá como criar um Relatório HTML com PowerShell,

O PowerShell pode ajudar você a construir relatórios HTML e se afastar desses outros formatos sem graça. Usando apenas o PowerShell, você pode dar vida a um relatório com HTML, permitindo que você faça uma apresentação significativa dos dados brutos extraídos do sistema. Você pode até aplicar Folhas de Estilo em Cascata (CSS) para personalizar facilmente o layout do seu relatório.

Neste artigo, você aprenderá a usar o ConvertTo-HTML em conjunto com os cmdlets Out-file para gerar um relatório HTML. Você também aprenderá o básico de scripting para CSS e como ele pode ser útil na formatação do design do seu relatório baseado em HTML.

Pré-requisitos

Este artigo será um passo a passo. Se você pretende acompanhar, certifique-se de ter os seguintes pré-requisitos configurados com antecedência.

  • Todos os exemplos serão mostrados usando o Windows 10 Build 1709, mas essa versão não é obrigatória
  • Windows PowerShell 5.1 ou versão posterior, ou PowerShell Core 7
  • Navegador como Internet Explorer ou Google Chrome

Criando um Relatório Básico de Informações de Computador usando ConvertTo-Html

Para demonstrar como usar o cmdlet ConvertTo-Html e seus parâmetros, você vai criar um script que obtém informações básicas de uma máquina (como Sistema Operacional, Processador, BIOS e espaço disponível em disco) e gera as informações em um relatório HTML.

Você começa com um comando que coleta informações sobre a versão do sistema operacional de uma máquina. Abra o console do PowerShell e copie e cole o comando abaixo, em seguida, pressione Enter para executar o comando.

Get-CimInstance -Class Win32_OperatingSystem | Select-object Version,Caption,BuildNumber,Manufacturer

Ao executar o comando acima, o cmdlet Get-CimInstance coleta as propriedades da classe Win32_OperatingSystem, que contém as informações sobre o sistema operacional da máquina. O comando retornará muitos resultados, portanto, é necessário um filtro para obter apenas as informações relevantes. O resultado deve se parecer com a captura de tela mostrada abaixo.

Machine’s Operating System Information

Agora que você obteve o comando para retornar as informações do sistema operacional, vamos converter o resultado em código HTML. Para converter o resultado (objetos) do comando acima em código HTML, você pode encaminhar a saída do cmdlet Get-CimInstance para o ConvertTo-Html. Execute o comando abaixo no seu console do PowerShell.

Get-CimInstance -Class Win32_OperatingSystem | Select-object Version,Caption,BuildNumber,Manufacturer |  ConvertTo-Html

Você pode ver na captura de tela abaixo que o PowerShell gera automaticamente as tags HTML a partir da saída do cmdlet Get-CimInstance. O resultado é exibido em formato de tabela, onde o cabeçalho da tabela mostra os nomes das propriedades, como Versão, Captura, Número da Compilação e Fabricante. Cada linha da tabela representa um objeto e exibe os valores do objeto para cada propriedade.

Generated HTML code

Exportando o Relatório para um Arquivo HTML

Agora que você obteve o resultado e o converteu para código HTML, vamos exportar o relatório para um arquivo HTML usando o cmdlet Out-file e visualizar o relatório em um navegador da web. Encaminhe a saída do cmdlet ConvertTo-Html e especifique o caminho onde deseja salvar o relatório usando o parâmetro -FilePath e use Relatório de Informações Básicas do Computador.html como nome do arquivo.

Abra seu PowerShell ISE ou qualquer editor de texto, copie o código abaixo e salve o script com o nome de arquivo Gerar-Relatorio-HTML.Ps1

Get-CimInstance -Class Win32_OperatingSystem | Select-object Version,Caption,BuildNumber,Manufacturer | ConvertTo-Html | Out-File -FilePath .\Basic-Computer-Information-Report.html

Execute o script Gerar-Relatorio-HTML.Ps1 em seu Console do PowerShell

.\Generate-HTML-Report.Ps1

Depois de executar o script, abra o arquivo Relatório de Informações Básicas do Computador.html em um navegador da web. O navegador da web interpreta o código do relatório HTML e exibe os dados na tela do navegador. O relatório deve conter informações sobre o sistema operacional da máquina semelhante à captura de tela abaixo.

HTML report viewed in a web browser

Combinando Relatórios Usando o Parâmetro Fragmento

1. Neste momento, você já possui um script que obtém informações do sistema operacional da máquina e exporta o resultado para o relatório HTML. Seu objetivo é adicionar mais comandos ao script para obter as informações restantes do computador, como Processador, BIOS, Disco e Serviços.

Cada comando retornará informações diferentes do computador formatadas como código HTML. Para consolidar corretamente as informações em um único relatório HTML, use o parâmetro Fragment para obter apenas a parte da tabela do código HTML gerado pelo cmdlet ConvertTo-Html.

Como você pode ver na captura de tela abaixo, o PowerShell gera todos os elementos HTML básicos quando a saída é direcionada para o cmdlet ConvertTo-Html.

List of generated HTML code using ConvertTo-Html cmdlet

Ao usar o parâmetro Fragment, o PowerShell gera apenas o elemento da tabela HTML. Os elementos <HTML>, <HEAD>, <TITLE>, <BODY> e outros são omitidos. O resultado é mostrado abaixo.

List of HTML code for table using Fragment parameter

Agora que você já sabe como o parâmetro Fragment funciona a partir do exemplo acima, vamos aplicá-lo no script.

Os comandos no script abaixo realizam o seguinte:

  • As primeiras cinco linhas de comandos obtêm diferentes informações da máquina, como Sistema Operacional, Processador, BIOS, Disco e Serviços.
  • Filtre o resultado usando o parâmetro -Property para exibir apenas os valores relevantes
  • Armazene os valores em variáveis ​​respeitando. Cada informação é formatada como tabela usando -Fragment
  • Consolide as tabelas HTML usando o parâmetro -Body em um único relatório HTML
  • Defina o título do relatório como “Relatório de Informações do Computador” usando o parâmetro -Title
  • Exporte o relatório como arquivo HTML usando o parâmetro Out-file

Informações adicionais sobre o script estão disponíveis nos comentários no trecho de código abaixo. Atualize o script com o seguinte código.

#O comando abaixo obterá as informações do Sistema Operacional, converterá o resultado em código HTML como uma tabela e armazenará em uma variável
$OSinfo = Get-CimInstance -Class Win32_OperatingSystem | ConvertTo-Html -Property Version,Caption,BuildNumber,Manufacturer -Fragment

#O comando abaixo obterá as informações do Processador, converterá o resultado em código HTML como tabela e armazenará em uma variável
$ProcessInfo = Get-CimInstance -ClassName Win32_Processor | ConvertTo-Html -Property DeviceID,Name,Caption,MaxClockSpeed,SocketDesignation,Manufacturer -Fragment

#O comando abaixo obterá as informações da BIOS, converterá o resultado em código HTML como tabela e armazenará em uma variável
$BiosInfo = Get-CimInstance -ClassName Win32_BIOS | ConvertTo-Html -Property SMBIOSBIOSVersion,Manufacturer,Name,SerialNumber -Fragment

#O comando abaixo obterá os detalhes do Disco, converterá o resultado em código HTML como tabela e armazenará em uma variável
$DiscInfo = Get-CimInstance -ClassName Win32_LogicalDisk -Filter "DriveType=3" | ConvertTo-Html -Property DeviceID,DriveType,ProviderName,VolumeName,Size,FreeSpace -Fragment

#O comando abaixo obterá informações dos primeiros 10 serviços, converterá o resultado em código HTML como tabela e armazenará em uma variável
$ServicesInfo = Get-CimInstance -ClassName Win32_Service | Select-Object -First 10  |ConvertTo-Html -Property Name,DisplayName,State -Fragment
 
#O comando abaixo combinará todas as informações coletadas em um único relatório HTML
$Report = ConvertTo-HTML -Body "$ComputerName $OSinfo $ProcessInfo $BiosInfo $DiscInfo $ServicesInfo" -Title "Computer Information Report" 

#O comando abaixo gerará o relatório para um arquivo HTML
$Report | Out-File .\Basic-Computer-Information-Report.html

Execute o script no console do PowerShell. Você pode ver a saída do relatório conforme mostrado abaixo.

HTML report with basic computer information

Adicionando Etiqueta Usando Parâmetros PreContent e PostContent

Neste ponto, o script agora pode obter todas as informações básicas de um computador e exportar o resultado para HTML. No entanto, como você pode ver na captura de tela acima, alguém ou um destinatário do relatório pode ter dificuldade em entender o conteúdo quando você remove a anotação, pois as informações não estão devidamente rotuladas ou categorizadas.

Ao usar os parâmetros PreContent e PostContent, você pode adicionar etiquetas em cada tabela para que qualquer pessoa possa facilmente discernir o conteúdo do relatório.

O parâmetro PreContent especifica o texto a ser adicionado antes da tag de abertura <TABLE> e o parâmetro PostContent especifica o texto a ser adicionado após a tag de fechamento </TABLE>. Os valores adicionados nesses parâmetros não são automaticamente convertidos em código HTML, portanto, você precisa usar explicitamente tags HTML para que sejam renderizados corretamente como elementos HTML.

Atualize o script usando os comandos abaixo e depois execute o script no console do PowerShell.

Abaixo estão as alterações no script:

  • Um novo comando é adicionado para obter o nome do computador. O valor da variável $ComputerName tem a tag <h1> para alterar o formato do texto para cabeçalho quando renderizado em um navegador.
  • Diferentes etiquetas são adicionadas em cada tabela usando o Parâmetro PreContent e os valores são colocados em tags <h2>
  • Uma etiqueta de data de criação é adicionada ao final do relatório usando o Parâmetro PostContent e o valor é colocado na tag <p>.
#O comando abaixo irá obter o nome do computador
$ComputerName = "<h1>Computer name: $env:computername</h1>"

#O comando abaixo irá obter informações do Sistema Operacional, converter o resultado para código HTML como tabela e armazená-lo em uma variável
$OSinfo = Get-CimInstance -Class Win32_OperatingSystem | ConvertTo-Html -Property Version,Caption,BuildNumber,Manufacturer -Fragment -PreContent "<h2>Operating System Information</h2>"

#O comando abaixo irá obter informações do Processador, converter o resultado para código HTML como tabela e armazená-lo em uma variável
$ProcessInfo = Get-CimInstance -ClassName Win32_Processor | ConvertTo-Html -Property DeviceID,Name,Caption,MaxClockSpeed,SocketDesignation,Manufacturer -Fragment -PreContent "<h2>Processor Information</h2>"

#O comando abaixo irá obter informações da BIOS, converter o resultado para código HTML como tabela e armazená-lo em uma variável
$BiosInfo = Get-CimInstance -ClassName Win32_BIOS | ConvertTo-Html -Property SMBIOSBIOSVersion,Manufacturer,Name,SerialNumber -Fragment -PreContent "<h2>BIOS Information</h2>"

#O comando abaixo irá obter detalhes do Disco, converter o resultado para código HTML como tabela e armazená-lo em uma variável
$DiscInfo = Get-CimInstance -ClassName Win32_LogicalDisk -Filter "DriveType=3" | ConvertTo-Html -Property DeviceID,DriveType,ProviderName,VolumeName,Size,FreeSpace -Fragment -PreContent "<h2>Disk Information</h2>"

#O comando abaixo irá obter informações dos primeiros 10 serviços, converter o resultado para código HTML como tabela e armazená-lo em uma variável
$ServicesInfo = Get-CimInstance -ClassName Win32_Service | Select-Object -First 10  | ConvertTo-Html -Property Name,DisplayName,State -Fragment -PreContent "<h2>Services Information</h2>"

#O comando abaixo irá combinar todas as informações coletadas em um único relatório HTML
$Report = ConvertTo-HTML -Body "$ComputerName $OSinfo $ProcessInfo $BiosInfo $DiscInfo $ServicesInfo" -Title "Computer Information Report" -PostContent "<p>Creation Date: $(Get-Date)<p>"

#O comando abaixo irá gerar o relatório em um arquivo HTML
$Report | Out-File .\Basic-Computer-Information-Report.html

Você pode ver que com um pouco de trabalho extra, o relatório pode ficar muito melhor, o relatório deve ser atualizado conforme mostrado abaixo.

HTML report added with labels using PreContent and PostContent Parameters

Alterando o Layout da Tabela Usando o Parâmetro As

Talvez, a tabela HTML gerada tenha várias colunas e você queira alterar o formato para exibir corretamente o valor como uma lista. Nesse caso, você pode usar o parâmetro As. Por padrão, quando você direciona a saída para ConvertTo-html, o PowerShell gera uma tabela HTML que se assemelha ao formato de tabela do Windows PowerShell.

Como você pode ver na captura de tela abaixo, o cabeçalho da tabela exibe os nomes das propriedades, como Versão, Legenda, Número da Versão e Fabricante, e cada linha da tabela representa um objeto, exibindo os valores do objeto para cada propriedade.

HTML code generated by ConvertTo-Html cmdlet formatted as Table

Para alterar o layout da tabela para lista, use o parâmetro -As, seguido por List. O PowerShell gera uma tabela HTML de duas colunas para cada objeto que se assemelha ao formato de lista do Windows PowerShell. A primeira coluna exibe os nomes das propriedades, como Versão, Legenda, Número da Versão e Fabricante, e a segunda coluna exibe o valor da propriedade.

HTML code generated by ConvertTo-Html cmdlet formatted as List

A partir dos exemplos acima, agora você tem uma ideia de como alterar o layout da tabela. Vamos aplicar o parâmetro As em nosso script para alterar o layout das tabelas de informações do Sistema Operacional, Processador, BIOS e Disco para o formato de lista.

Atualize o script com o código abaixo. O script possui o parâmetro -As nas linhas de comando para Sistema Operacional, Processador, BIOS e Disco.

#O comando abaixo irá obter o nome do computador
$ComputerName = "<h1>Computer name: $env:computername</h1>"

#O comando abaixo irá obter as informações do Sistema Operacional, converter o resultado para código HTML como tabela e armazená-lo em uma variável
$OSinfo = Get-CimInstance -Class Win32_OperatingSystem | ConvertTo-Html -As List -Property Version,Caption,BuildNumber,Manufacturer -Fragment -PreContent "<h2>Operating System Information</h2>"

#O comando abaixo irá obter as informações do Processador, converter o resultado para código HTML como tabela e armazená-lo em uma variável
$ProcessInfo = Get-CimInstance -ClassName Win32_Processor | ConvertTo-Html -As List -Property DeviceID,Name,Caption,MaxClockSpeed,SocketDesignation,Manufacturer -Fragment -PreContent "<h2>Processor Information</h2>"

#O comando abaixo irá obter as informações da BIOS, converter o resultado para código HTML como tabela e armazená-lo em uma variável
$BiosInfo = Get-CimInstance -ClassName Win32_BIOS | ConvertTo-Html -As List -Property SMBIOSBIOSVersion,Manufacturer,Name,SerialNumber -Fragment -PreContent "<h2>BIOS Information</h2>"

#O comando abaixo irá obter os detalhes do Disco, converter o resultado para código HTML como tabela e armazená-lo em uma variável
$DiscInfo = Get-CimInstance -ClassName Win32_LogicalDisk -Filter "DriveType=3" | ConvertTo-Html -As List -Property DeviceID,DriveType,ProviderName,VolumeName,Size,FreeSpace -Fragment -PreContent "<h2>Disk Information</h2>"

#O comando abaixo irá obter as informações dos 10 primeiros serviços, converter o resultado para código HTML como tabela e armazená-lo em uma variável
$ServicesInfo = Get-CimInstance -ClassName Win32_Service | Select-Object -First 10  |ConvertTo-Html -Property Name,DisplayName,State -Fragment -PreContent "<h2>Services Information</h2>"
  
#O comando abaixo irá combinar todas as informações coletadas em um único relatório HTML
$Report = ConvertTo-HTML -Body "$ComputerName $OSinfo $ProcessInfo $BiosInfo $DiscInfo $ServicesInfo" -Title "Computer Information Report" -PostContent "<p>Creation Date: $(Get-Date)<p>"

#O comando abaixo irá gerar o relatório em um arquivo HTML
$Report | Out-File .\Basic-Computer-Information-Report.html

Após aplicar o parâmetro -As, o relatório deve ser atualizado como mostrado abaixo. Os layouts de tabela para as informações do Sistema Operacional, Processador, BIOS e Disco agora são alterados para lista.

HTML report with tables formatted as List

Aprimorando o Relatório Usando CSS

Vamos levar o relatório para o próximo nível e começar a adicionar o design usando CSS. O CSS é usado para controlar como o relatório HTML aparecerá em um navegador da web. O CSS controla as fontes, texto, cores, fundos, margens e layout. No final desta seção, você deverá ser capaz de ver como o relatório se transformará de um formato simples para um formato rico usando CSS.

Há três maneiras de aplicar CSS em HTML, como Inline, Internal e External. Para este artigo, você aplicará o método Internal usando o parâmetro Header no relatório HTML.

O parâmetro Header especifica o conteúdo da tag <HEAD>. A tag <HEAD> faz parte da estrutura HTML onde você coloca o código para CSS. Como você pode ver na captura de tela abaixo, a tag <head> já está incluída quando o código HTML é gerado pelo cmdlet ConvertTo-Html.

HTML code showing the Head element

Vamos agora usar o CSS para formatar o relatório HTML. Primeiro, copie o código abaixo e cole-o no início do script. O código CSS atribuído à variável $header irá mudar a formatação dos textos no relatório que estão dentro da tag <h1>.

$header = @"
<style>

    h1 {

        font-family: Arial, Helvetica, sans-serif;
        color: #e68a00;
        font-size: 28px;

    } 
</style>

@”

Em seguida, use o parâmetro Header e atribua a variável $header. Atualize o script usando o código abaixo.

$Report = ConvertTo-HTML -Body "$ComputerName $OSinfo $ProcessInfo $BiosInfo $DiscInfo $ServicesInfo" `
-Title "Computer Information" -Head $header -PostContent "<p>Creation Date: $(Get-Date)<p>"

Ao executar o script, o relatório deve ser atualizado conforme mostrado abaixo. Observe que o único elemento HTML afetado é o <h1>, que é aplicado ao rótulo “Nome do computador“. Os passos acima são um ótimo exemplo de como você pode controlar ou manipular o design do relatório HTML usando CSS.

HTML report with CSS using Head Parameter

Para adicionar mais design a outras tabelas e rótulos que estão colocados na tag <h2> no relatório, continue atualizando a variável $header com o código CSS abaixo.

$header = @"
<style>

    h1 {

        font-family: Arial, Helvetica, sans-serif;
        color: #e68a00;
        font-size: 28px;

    }

    
    h2 {

        font-family: Arial, Helvetica, sans-serif;
        color: #000099;
        font-size: 16px;

    }

    
    
   table {
		font-size: 12px;
		border: 0px; 
		font-family: Arial, Helvetica, sans-serif;
	} 
	
    td {
		padding: 4px;
		margin: 0px;
		border: 0;
	}
	
    th {
        background: #395870;
        background: linear-gradient(#49708f, #293f50);
        color: #fff;
        font-size: 11px;
        text-transform: uppercase;
        padding: 10px 15px;
        vertical-align: middle;
	}

    tbody tr:nth-child(even) {
        background: #f0f0f2;
    }

        #CreationDate {

        font-family: Arial, Helvetica, sans-serif;
        color: #ff3300;
        font-size: 12px;

    }
    



</style>
"@

#CreationDate {

HTML report formatted using CSS

Após atualizar e executar o script, o relatório deve ser formatado como mostrado abaixo – Graças ao CSS, agora está visualmente atraente e profissional.

Usando Atributos de Id e Classe em HTML e CSS

Os elementos HTML são os blocos de construção de todo o seu relatório HTML, o CSS usa esses elementos como seletor para saber onde o estilo deve ser aplicado. Nos exemplos anteriores, o código CSS foi aplicado aos elementos HTML h1, h2 e tabela no relatório. Mas e se você precisar aplicar estilos diferentes em elementos diferentes? É aí que entram os atributos de id e classe. Ao projetar seu relatório HTML, você pode usar tanto id quanto classe para definir um único elemento.

Por favor, note que um elemento HTML só pode ter um id único que pertence a esse único elemento, enquanto um nome de classe pode ser usado por vários elementos. Para desenvolvedores web, esses atributos não são apenas para projetar a página, mas principalmente para serem usados em scripts para lidar com como a página irá responder a cada evento ou solicitação.

-PostContent "<p>Creation Date: $(Get-Date)</p>"

Vamos aplicar os atributos de id e classe no relatório HTML. Como você pode ver no trecho de código abaixo, o rótulo de data de criação está colocado na tag <p>.

HTML report showing the creation date label

Ao gerar o relatório e visualizá-lo no navegador, o rótulo de data de criação é formatado como mostrado abaixo.

-PostContent "<p id='CreationDate'>Creation Date: $(Get-Date)</p>"

Para formatar o rótulo da data de criação usando o atributo id – Primeiro, atribua um nome de id ‘CreationDate‘ à tag <p>. O nome do id deve ser colocado dentro da tag de início. O código atualizado é mostrado abaixo.

#CreationDate {
    font-family: Arial, Helvetica, sans-serif;
    color: #ff3300;
    font-size: 12px;
}

Em segundo lugar, crie um novo código CSS para formatar o rótulo da data de criação. Use o símbolo # seguido pelo nome do ID ao declarar um ID em CSS. Adicione o código CSS abaixo na variável $header e então salve e execute o script no console do PowerShell.

HTML report showing creation date label formatted using CSS via ID as selector

Após atribuir o id e criar um novo código CSS que visa o atributo id da tag <p>, o relatório deve ser atualizado conforme mostrado abaixo.

HTML report showing the Services Information table

Vamos aplicar o atributo de classe na tabela Informações do Serviço. Usando CSS, altere a cor do texto para verde **quando o valor do estado for Executando e use vermelho quando o valor for Parado.

$ServicesInfo = Get-CimInstance -ClassName Win32_Service | Select-Object -First 10  | ConvertTo-Html -Property Name,DisplayName,State -Fragment -PreContent "<h2>Services Information</h2>"
$ServicesInfo = $ServicesInfo -replace '<td>Running</td>','<td class="RunningStatus">Running</td>' 
$ServicesInfo = $ServicesInfo -replace '<td>Stopped</td>','<td class="StopStatus">Stopped</td>'

Como mencionado anteriormente, os atributos de classe podem ser atribuídos a vários elementos HTML. No relatório HTML, o elemento que contém o texto Executando e Parado é a tag <td>. Usando o método -Replace do PowerShell, atribua os nomes das classes RunningStatus e StopStatus a todas as tags <td> dentro da tabela Informações de Serviços. Use os comandos abaixo e atualize o script.

.RunningStatus {
    color: #008000;
}

.StopStatus {
    color: #ff0000;
}

Adicione o seguinte código CSS abaixo na variável $header. Todas as tags <td> com um nome de classe de RunningStatus terão o valor hexadecimal #008000, que é equivalente à cor verde, e todas as tags <td> com um nome de classe de StopStatus terão o valor hexadecimal #ff0000, que é equivalente à cor vermelha.

HTML report showing the Services Information table formatted using CSS via class selector

Salve e execute o script. A tabela de informações de serviço no relatório deve ser atualizada como mostrado abaixo.

Final layout of HTML report

Abaixo está o layout final do relatório HTML formatado usando CSS.

Abaixo estão os comandos completos para Generate-HTML-Report.Ps1
$header = @"
<style>

    h1 {

        font-family: Arial, Helvetica, sans-serif;
        color: #e68a00;
        font-size: 28px;

    }

    
    h2 {

        font-family: Arial, Helvetica, sans-serif;
        color: #000099;
        font-size: 16px;

    }

    
    
   table {
		font-size: 12px;
		border: 0px; 
		font-family: Arial, Helvetica, sans-serif;
	} 
	
    td {
		padding: 4px;
		margin: 0px;
		border: 0;
	}
	
    th {
        background: #395870;
        background: linear-gradient(#49708f, #293f50);
        color: #fff;
        font-size: 11px;
        text-transform: uppercase;
        padding: 10px 15px;
        vertical-align: middle;
	}

    tbody tr:nth-child(even) {
        background: #f0f0f2;
    }
    


    #CreationDate {

        font-family: Arial, Helvetica, sans-serif;
        color: #ff3300;
        font-size: 12px;

    }



    .StopStatus {

        color: #ff0000;
    }
    
  
    .RunningStatus {

        color: #008000;
    }




</style>
"@

#Códigos CSS
$ComputerName = "<h1>Computer name: $env:computername</h1>"

#O comando abaixo obterá o nome do computador
$OSinfo = Get-CimInstance -Class Win32_OperatingSystem | ConvertTo-Html -As List -Property Version,Caption,BuildNumber,Manufacturer -Fragment -PreContent "<h2>Operating System Information</h2>"

#O comando abaixo obterá as informações do sistema operacional, converterá o resultado em código HTML como tabela e armazenará em uma variável
$ProcessInfo = Get-CimInstance -ClassName Win32_Processor | ConvertTo-Html -As List -Property DeviceID,Name,Caption,MaxClockSpeed,SocketDesignation,Manufacturer -Fragment -PreContent "<h2>Processor Information</h2>"

#O comando abaixo obterá as informações do processador, converterá o resultado em código HTML como tabela e armazenará em uma variável
$BiosInfo = Get-CimInstance -ClassName Win32_BIOS | ConvertTo-Html -As List -Property SMBIOSBIOSVersion,Manufacturer,Name,SerialNumber -Fragment -PreContent "<h2>BIOS Information</h2>"

#O comando abaixo obterá as informações da BIOS, converterá o resultado em código HTML como tabela e armazenará em uma variável
$DiscInfo = Get-CimInstance -ClassName Win32_LogicalDisk -Filter "DriveType=3" | ConvertTo-Html -As List -Property DeviceID,DriveType,ProviderName,VolumeName,Size,FreeSpace -Fragment -PreContent "<h2>Disk Information</h2>"

#O comando abaixo obterá os detalhes do disco, converterá o resultado em código HTML como tabela e armazenará em uma variável
$ServicesInfo = Get-CimInstance -ClassName Win32_Service | Select-Object -First 10  |ConvertTo-Html -Property Name,DisplayName,State -Fragment -PreContent "<h2>Services Information</h2>"
$ServicesInfo = $ServicesInfo -replace '<td>Running</td>','<td class="RunningStatus">Running</td>'
$ServicesInfo = $ServicesInfo -replace '<td>Stopped</td>','<td class="StopStatus">Stopped</td>'

  
#O comando abaixo obterá as informações dos primeiros 10 serviços, converterá o resultado em código HTML como tabela e armazenará em uma variável
$Report = ConvertTo-HTML -Body "$ComputerName $OSinfo $ProcessInfo $BiosInfo $DiscInfo $ServicesInfo" -Head $header -Title "Computer Information Report" -PostContent "<p id='CreationDate'>Creation Date: $(Get-Date)</p>"

#O comando abaixo combinará todas as informações coletadas em um único relatório HTML
$Report | Out-File .\Basic-Computer-Information-Report.html

#O comando abaixo gerará o relatório em um arquivo HTML

Conclusão

Neste artigo, você aprendeu como converter os objetos (resultado) em código HTML e gerá-los em um relatório HTML.

I hope this article gives you enough ideas on how you can create and improve your HTML report. Cheers!

Gerar o relatório em formato HTML oferece a capacidade de aplicar CSS que torna o relatório mais fácil de aprimorar e manipular. Existem muitos recursos online gratuitos que você pode usar para aprimorar suas habilidades de codificação HTML e design CSS.

Source:
https://adamtheautomator.com/html-report/