Créer des rapports HTML époustouflants avec PowerShell & CSS

PowerShell est un outil puissant qui vous aide à simplifier et à automatiser les tâches fastidieuses et répétitives. Les administrateurs utilisent généralement PowerShell pour extraire des informations d’un système ou d’une base de données lorsque l’ensemble de données requis doit être présenté sous forme de rapport. Mais les rapports au format texte ou CSV manquent généralement du style et de la mise en forme élégante de HTML. Dans ce tutoriel, vous apprendrez comment créer un rapport HTML avec PowerShell.

PowerShell peut vous aider à créer des rapports HTML et à vous éloigner de ces autres formats fades. En utilisant uniquement PowerShell, vous pouvez donner vie à un rapport avec HTML, ce qui vous permet de faire une présentation significative des données brutes extraites du système. Vous pouvez même appliquer les feuilles de style en cascade (CSS) pour personnaliser facilement la mise en page de votre rapport.

Dans cet article, vous apprendrez comment utiliser les cmdlets ConvertTo-HTML combinées avec Out-file pour générer un rapport HTML. Vous apprendrez également les bases du script CSS et comment il peut être utile pour formater la conception de votre rapport HTML.

Prérequis

Cet article sera une procédure pas à pas. Si vous souhaitez suivre, assurez-vous de disposer des prérequis suivants.

  • Tous les exemples seront présentés avec Windows 10 version 1709, mais cette version n’est pas requise
  • Windows PowerShell 5.1 ou une version ultérieure, ou PowerShell Core 7
  • Navigateur tel qu’Internet Explorer ou Google Chrome

Création d’un rapport d’informations basiques sur l’ordinateur en utilisant ConvertTo-Html

Pour démontrer comment utiliser la cmdlet ConvertTo-Html et ses paramètres, vous allez créer un script qui récupère des informations basiques sur une machine (comme le système d’exploitation, le processeur, le BIOS et l’espace disque disponible) et génère ces informations dans un rapport HTML.

Commencez par une commande qui collecte des informations sur la version du système d’exploitation d’une machine. Ouvrez votre console PowerShell, puis copiez et collez la commande ci-dessous, puis appuyez sur Entrée pour l’exécuter.

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

Lorsque vous exécutez la commande ci-dessus, la cmdlet Get-CimInstance collecte les propriétés de la classe Win32_OperatingSystem qui contient les informations sur le système d’exploitation de la machine. La commande retournera de nombreux résultats, il est donc nécessaire de les filtrer pour n’obtenir que les informations pertinentes. Le résultat devrait ressembler à la capture d’écran ci-dessous.

Machine’s Operating System Information

Maintenant que vous avez la commande pour obtenir les informations sur le système d’exploitation, convertissons le résultat en code HTML. Pour convertir le résultat (les objets) de la commande ci-dessus en code HTML, vous pouvez rediriger la sortie de la cmdlet Get-CimInstance vers ConvertTo-Html. Exécutez la commande ci-dessous dans votre console PowerShell.

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

Vous pouvez voir dans la capture d’écran ci-dessous que PowerShell génère automatiquement les balises HTML à partir de la sortie de la cmdlet Get-CimInstance. Le résultat est affiché sous forme de tableau, où l’en-tête du tableau affiche les noms des propriétés tels que Version, Caption, BuildNumber, et Manufacturer. Chaque ligne du tableau représente un objet et affiche les valeurs de l’objet pour chaque propriété.

Generated HTML code

Exportation du rapport au format HTML

Maintenant que vous avez le résultat et que vous l’avez converti en code HTML, exportez le rapport dans un fichier HTML en utilisant la cmdlet Out-file et visualisez le rapport dans un navigateur web. Transmettez la sortie de la cmdlet ConvertTo-Html et spécifiez le chemin où vous souhaitez enregistrer le rapport en utilisant le paramètre -FilePath et utilisez Basic-Computer-Information-Report.html comme nom de fichier.

Ouvrez votre PowerShell ISE ou tout éditeur de texte, copiez le code ci-dessous et enregistrez le script avec le nom de fichier 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

Exécutez le script Generate-HTML-Report.Ps1 dans votre console PowerShell

.\Generate-HTML-Report.Ps1

