Crear impresionantes informes HTML con PowerShell y CSS

PowerShell es una herramienta poderosa que te ayuda a simplificar y automatizar tareas tediosas y repetitivas. Los administradores suelen utilizar PowerShell para extraer información de un sistema o base de datos cuando el conjunto de datos requerido debe presentarse en forma de informe. Sin embargo, los informes en archivos de texto o CSV suelen carecer del estilo llamativo y elegante de HTML. En este tutorial, aprenderás cómo crear un informe en HTML con PowerShell,

PowerShell puede ayudarte a construir informes HTML y alejarte de estos otros formatos monótonos. Usando solo PowerShell, puedes dar vida a un informe con HTML, lo que te permite realizar una presentación significativa de los datos extraídos del sistema. Incluso puedes aplicar Cascading Style Sheets (CSS) para personalizar fácilmente el diseño de tu informe.

En este artículo, aprenderás a utilizar el cmdlet ConvertTo-HTML en combinación con Out-file para generar un informe HTML. También aprenderás el scripting básico para CSS y cómo puede ser útil para dar formato al diseño de tu informe basado en HTML.

Prerrequisitos

Este artículo será una guía paso a paso. Si planeas seguirlo, asegúrate de tener configurados los siguientes requisitos previos.

  • Se mostrarán todos los ejemplos utilizando Windows 10 Build 1709, pero esta versión no es obligatoria
  • Windows PowerShell 5.1 o una versión posterior, o PowerShell Core 7
  • Navegador como Internet Explorer o Google Chrome

Creando un Informe Básico de Información de Computadora usando ConvertTo-Html

Para demostrar cómo usar el cmdlet ConvertTo-Html y sus parámetros, crearás un script que obtenga información básica de una máquina (como el Sistema Operativo, Procesador, BIOS y espacio disponible en disco) y genere la información en un informe HTML.

Comienzas con un comando que recopila información sobre la versión del sistema operativo de una máquina. Abre tu consola de PowerShell y luego copia y pega el comando a continuación, luego presiona enter para ejecutar el comando.

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

Cuando ejecutas el comando anterior, el cmdlet Get-CimInstance recopila las propiedades de la clase Win32_OperatingSystem que contiene la información sobre el sistema operativo de la máquina, el comando devolverá muchos resultados, por lo tanto se necesita un filtro para obtener solo la información relevante. El resultado debería lucir similar a la captura de pantalla que se muestra a continuación.

Machine’s Operating System Information

Ahora que tienes el comando para devolver la información del sistema operativo, convirtamos el resultado en código HTML. Para convertir el resultado (objetos) del comando anterior en código HTML, puedes enviar la salida del cmdlet Get-CimInstance a ConvertTo-Html. Ejecuta el siguiente comando en tu consola de PowerShell.

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

Puedes ver en la siguiente captura de pantalla a continuación que PowerShell genera automáticamente las etiquetas HTML a partir de la salida del cmdlet Get-CimInstance. El resultado se muestra en formato de tabla, donde el encabezado de la tabla muestra los nombres de las propiedades como Version, Caption, BuildNumber, y Manufacturer. Cada fila de la tabla representa un objeto y muestra los valores del objeto para cada propiedad.

Generated HTML code

Exportando el informe a un archivo HTML

Ahora que has obtenido el resultado y convertido a código HTML, exportemos el informe a un archivo HTML usando el cmdlet Out-file y veamos el informe en un navegador web. Conduce la salida del cmdlet ConvertTo-Html y especifica la ruta donde quieres guardar el informe usando el parámetro -FilePath y usa Basic-Computer-Information-Report.html como el nombre del archivo.

Abre tu PowerShell ISE o cualquier editor de texto, copia el código a continuación y guarda el script con el nombre de archivo Generate-HTML-Report.Ps1

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

Ejecuta el script Generate-HTML-Report.Ps1 en tu Consola de PowerShell

.\Generate-HTML-Report.Ps1