Après avoir exécuté le script, ouvrez le fichier Basic-Computer-Information-Report.html dans un navigateur web. Le navigateur web interprète le code du rapport HTML et affiche les données sur l’écran du navigateur. Le rapport devrait contenir des informations sur le système d’exploitation de la machine, similaire à la capture d’écran ci-dessous.

HTML report viewed in a web browser

Combinaison de rapports en utilisant le paramètre Fragment

À ce stade, vous disposez désormais d’un script qui récupère les informations du système d’exploitation de la machine et exporte le résultat vers le rapport HTML. Votre objectif est d’ajouter davantage de commandes dans le script pour obtenir les informations restantes de l’ordinateur telles que le processeur, le BIOS, le disque et les services.

Chaque commande renverra des informations différentes sur l’ordinateur, formatées en code HTML. Pour consolider correctement les informations dans un seul rapport HTML, utilisez le paramètre Fragment afin de n’obtenir que la partie du tableau du code HTML généré par la commande ConvertTo-Html.

Comme vous pouvez le voir dans la capture d’écran ci-dessous, PowerShell génère tous les éléments HTML de base lorsque la sortie est redirigée vers la commande ConvertTo-Html.

List of generated HTML code using ConvertTo-Html cmdlet

Lorsque vous utilisez le paramètre Fragment, PowerShell ne génère que l’élément de tableau HTML. Les éléments <HTML>, <HEAD>, <TITLE>, <BODY> et autres sont omis. Le résultat est affiché ci-dessous.

List of HTML code for table using Fragment parameter

Maintenant que vous savez déjà comment fonctionne le paramètre Fragment d’après l’exemple ci-dessus, appliquons cela dans le script.

Les commandes du script ci-dessous effectuent les opérations suivantes :

  • Les cinq premières lignes de commandes récupèrent différentes informations de la machine telles que le système d’exploitation, le processeur, le BIOS, le disque et les services.
  • Filtrer le résultat en utilisant le paramètre -Property pour afficher uniquement les valeurs pertinentes
  • Stocker les valeurs dans des variables respectives. Chaque information est formatée en tant que tableau en utilisant -Fragment.
  • Consolidez les tables HTML en utilisant le paramètre -Body dans un seul rapport HTML
  • Définissez le titre du rapport sur “Rapport d’informations sur l’ordinateur” en utilisant le paramètre -Title
  • Exportez le rapport en tant que fichier HTML en utilisant le paramètre Out-file

Des informations supplémentaires sur le script sont disponibles dans les commentaires du code ci-dessous. Mettez à jour le script avec le code suivant.

#La commande ci-dessous récupérera les informations sur le système d'exploitation, convertira le résultat en code HTML sous forme de tableau et le stockera dans une variable
$OSinfo = Get-CimInstance -Class Win32_OperatingSystem | ConvertTo-Html -Property Version,Caption,BuildNumber,Manufacturer -Fragment

#La commande ci-dessous récupérera les informations sur le processeur, convertira le résultat en code HTML sous forme de tableau et le stockera dans une variable
$ProcessInfo = Get-CimInstance -ClassName Win32_Processor | ConvertTo-Html -Property DeviceID,Name,Caption,MaxClockSpeed,SocketDesignation,Manufacturer -Fragment

#La commande ci-dessous récupérera les informations sur le BIOS, convertira le résultat en code HTML sous forme de tableau et le stockera dans une variable
$BiosInfo = Get-CimInstance -ClassName Win32_BIOS | ConvertTo-Html -Property SMBIOSBIOSVersion,Manufacturer,Name,SerialNumber -Fragment

#La commande ci-dessous récupérera les détails du disque, convertira le résultat en code HTML sous forme de tableau et le stockera dans une variable
$DiscInfo = Get-CimInstance -ClassName Win32_LogicalDisk -Filter "DriveType=3" | ConvertTo-Html -Property DeviceID,DriveType,ProviderName,VolumeName,Size,FreeSpace -Fragment

#La commande ci-dessous récupérera les informations sur les 10 premiers services, convertira le résultat en code HTML sous forme de tableau et le stockera dans une variable
$ServicesInfo = Get-CimInstance -ClassName Win32_Service | Select-Object -First 10  |ConvertTo-Html -Property Name,DisplayName,State -Fragment
 
#La commande ci-dessous combinera toutes les informations collectées dans un seul rapport HTML
$Report = ConvertTo-HTML -Body "$ComputerName $OSinfo $ProcessInfo $BiosInfo $DiscInfo $ServicesInfo" -Title "Computer Information Report" 

#La commande ci-dessous générera le rapport dans un fichier HTML
$Report | Out-File .\Basic-Computer-Information-Report.html

Exécutez le script dans la console PowerShell. Vous pouvez voir la sortie du rapport comme indiqué ci-dessous.

HTML report with basic computer information

Ajout d’une étiquette en utilisant les paramètres PreContent et PostContent

À ce stade, le script peut maintenant obtenir toutes les informations de base d’un ordinateur et exporter le résultat en HTML. Cependant, comme vous pouvez le voir sur la capture d’écran ci-dessus, quelqu’un ou un destinataire du rapport pourrait avoir du mal à comprendre le contenu lorsque vous supprimez l’annotation car les informations ne sont pas correctement étiquetées ou catégorisées.

En utilisant les paramètres PreContent et PostContent, vous pouvez ajouter des étiquettes dans chaque table afin que n’importe qui puisse facilement discerner le contenu du rapport.

Le paramètre PreContent spécifie le texte à ajouter avant la balise d’ouverture <TABLE> et le paramètre PostContent spécifie le texte à ajouter après la balise de fermeture </TABLE>. Les valeurs ajoutées à ces paramètres ne sont pas automatiquement converties en code HTML, vous devez donc utiliser explicitement des balises HTML pour qu’elles soient correctement rendues en tant qu’éléments HTML.

Mettez à jour le script en utilisant les commandes ci-dessous, puis exécutez le script dans la console PowerShell.

Voici les modifications apportées au script:

  • Une nouvelle commande est ajoutée pour obtenir le nom de l’ordinateur. La valeur de la variable $ComputerName a la balise <h1> pour changer le format du texte en en-tête lorsqu’il est rendu dans un navigateur.
  • Différentes étiquettes sont ajoutées dans chaque table en utilisant le paramètre PreContent et les valeurs sont placées dans des balises <h2>
  • Une étiquette de date de création est ajoutée à la fin du rapport en utilisant le paramètre PostContent et la valeur est placée dans une balise <p>
#La commande ci-dessous obtiendra le nom de l'ordinateur
$ComputerName = "<h1>Computer name: $env:computername</h1>"

#La commande ci-dessous obtiendra les informations sur le système d'exploitation, convertira le résultat en code HTML sous forme de tableau et le stockera dans une variable
$OSinfo = Get-CimInstance -Class Win32_OperatingSystem | ConvertTo-Html -Property Version,Caption,BuildNumber,Manufacturer -Fragment -PreContent "<h2>Operating System Information</h2>"

#La commande ci-dessous obtiendra les informations sur le processeur, convertira le résultat en code HTML sous forme de tableau et le stockera dans une variable
$ProcessInfo = Get-CimInstance -ClassName Win32_Processor | ConvertTo-Html -Property DeviceID,Name,Caption,MaxClockSpeed,SocketDesignation,Manufacturer -Fragment -PreContent "<h2>Processor Information</h2>"

#La commande ci-dessous obtiendra les informations sur le BIOS, convertira le résultat en code HTML sous forme de tableau et le stockera dans une variable
$BiosInfo = Get-CimInstance -ClassName Win32_BIOS | ConvertTo-Html -Property SMBIOSBIOSVersion,Manufacturer,Name,SerialNumber -Fragment -PreContent "<h2>BIOS Information</h2>"

#La commande ci-dessous obtiendra les détails du disque, convertira le résultat en code HTML sous forme de tableau et le stockera dans une 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>"

#La commande ci-dessous obtiendra les informations sur les 10 premiers services, convertira le résultat en code HTML sous forme de tableau et le stockera dans une variable
$ServicesInfo = Get-CimInstance -ClassName Win32_Service | Select-Object -First 10  | ConvertTo-Html -Property Name,DisplayName,State -Fragment -PreContent "<h2>Services Information</h2>"

#La commande ci-dessous combinera toutes les informations collectées dans un rapport HTML unique
$Report = ConvertTo-HTML -Body "$ComputerName $OSinfo $ProcessInfo $BiosInfo $DiscInfo $ServicesInfo" -Title "Computer Information Report" -PostContent "<p>Creation Date: $(Get-Date)<p>"