Después de ejecutar el script, abre el archivo Basic-Computer-Information-Report.html en un navegador web. El navegador interpreta el código del informe HTML y muestra los datos en la pantalla del navegador. El informe debe contener información sobre el sistema operativo de la máquina similar a la captura de pantalla a continuación.

HTML report viewed in a web browser

Combinando informes usando el parámetro Fragment

En este momento, ya tienes un script que obtiene información del sistema operativo de la máquina y exporta el resultado al informe HTML. Tu objetivo es agregar más comandos en el script para obtener la información restante de la computadora, como el procesador, la BIOS, el disco y los servicios.

Cada comando devolverá información de la computadora formateada como código HTML. Para consolidar correctamente la información en un solo informe HTML, utiliza el parámetro Fragment para obtener solo la parte de la tabla del código HTML generado por el cmdlet ConvertTo-Html.

Como puedes ver en la captura de pantalla a continuación, PowerShell genera todos los elementos HTML básicos cuando la salida se envía al cmdlet ConvertTo-Html.

List of generated HTML code using ConvertTo-Html cmdlet

Cuando utilizas el parámetro Fragment, PowerShell genera solo el elemento de tabla HTML. Se omiten los elementos <HTML>, <HEAD>, <TITLE>, <BODY> y otros. El resultado se muestra a continuación.

List of HTML code for table using Fragment parameter

Ahora que ya sabes cómo funciona el parámetro Fragment a partir del ejemplo anterior, apliquémoslo en el script.

Los comandos en el siguiente script realizan lo siguiente:

  • Las primeras cinco líneas de comandos obtienen información diferente de la máquina, como Sistema Operativo, Procesador, BIOS, Disco y Servicios.
  • Filtran el resultado usando el parámetro -Property para mostrar solo los valores relevantes
  • Almacenan los valores en variables respectivas. Cada información se formatea como tabla usando -Fragment.
  • Consolide las tablas HTML utilizando el parámetro -Body en un único informe HTML
  • Establezca el título del informe como “Informe de Información de Computadora” utilizando el parámetro -Title
  • Exporte el informe como un archivo HTML utilizando el parámetro Out-file

Información adicional sobre el script está disponible en los comentarios en el fragmento de código a continuación. Actualice el script con el siguiente código.

# El comando siguiente obtendrá la información del sistema operativo, convertirá el resultado en código HTML como una tabla y lo almacenará en una variable
$OSinfo = Get-CimInstance -Class Win32_OperatingSystem | ConvertTo-Html -Property Version,Caption,BuildNumber,Manufacturer -Fragment

# El comando siguiente obtendrá la información del procesador, convertirá el resultado en código HTML como una tabla y lo almacenará en una variable
$ProcessInfo = Get-CimInstance -ClassName Win32_Processor | ConvertTo-Html -Property DeviceID,Name,Caption,MaxClockSpeed,SocketDesignation,Manufacturer -Fragment

# El comando siguiente obtendrá la información del BIOS, convertirá el resultado en código HTML como una tabla y lo almacenará en una variable
$BiosInfo = Get-CimInstance -ClassName Win32_BIOS | ConvertTo-Html -Property SMBIOSBIOSVersion,Manufacturer,Name,SerialNumber -Fragment

# El comando siguiente obtendrá los detalles del disco, convertirá el resultado en código HTML como una tabla y lo almacenará en una variable
$DiscInfo = Get-CimInstance -ClassName Win32_LogicalDisk -Filter "DriveType=3" | ConvertTo-Html -Property DeviceID,DriveType,ProviderName,VolumeName,Size,FreeSpace -Fragment

# El comando siguiente obtendrá información sobre los primeros 10 servicios, convertirá el resultado en código HTML como una tabla y lo almacenará en una variable
$ServicesInfo = Get-CimInstance -ClassName Win32_Service | Select-Object -First 10  |ConvertTo-Html -Property Name,DisplayName,State -Fragment
 
# El comando siguiente combinará toda la información recopilada en un único informe HTML
$Report = ConvertTo-HTML -Body "$ComputerName $OSinfo $ProcessInfo $BiosInfo $DiscInfo $ServicesInfo" -Title "Computer Information Report" 

# El comando siguiente generará el informe en un archivo HTML
$Report | Out-File .\Basic-Computer-Information-Report.html

Ejecute el script en la consola de PowerShell. Puede ver la salida del informe como se muestra a continuación.

HTML report with basic computer information

Agregando Etiqueta Usando el Parámetro PreContent y PostContent

En este punto, el script ahora puede obtener toda la información básica de una computadora y exportar el resultado a HTML. Sin embargo, como puedes ver en la captura de pantalla anterior, alguien o un destinatario del informe podría tener dificultades para entender el contenido cuando se eliminan las anotaciones, ya que la información no está correctamente etiquetada o categorizada.

Al utilizar los parámetros PreContent y PostContent, puedes agregar etiquetas en cada tabla para que cualquier persona pueda discernir fácilmente el contenido del informe.

El parámetro PreContent especifica el texto que se agregará antes de la etiqueta de apertura <TABLE> y el parámetro PostContent especifica el texto que se agregará después de la etiqueta de cierre </TABLE>. Los valores agregados en estos parámetros no se convierten automáticamente en código HTML, por lo que debes usar explícitamente etiquetas HTML para que se rendericen correctamente como elementos HTML.

Actualiza el script usando los comandos a continuación y luego ejecuta el script en la consola de PowerShell.

A continuación se muestran los cambios en el script:

  • Se agrega un nuevo comando para obtener el nombre de la computadora. El valor de la variable $ComputerName tiene la etiqueta <h1> para cambiar el formato del texto a encabezado cuando se renderiza en un navegador.
  • Se agregan diferentes etiquetas en cada tabla usando el Parámetro PreContent y los valores se colocan en las etiquetas <h2>
  • Se agrega la etiqueta de fecha de creación al final del informe usando el Parámetro PostContent y el valor se coloca en la etiqueta <p>.
#El comando a continuación obtendrá el nombre del ordenador
$ComputerName = "<h1>Computer name: $env:computername</h1>"

#El comando a continuación obtendrá la información del Sistema Operativo, convertirá el resultado a código HTML como tabla y lo almacenará en una variable
$OSinfo = Get-CimInstance -Class Win32_OperatingSystem | ConvertTo-Html -Property Version,Caption,BuildNumber,Manufacturer -Fragment -PreContent "<h2>Operating System Information</h2>"

#El comando a continuación obtendrá la información del Procesador, convertirá el resultado a código HTML como tabla y lo almacenará en una variable
$ProcessInfo = Get-CimInstance -ClassName Win32_Processor | ConvertTo-Html -Property DeviceID,Name,Caption,MaxClockSpeed,SocketDesignation,Manufacturer -Fragment -PreContent "<h2>Processor Information</h2>"

#El comando a continuación obtendrá la información del BIOS, convertirá el resultado a código HTML como tabla y lo almacenará en una variable
$BiosInfo = Get-CimInstance -ClassName Win32_BIOS | ConvertTo-Html -Property SMBIOSBIOSVersion,Manufacturer,Name,SerialNumber -Fragment -PreContent "<h2>BIOS Information</h2>"

#El comando a continuación obtendrá los detalles del Disco, convertirá el resultado a código HTML como tabla y lo almacenará en una variable
$DiscInfo = Get-CimInstance -ClassName Win32_LogicalDisk -Filter "DriveType=3" | ConvertTo-Html -Property DeviceID,DriveType,ProviderName,VolumeName,Size,FreeSpace -Fragment -PreContent "<h2>Disk Information</h2>"

#El comando a continuación obtendrá información de los primeros 10 servicios, convertirá el resultado a código HTML como tabla y lo almacenará en una variable
$ServicesInfo = Get-CimInstance -ClassName Win32_Service | Select-Object -First 10  | ConvertTo-Html -Property Name,DisplayName,State -Fragment -PreContent "<h2>Services Information</h2>"