#La commande ci-dessous générera le rapport sous forme de fichier HTML
$Report | Out-File .\Basic-Computer-Information-Report.html

Vous pouvez voir qu’avec un peu de travail supplémentaire, le rapport peut avoir un aspect beaucoup plus attrayant, le rapport devrait être mis à jour comme indiqué ci-dessous.

HTML report added with labels using PreContent and PostContent Parameters

Modifier la mise en page du tableau en utilisant le paramètre As.

Peut-être que le tableau HTML généré a plusieurs colonnes et que vous souhaitez changer le format pour afficher correctement la valeur sous forme de liste, vous pouvez utiliser le paramètre As. Par défaut, lorsque vous redirigez la sortie vers ConvertTo-HTML, PowerShell génère un tableau HTML qui ressemble au format de tableau de Windows PowerShell.

Comme vous pouvez le voir sur la capture d’écran ci-dessous, l’en-tête du tableau affiche les noms des propriétés tels que Version, Caption, Build Number et Manufacturer, et chaque ligne du tableau représente un objet et affiche les valeurs de l’objet pour chaque propriété.

HTML code generated by ConvertTo-Html cmdlet formatted as Table

Pour changer la mise en page du tableau en liste, utilisez le paramètre -As, suivi de List. PowerShell génère un tableau HTML à deux colonnes pour chaque objet qui ressemble au format de liste de Windows PowerShell. La première colonne affiche les noms des propriétés tels que Version, Caption, Build Number et Manufacturer, et la deuxième colonne affiche la valeur de la propriété.

HTML code generated by ConvertTo-Html cmdlet formatted as List

D’après les exemples ci-dessus, vous avez maintenant une idée de comment changer la mise en page du tableau, appliquons le paramètre As dans notre script pour changer la mise en page des tableaux d’informations sur le système d’exploitation, le processeur, le BIOS et le disque en format de liste.

Mettez à jour le script avec le code suivant ci-dessous. Le script contient le paramètre -As dans les lignes de commande pour le système d’exploitation, le processeur, le BIOS et le disque.

#La commande ci-dessous permettra d'obtenir le nom de l'ordinateur
$ComputerName = "<h1>Computer name: $env:computername</h1>"

#La commande ci-dessous permettra d'obtenir les informations sur le système d'exploitation, de convertir le résultat en code HTML sous forme de tableau et de le stocker dans une variable
$OSinfo = Get-CimInstance -Class Win32_OperatingSystem | ConvertTo-Html -As List -Property Version,Caption,BuildNumber,Manufacturer -Fragment -PreContent "<h2>Operating System Information</h2>"

#La commande ci-dessous permettra d'obtenir les informations sur le processeur, de convertir le résultat en code HTML sous forme de tableau et de le stocker dans une variable
$ProcessInfo = Get-CimInstance -ClassName Win32_Processor | ConvertTo-Html -As List -Property DeviceID,Name,Caption,MaxClockSpeed,SocketDesignation,Manufacturer -Fragment -PreContent "<h2>Processor Information</h2>"

#La commande ci-dessous permettra d'obtenir les informations sur le BIOS, de convertir le résultat en code HTML sous forme de tableau et de le stocker dans une variable
$BiosInfo = Get-CimInstance -ClassName Win32_BIOS | ConvertTo-Html -As List -Property SMBIOSBIOSVersion,Manufacturer,Name,SerialNumber -Fragment -PreContent "<h2>BIOS Information</h2>"

#La commande ci-dessous permettra d'obtenir les détails du disque, de convertir le résultat en code HTML sous forme de tableau et de le stocker dans une 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>"

#La commande ci-dessous permettra d'obtenir les informations sur les 10 premiers services, de convertir le résultat en code HTML sous forme de tableau et de le stocker dans une variable
$ServicesInfo = Get-CimInstance -ClassName Win32_Service | Select-Object -First 10  |ConvertTo-Html -Property Name,DisplayName,State -Fragment -PreContent "<h2>Services Information</h2>"
  
#La commande ci-dessous permettra de combiner toutes les informations collectées dans un seul rapport HTML
$Report = ConvertTo-HTML -Body "$ComputerName $OSinfo $ProcessInfo $BiosInfo $DiscInfo $ServicesInfo" -Title "Computer Information Report" -PostContent "<p>Creation Date: $(Get-Date)<p>"