#El comando a continuación combinará toda la información recopilada en un único informe HTML
$Report = ConvertTo-HTML -Body "$ComputerName $OSinfo $ProcessInfo $BiosInfo $DiscInfo $ServicesInfo" -Title "Computer Information Report" -PostContent "<p>Creation Date: $(Get-Date)<p>"

#El comando a continuación generará el informe en un archivo HTML
$Report | Out-File .\Basic-Computer-Information-Report.html

Se puede observar que con un poco de trabajo adicional, el informe puede lucir mucho mejor, el informe debería actualizarse como se muestra a continuación.

HTML report added with labels using PreContent and PostContent Parameters

Cambiando la Disposición de la Tabla Usando el Parámetro As

Quizás, la tabla HTML generada tiene varias columnas y deseas cambiar el formato para mostrar correctamente el valor como una lista, puedes utilizar el parámetro As. Por defecto, cuando envías la salida a ConvertTo-html, PowerShell genera una tabla HTML que se asemeja al formato de tabla de Windows PowerShell.

Como se puede ver en la captura de pantalla a continuación, el encabezado de la tabla muestra los nombres de propiedad como Versión, Descripción, Número de compilación y Fabricante y cada fila de la tabla representa un objeto y muestra los valores del objeto para cada propiedad.

HTML code generated by ConvertTo-Html cmdlet formatted as Table

Para cambiar el diseño de la tabla a lista, utiliza el parámetro -As seguido de List. PowerShell genera una tabla HTML de dos columnas para cada objeto que se asemeja al formato de lista de Windows PowerShell. La primera columna muestra los nombres de propiedad como Versión, Descripción, Número de compilación y Fabricante y la segunda columna muestra el valor de la propiedad.

HTML code generated by ConvertTo-Html cmdlet formatted as List

Con los ejemplos anteriores, ahora tienes una idea de cómo cambiar el diseño de la tabla, apliquemos el parámetro As en nuestro script para cambiar el diseño de las tablas de información del sistema operativo, procesador, BIOS y disco a formato de lista.

Actualiza el script con el siguiente código a continuación. El script tiene el parámetro -As en las líneas de comandos para Sistema Operativo, Procesador, BIOS y Disco.

#El comando a continuación obtendrá el nombre de la computadora
$ComputerName = "<h1>Computer name: $env:computername</h1>"

#El comando a continuación obtendrá la información del sistema operativo, convertirá el resultado a código HTML en forma de tabla y lo almacenará en una variable
$OSinfo = Get-CimInstance -Class Win32_OperatingSystem | ConvertTo-Html -As List -Property Version,Caption,BuildNumber,Manufacturer -Fragment -PreContent "<h2>Operating System Information</h2>"

#El comando a continuación obtendrá la información del procesador, convertirá el resultado a código HTML en forma de tabla y lo almacenará en una variable
$ProcessInfo = Get-CimInstance -ClassName Win32_Processor | ConvertTo-Html -As List -Property DeviceID,Name,Caption,MaxClockSpeed,SocketDesignation,Manufacturer -Fragment -PreContent "<h2>Processor Information</h2>"

#El comando a continuación obtendrá la información del BIOS, convertirá el resultado a código HTML en forma de tabla y lo almacenará en una variable
$BiosInfo = Get-CimInstance -ClassName Win32_BIOS | ConvertTo-Html -As List -Property SMBIOSBIOSVersion,Manufacturer,Name,SerialNumber -Fragment -PreContent "<h2>BIOS Information</h2>"

#El comando a continuación obtendrá los detalles del disco, convertirá el resultado a código HTML en forma de tabla y lo almacenará en una variable
$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>"

#El comando a continuación obtendrá la información de los primeros 10 servicios, convertirá el resultado a código HTML en forma de tabla y lo almacenará en una variable
$ServicesInfo = Get-CimInstance -ClassName Win32_Service | Select-Object -First 10  |ConvertTo-Html -Property Name,DisplayName,State -Fragment -PreContent "<h2>Services Information</h2>"
  