#La commande ci-dessous permettra de générer le rapport dans un fichier HTML
$Report | Out-File .\Basic-Computer-Information-Report.html

Après l’application du paramètre -As, le rapport devrait être mis à jour comme indiqué ci-dessous. Les mises en page des tableaux pour les informations sur le système d’exploitation, le processeur, le BIOS et le disque sont maintenant changées en listes.

HTML report with tables formatted as List

Amélioration du rapport à l’aide de CSS

Passons au niveau supérieur avec le rapport et commençons à ajouter le design à l’aide de CSS. CSS est utilisé pour contrôler l’apparence du rapport HTML dans un navigateur web. CSS contrôle les polices, les textes, les couleurs, les arrière-plans, les marges et la mise en page. À la fin de cette section, vous devriez pouvoir voir comment le rapport se transformera d’un format simple à un format enrichi à l’aide de CSS.

Il existe trois façons d’appliquer CSS dans HTML, notamment en ligne, interne et externe. Pour cet article, vous appliquerez la méthode interne en utilisant le paramètre Header dans le rapport HTML.

Le paramètre Header spécifie le contenu de la balise <HEAD>. La balise <HEAD> fait partie de la structure HTML où vous placez le code CSS. Comme vous pouvez le voir dans la capture d’écran ci-dessous, la balise <head> est déjà incluse lorsque le code HTML est généré par la cmdlet ConvertTo-Html.

HTML code showing the Head element

Maintenant, utilisons CSS pour formater le rapport HTML. Tout d’abord, copiez le code ci-dessous et collez-le au début du script. Le code CSS assigné à la variable $header modifiera la mise en forme des textes dans le rapport qui sont placés dans la balise <h1>.

$header = @"
<style>

    h1 {

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

    } 
</style>

@”

Ensuite, utilisez le paramètre Header et assignez la variable $header. Mettez à jour le script en utilisant le code ci-dessous.

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

Lorsque vous exécutez le script, le rapport devrait être mis à jour comme indiqué ci-dessous. Remarquez que le seul élément HTML affecté est la balise <h1> qui s’applique à l’étiquette « Nom de l’ordinateur« . Les étapes ci-dessus sont un excellent exemple de la façon dont vous pouvez contrôler ou manipuler la conception du rapport HTML à l’aide de CSS.

HTML report with CSS using Head Parameter

Pour ajouter plus de design à d’autres tables et étiquettes qui sont placées dans la balise <h2> du rapport, continuez à mettre à jour la variable $header avec le code CSS ci-dessous.

$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

Après avoir mis à jour et exécuté le script, le rapport doit être formaté comme indiqué ci-dessous – grâce au CSS, il est désormais attrayant visuellement et professionnel.

Utilisation des attributs d’identifiant et de classe en CSS

Les éléments HTML sont les éléments constitutifs de votre rapport HTML, le CSS utilise ces éléments en tant que sélecteur pour savoir où le style doit être appliqué. Dans les exemples précédents, le code CSS a été appliqué aux éléments HTML h1, h2 et table du rapport. Mais que se passe-t-il si vous devez appliquer un style différent à différents éléments ? C’est là que les attributs d’identifiant et de classe interviennent. Dans la conception de votre rapport HTML, vous pouvez utiliser soit un identifiant, soit une classe pour définir un seul élément.

Veuillez noter qu’un élément HTML ne peut avoir qu’un identifiant unique appartenant à cet élément unique, tandis qu’un nom de classe peut être utilisé par plusieurs éléments. Pour les développeurs web, ces attributs ne servent pas seulement à la conception de la page, mais sont principalement utilisés dans le scripting pour gérer la manière dont la page réagira à chaque événement ou demande.

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

Appliquons les attributs d’identifiant et de classe dans le rapport HTML. Comme vous pouvez le voir dans l’extrait de code ci-dessous, l’étiquette de la date de création est placée dans la balise <p>.

HTML report showing the creation date label

Lorsque le rapport est généré et visualisé dans le navigateur, l’étiquette de la date de création est formatée comme indiqué ci-dessous.

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

Pour formater l’étiquette de la date de création en utilisant l’attribut id :

Tout d’abord, attribuez un nom d’id ‘CreationDate‘ à la balise <p>. Le nom d’id doit être placé à l’intérieur de la balise de début. Le code mis à jour est présenté ci-dessous.

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