#El comando a continuación combinará toda la información recopilada en un único informe HTML
$Report = ConvertTo-HTML -Body "$ComputerName $OSinfo $ProcessInfo $BiosInfo $DiscInfo $ServicesInfo" -Title "Computer Information Report" -PostContent "<p>Creation Date: $(Get-Date)<p>"

#El comando a continuación generará el informe en un archivo HTML
$Report | Out-File .\Basic-Computer-Information-Report.html

Después de aplicar el parámetro -As, el informe debería actualizarse como se muestra a continuación. Los diseños de tabla para la información del sistema operativo, procesador, BIOS y disco ahora se cambian a lista.

HTML report with tables formatted as List

Mejorando el informe utilizando CSS

Vamos a llevar el informe al siguiente nivel y comenzar a agregar el diseño usando CSS. CSS se utiliza para controlar cómo se verá el informe HTML en un navegador web. CSS controla las fuentes, el texto, los colores, los fondos, los márgenes y el diseño. Al final de esta sección, deberías poder ver cómo el informe se transformará de un formato simple a uno más completo utilizando CSS.

Existen tres formas de aplicar CSS en HTML, como Inline, Internal y External. Para este artículo, aplicarás el método Internal usando el parámetro Header en el informe HTML.

El parámetro Header especifica el contenido de la etiqueta <HEAD>. La etiqueta <HEAD> es parte de la estructura HTML donde colocas el código para CSS. Como puedes ver en la captura de pantalla a continuación, la etiqueta <head> ya está incluida cuando se genera el código HTML mediante el cmdlet ConvertTo-Html.

HTML code showing the Head element

Ahora, usemos CSS para dar formato al informe HTML. Primero, copia el código a continuación y pégalo al principio del script. El código CSS asignado en la variable $header cambiará el formato de los textos en el informe que se colocan en la etiqueta <h1>.

$header = @"
<style>

    h1 {

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

    } 
</style>

@”

A continuación, usa el parámetro Header y asigna la variable $header. Actualiza el script usando el código a continuación.

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

Cuando ejecutes el script, el informe debería actualizarse como se muestra a continuación. Observa que el único elemento HTML afectado es la etiqueta <h1>, que se aplica a la etiqueta “Nombre de la computadora“. Los pasos anteriores son un gran ejemplo de cómo puedes controlar o manipular el diseño del informe HTML usando CSS.

HTML report with CSS using Head Parameter

Para agregar más diseño a otras tablas y etiquetas que se encuentran dentro de la etiqueta <h2> en el informe, continúe actualizando la variable $header con el código CSS a continuación.

$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

Después de actualizar y ejecutar el script, el informe debería formatearse como se muestra a continuación. Gracias al CSS, ahora tiene un aspecto visual atractivo y profesional.

Uso de los Atributos Id y Class en HTML

Los elementos HTML son los bloques de construcción de todo su informe HTML, CSS utiliza estos elementos como selector para saber dónde se debe aplicar el estilo. En los ejemplos anteriores, el código CSS se aplicó a los elementos HTML h1, h2 y table en el informe. Pero, ¿qué pasa si necesita aplicar un estilo diferente a diferentes elementos? Aquí es donde entran en juego los atributos id y class. Al diseñar su informe HTML, puede usar tanto id como class para definir un solo elemento.

Tenga en cuenta que un elemento HTML solo puede tener un id único que pertenece a ese único elemento, mientras que un nombre de clase puede ser utilizado por varios elementos. Para los desarrolladores web, estos atributos no solo son para diseñar la página, sino que se utilizan principalmente en scripts para manejar cómo responderá la página a cada evento o solicitud.

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

Apliquemos los atributos id y class en el informe HTML. Como puede ver en el fragmento de código a continuación, la etiqueta de fecha de creación se coloca en la etiqueta <p>.

HTML report showing the creation date label

Cuando el informe se genera y se ve en el navegador, la etiqueta de fecha de creación se formatea como se muestra a continuación.

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