Deuxièmement, créez un nouveau code CSS pour formater l’étiquette de la date de création. Utilisez le symbole ‘#’ suivi du nom de l’ID lors de la déclaration d’un ID en CSS. Ajoutez le code CSS ci-dessous dans la variable $header, puis enregistrez et exécutez le script dans la console PowerShell.

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

Après avoir attribué l’id et créé un nouveau code CSS qui cible l’attribut id de la balise <p>, le rapport devrait être mis à jour comme indiqué ci-dessous.

HTML report showing the Services Information table

Appliquons maintenant l’attribut de classe dans le tableau Service information. En utilisant CSS, changez la couleur du texte en vert lorsque la valeur de l’état est Running et utilisez du rouge lorsque la valeur est 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>'

Comme mentionné précédemment, les attributs de classe peuvent être attribués à plusieurs éléments HTML. Dans le rapport HTML, l’élément qui contient le texte Running et Stopped est la balise <td>. En utilisant la méthode -Replace de PowerShell, attribuez les noms de classe RunningStatus et StopStatus à toutes les balises <td> dans le tableau Services information. Utilisez les commandes ci-dessous et mettez à jour le script.

.RunningStatus {
    color: #008000;
}

.StopStatus {
    color: #ff0000;
}

Ajoutez le code CSS suivant ci-dessous dans la variable $header. Toutes les balises <td> avec un nom de classe RunningStatus auront la valeur hexadécimale #008000 qui équivaut à la couleur verte, et toutes les balises <td> avec un nom de classe StopStatus auront la valeur hexadécimale #ff0000 qui équivaut à la couleur rouge.

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

Enregistrez et exécutez le script. Le tableau d’informations sur le service dans le rapport devrait être mis à jour comme indiqué ci-dessous.

Final layout of HTML report

Voici la mise en page finale du rapport HTML formaté à l’aide de CSS.

Voici les commandes complètes pour 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>
"@

#Codes CSS
$ComputerName = "<h1>Computer name: $env:computername</h1>"

#La commande ci-dessous permettra d'obtenir le nom de l'ordinateur
$OSinfo = Get-CimInstance -Class Win32_OperatingSystem | ConvertTo-Html -As List -Property Version,Caption,BuildNumber,Manufacturer -Fragment -PreContent "<h2>Operating System Information</h2>"

#La commande ci-dessous permettra d'obtenir les informations sur le système d'exploitation, de convertir le résultat en code HTML sous forme de tableau et de le stocker dans une variable
$ProcessInfo = Get-CimInstance -ClassName Win32_Processor | ConvertTo-Html -As List -Property DeviceID,Name,Caption,MaxClockSpeed,SocketDesignation,Manufacturer -Fragment -PreContent "<h2>Processor Information</h2>"

#La commande ci-dessous permettra d'obtenir les informations sur le processeur, de convertir le résultat en code HTML sous forme de tableau et de le stocker dans une variable
$BiosInfo = Get-CimInstance -ClassName Win32_BIOS | ConvertTo-Html -As List -Property SMBIOSBIOSVersion,Manufacturer,Name,SerialNumber -Fragment -PreContent "<h2>BIOS Information</h2>"

#La commande ci-dessous permettra d'obtenir les informations sur le BIOS, de convertir le résultat en code HTML sous forme de tableau et de le stocker dans une 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>"

#La commande ci-dessous permettra d'obtenir les détails du disque, de convertir le résultat en code HTML sous forme de tableau et de le stocker dans une 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>'

  
#La commande ci-dessous permettra d'obtenir les informations sur les 10 premiers services, de convertir le résultat en code HTML sous forme de tableau et de le stocker dans une 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>"

#La commande ci-dessous permettra de combiner toutes les informations collectées en un seul rapport HTML
$Report | Out-File .\Basic-Computer-Information-Report.html

#La commande ci-dessous permettra de générer le rapport dans un fichier HTML

Conclusion

Dans cet article, vous avez appris comment convertir les objets (résultat) en code HTML et les générer sous forme de rapport HTML.

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

La génération du rapport au format HTML vous permet d’appliquer des CSS qui facilitent l’amélioration et la manipulation du rapport. Il existe de nombreuses ressources en ligne gratuites que vous pouvez utiliser pour améliorer vos compétences en codage HTML et en conception CSS.

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