Para formatear la etiqueta de la fecha de creación usando el atributo id – Primero, asigna un nombre de id ‘CreationDate‘ a la etiqueta <p>. El nombre de id debe colocarse dentro de la etiqueta de inicio. El código actualizado se muestra a continuación.

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

Segundo, crea un nuevo código CSS para formatear la etiqueta de fecha de creación. Utiliza el símbolo # seguido del nombre de ID al declarar un ID en CSS. Agrega el código CSS a continuación en la variable $header, luego guarda y ejecuta el script en la consola de PowerShell.

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

Después de asignar el id y crear un nuevo código CSS que apunte al atributo id de la etiqueta <p>, el informe debería actualizarse como se muestra a continuación.

HTML report showing the Services Information table

Vamos a aplicar el atributo de clase en la tabla de información del servicio. Usando CSS, cambia el color del texto a verde **cuando el valor del estado es Running y usa rojo cuando el valor es Stopped.

$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 se mencionó anteriormente, los atributos de clase pueden asignarse a múltiples elementos HTML. En el informe HTML, el elemento que contiene el texto Running y Stopped es la etiqueta <td>. Usando el método -Replace de PowerShell, asigna los nombres de clase RunningStatus y StopStatus a todas las etiquetas <td> dentro de la tabla información de servicios. Usa los comandos a continuación y actualiza el script.

.RunningStatus {
    color: #008000;
}

.StopStatus {
    color: #ff0000;
}

Agregue el siguiente código CSS debajo de la variable $header. Todos los tags <td> con un nombre de clase de RunningStatus tendrán el valor hexadecimal de #008000, que es equivalente al color verde, y Todos los tags <td> con un nombre de clase de StopStatus tendrán el valor hexadecimal de #ff0000, que es equivalente al color rojo.

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

Guarde y ejecute el script. La tabla de información del servicio en el informe debería actualizarse como se muestra a continuación.

Final layout of HTML report

A continuación se muestra el diseño final del informe HTML formateado usando CSS.

A continuación se encuentran los 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>"

#El comando a continuación obtendrá el nombre de la computadora
$OSinfo = Get-CimInstance -Class Win32_OperatingSystem | ConvertTo-Html -As List -Property Version,Caption,BuildNumber,Manufacturer -Fragment -PreContent "<h2>Operating System Information</h2>"

#El comando a continuación obtendrá información sobre el sistema operativo, convertirá el resultado a código HTML como tabla y lo almacenará en una variable
$ProcessInfo = Get-CimInstance -ClassName Win32_Processor | ConvertTo-Html -As List -Property DeviceID,Name,Caption,MaxClockSpeed,SocketDesignation,Manufacturer -Fragment -PreContent "<h2>Processor Information</h2>"

#El comando a continuación obtendrá información sobre el procesador, convertirá el resultado a código HTML como tabla y lo almacenará en una variable
$BiosInfo = Get-CimInstance -ClassName Win32_BIOS | ConvertTo-Html -As List -Property SMBIOSBIOSVersion,Manufacturer,Name,SerialNumber -Fragment -PreContent "<h2>BIOS Information</h2>"

#El comando a continuación obtendrá información sobre la BIOS, convertirá el resultado a código HTML como tabla y lo almacenará en una variable
$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>"

#El comando a continuación obtendrá detalles del disco, convertirá el resultado a código HTML como tabla y lo almacenará en una variable
$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>'

  
#El comando a continuación obtendrá información de los primeros 10 servicios, convertirá el resultado a código HTML como tabla y lo almacenará en una variable
$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>"

#El comando a continuación combinará toda la información recopilada en un informe HTML único
$Report | Out-File .\Basic-Computer-Information-Report.html

#El comando a continuación generará el informe en un archivo HTML

Conclusión

En este artículo, has aprendido cómo convertir los objetos (resultado) a código HTML y generarlos en un informe HTML.

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

Generar el informe en formato HTML te brinda la capacidad de aplicar CSS que facilita mejorar y manipular el informe. Hay muchos recursos en línea gratuitos que puedes utilizar para mejorar tus habilidades de codificación HTML y diseño CSS.

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