Maak verbluffende HTML-rapporten met PowerShell & CSS

PowerShell is een krachtige tool die je helpt om taken te vereenvoudigen en automatiseren. Beheerders gebruiken PowerShell doorgaans om informatie uit een systeem of database te halen wanneer de vereiste dataset als een rapport moet worden gepresenteerd. Maar rapporten in tekst- of CSV-bestanden missen vaak de flair en de chique opmaak van HTML. In deze tutorial leer je hoe je een HTML-rapport kunt maken met PowerShell,

PowerShell kan je helpen om HTML-rapporten te bouwen en weg te stappen van deze andere saaie formaten. Met alleen PowerShell kun je een rapport tot leven brengen met HTML, waardoor je een betekenisvolle presentatie kunt maken van ruwe gegevens die uit het systeem zijn geëxtraheerd. Je kunt zelfs Cascading Style Sheets (CSS) toepassen om eenvoudig het ontwerp van je rapport aan te passen.

In dit artikel leer je hoe je de ConvertTo-HTML samen met de Out-file cmdlets kunt gebruiken om een HTML-rapport te genereren. Je leert ook de basis scripting voor CSS en hoe het nuttig kan zijn bij het opmaken van het ontwerp van je op HTML gebaseerde rapport.

Vereisten

Dit artikel is een stapsgewijze handleiding. Als je van plan bent om mee te doen, zorg er dan voor dat je de volgende vereisten van tevoren hebt ingesteld.

• Alle voorbeelden worden getoond met Windows 10 Build 1709, maar deze versie is niet vereist
• Windows PowerShell 5.1 of een latere versie, of PowerShell Core 7
• Browser zoals Internet Explorer of Google Chrome

Het maken van een basisrapport over computerinformatie met behulp van ConvertTo-Html

Om te demonstreren hoe de ConvertTo-Html cmdlet en de bijbehorende parameters te gebruiken, maak je een script dat basisinformatie van een machine ophaalt (zoals besturingssysteem, processor, BIOS en beschikbare schijfruimte) en deze informatie genereert naar een HTML-rapport.

Je begint met een opdracht die informatie verzamelt over de versie van het besturingssysteem van een machine. Open je PowerShell-console, kopieer en plak de onderstaande opdracht en druk op Enter om de opdracht uit te voeren.

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

Wanneer je de bovenstaande opdracht uitvoert, verzamelt de Get-CimInstance cmdlet de eigenschappen van de klasse Win32_OperatingSystem, die de informatie bevat over het besturingssysteem van de machine. De opdracht zal veel resultaten teruggeven, dus er is een filter nodig om alleen de relevante informatie te krijgen. Het resultaat moet er ongeveer uitzien zoals weergegeven in de onderstaande screenshot.

Nu je de opdracht hebt om de informatie over het besturingssysteem terug te krijgen, laten we het resultaat omzetten naar HTML-code. Om het resultaat (objecten) van de bovenstaande opdracht om te zetten in HTML-code, kun je de uitvoer van de Get-CimInstance cmdlet doorprikken naar ConvertTo-Html. Voer de onderstaande opdracht uit in je PowerShell-console.

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

Je kunt zien in de onderstaande schermafbeelding dat PowerShell automatisch HTML-tags genereert op basis van de uitvoer van de Get-CimInstance-cmdlet. Het resultaat wordt weergegeven in een tabelindeling, waarbij de tabelkop de eigenschapsnamen toont, zoals Versie, Bijschrift, BuildNummer en Fabrikant. Elke tabelrij vertegenwoordigt een object en toont de objectwaarden voor elke eigenschap.

Exporteer het rapport naar een HTML-bestand

Nu je het resultaat hebt en hebt omgezet naar HTML-code, laten we het rapport exporteren naar een HTML-bestand met behulp van de Out-File-cmdlet en bekijken we het rapport in een webbrowser. Leid de uitvoer van de ConvertTo-Html-cmdlet door en geef het pad op waar je het rapport wilt opslaan met de -BestandsPad-parameter en gebruik Basic-Computer-Information-Report.html als de naam van het bestand.

Open je PowerShell ISE of een willekeurige teksteditor, kopieer de onderstaande code en sla het script op met de bestandsnaam 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

Voer het script Generate-HTML-Report.Ps1 uit in je PowerShell-console

.\Generate-HTML-Report.Ps1

Na het uitvoeren van het script, open het bestand Basic-Computer-Information-Report.html in een webbrowser. De webbrowser interpreteert de HTML-rapportcode en toont de gegevens op het browserscherm. Het rapport zou informatie moeten bevatten over het besturingssysteem van de machine, vergelijkbaar met de schermafbeelding hieronder.

Samenvoegen van rapporten met de Fragment-parameter

Op dit moment hebt u een script dat informatie ophaalt over het besturingssysteem van de machine en het resultaat exporteert naar het HTML-rapport. Uw doel is om meer opdrachten aan het script toe te voegen om de overige informatie van de computer op te halen, zoals Processor, BIOS, Schijf en Services.

Elke opdracht zal verschillende computergegevens retourneren, opgemaakt als HTML-code. Om de informatie op de juiste manier samen te voegen in één enkel HTML-rapport, gebruikt u de Fragment-parameter om alleen het tabelgedeelte van de HTML-code gegenereerd door de ConvertTo-Html-cmdlet te verkrijgen.

Zoals u kunt zien in de onderstaande schermafbeelding, genereert PowerShell alle basis-HTML-elementen wanneer de uitvoer wordt doorgegeven aan de ConvertTo-Html-cmdlet.

Wanneer u de Fragment-parameter gebruikt, genereert PowerShell alleen het HTML-tabelelement. De elementen <HTML>, <HEAD>, <TITLE>, <BODY> en andere worden weggelaten. Het resultaat wordt hieronder getoond.

Nu u al weet hoe de Fragment-parameter werkt aan de hand van het bovenstaande voorbeeld, laten we dat toepassen in het script.

De opdrachten in het onderstaande script voeren het volgende uit:

• De eerste vijf regels met opdrachten halen verschillende informatie op van de machine, zoals Besturingssysteem, Processor, BIOS, Schijf en Services.
• Filter het resultaat met behulp van de -Property-parameter om alleen de relevante waarden weer te geven
• Sla de waarden op in respectieve variabelen. Elke informatie wordt opgemaakt als een tabel met behulp van -Fragment.
• Consolideer de HTML-tabellen met de -Body-parameter tot één HTML-rapport
• Stel de titel van het rapport in op “Computerinformatierapport” met de -Title-parameter
• Exporteer het rapport als een HTML-bestand met de Out-file-parameter

Extra informatie over het script is beschikbaar in de opmerkingen in de onderstaande code. Werk het script bij met de volgende code.

#De onderstaande opdracht haalt de informatie van het besturingssysteem op, converteert het resultaat naar HTML-code als een tabel en slaat het op in een variabele
$OSinfo = Get-CimInstance -Class Win32_OperatingSystem | ConvertTo-Html -Property Version,Caption,BuildNumber,Manufacturer -Fragment

#De onderstaande opdracht haalt de processorinformatie op, converteert het resultaat naar HTML-code als tabel en slaat het op in een variabele
$ProcessInfo = Get-CimInstance -ClassName Win32_Processor | ConvertTo-Html -Property DeviceID,Name,Caption,MaxClockSpeed,SocketDesignation,Manufacturer -Fragment

#De onderstaande opdracht haalt de BIOS-informatie op, converteert het resultaat naar HTML-code als tabel en slaat het op in een variabele
$BiosInfo = Get-CimInstance -ClassName Win32_BIOS | ConvertTo-Html -Property SMBIOSBIOSVersion,Manufacturer,Name,SerialNumber -Fragment

#De onderstaande opdracht haalt de details van de schijf op, converteert het resultaat naar HTML-code als tabel en slaat het op in een variabele
$DiscInfo = Get-CimInstance -ClassName Win32_LogicalDisk -Filter "DriveType=3" | ConvertTo-Html -Property DeviceID,DriveType,ProviderName,VolumeName,Size,FreeSpace -Fragment

#De onderstaande opdracht haalt informatie op over de eerste 10 services, converteert het resultaat naar HTML-code als tabel en slaat het op in een variabele
$ServicesInfo = Get-CimInstance -ClassName Win32_Service | Select-Object -First 10  |ConvertTo-Html -Property Name,DisplayName,State -Fragment
 
#De onderstaande opdracht combineert alle verzamelde informatie in één HTML-rapport
$Report = ConvertTo-HTML -Body "$ComputerName $OSinfo $ProcessInfo $BiosInfo $DiscInfo $ServicesInfo" -Title "Computer Information Report" 

#De onderstaande opdracht genereert het rapport naar een HTML-bestand
$Report | Out-File .\Basic-Computer-Information-Report.html

Voer het script uit in de PowerShell-console. U kunt de uitvoer van het rapport zien zoals hieronder weergegeven.

Het Toevoegen van een Label met de PreContent– en PostContent-Parameters

Op dit punt kan het script nu alle basisinformatie van een computer verkrijgen en het resultaat exporteren naar HTML. Zoals te zien is in de bovenstaande schermafbeelding, kan het voor iemand of de ontvanger van het rapport moeilijk zijn om de inhoud te begrijpen wanneer de annotatie wordt verwijderd, omdat de informatie niet correct gelabeld of gecategoriseerd is.

Door gebruik te maken van de PreContent– en PostContent-parameters, kunt u labels toevoegen aan elke tabel, zodat iedereen gemakkelijk de inhoud van het rapport kan onderscheiden.

De PreContent-parameter geeft de tekst aan die vóór de opening van de <TABLE>-tag moet worden toegevoegd, en de PostContent-parameter geeft de tekst aan die na de sluiting van de </TABLE>-tag moet worden toegevoegd. Waarden die aan deze parameters worden toegevoegd, worden niet automatisch geconverteerd naar HTML-code, dus u moet expliciet HTML-tags gebruiken zodat deze correct worden weergegeven als HTML-elementen.

Update het script met de onderstaande commando’s en voer het script uit in de PowerShell-console.

Hier zijn de wijzigingen in het script:

• Een nieuw commando is toegevoegd om de naam van de computer op te halen. De waarde van de variabele $ComputerName heeft de <h1>-tag om het tekstformaat te wijzigen naar een kop wanneer het in een browser wordt weergegeven.
• Verschillende labels worden toegevoegd aan elke tabel met behulp van de PreContent-parameter, en waarden worden geplaatst in <h2>-tags.
• De creatiedatum van het rapport wordt toegevoegd aan het einde van het rapport met behulp van de PostContent-parameter, en de waarde wordt geplaatst in de <p>-tag.

#De opdracht hieronder zal de naam van de computer ophalen
$ComputerName = "<h1>Computer name: $env:computername</h1>"

#De opdracht hieronder zal de informatie over het besturingssysteem ophalen, het resultaat converteren naar HTML-code als tabel en het opslaan in een variabele
$OSinfo = Get-CimInstance -Class Win32_OperatingSystem | ConvertTo-Html -Property Version,Caption,BuildNumber,Manufacturer -Fragment -PreContent "<h2>Operating System Information</h2>"

#De opdracht hieronder zal de processorinformatie ophalen, het resultaat converteren naar HTML-code als tabel en het opslaan in een variabele
$ProcessInfo = Get-CimInstance -ClassName Win32_Processor | ConvertTo-Html -Property DeviceID,Name,Caption,MaxClockSpeed,SocketDesignation,Manufacturer -Fragment -PreContent "<h2>Processor Information</h2>"

#De opdracht hieronder zal de BIOS-informatie ophalen, het resultaat converteren naar HTML-code als tabel en het opslaan in een variabele
$BiosInfo = Get-CimInstance -ClassName Win32_BIOS | ConvertTo-Html -Property SMBIOSBIOSVersion,Manufacturer,Name,SerialNumber -Fragment -PreContent "<h2>BIOS Information</h2>"

#De opdracht hieronder zal de details van de schijf ophalen, het resultaat converteren naar HTML-code als tabel en het opslaan in een variabele
$DiscInfo = Get-CimInstance -ClassName Win32_LogicalDisk -Filter "DriveType=3" | ConvertTo-Html -Property DeviceID,DriveType,ProviderName,VolumeName,Size,FreeSpace -Fragment -PreContent "<h2>Disk Information</h2>"

#De opdracht hieronder zal informatie over de eerste 10 services ophalen, het resultaat converteren naar HTML-code als tabel en het opslaan in een variabele
$ServicesInfo = Get-CimInstance -ClassName Win32_Service | Select-Object -First 10  | ConvertTo-Html -Property Name,DisplayName,State -Fragment -PreContent "<h2>Services Information</h2>"

#De opdracht hieronder zal alle verzamelde informatie combineren tot een enkel HTML-rapport
$Report = ConvertTo-HTML -Body "$ComputerName $OSinfo $ProcessInfo $BiosInfo $DiscInfo $ServicesInfo" -Title "Computer Information Report" -PostContent "<p>Creation Date: $(Get-Date)<p>"

#De opdracht hieronder zal het rapport genereren naar een HTML-bestand
$Report | Out-File .\Basic-Computer-Information-Report.html

Je kunt zien dat met een beetje extra werk het rapport er veel beter uit kan zien, het rapport moet worden bijgewerkt zoals hieronder getoond.

Wijzigen van Tabelindeling Met Gebruik van As-Parameter

Mogelijk heeft de gegenereerde HTML-tabel meerdere kolommen en wilt u het formaat wijzigen om de waarde correct als een lijst weer te geven. U kunt de As-parameter gebruiken. Standaard genereert PowerShell bij het doorsturen van de uitvoer naar ConvertTo-html een HTML-tabel die lijkt op het Windows PowerShell-tabelformaat.

Zoals u kunt zien in de onderstaande schermafbeelding, geeft de tabelkop de eigenschapsnamen weer zoals Versie, Bijschrift, Bouwnummer en Fabrikant en elke tabelrij vertegenwoordigt een object en geeft de waarden van het object weer voor elke eigenschap.

Om het lay-out van de tabel naar lijst te wijzigen, gebruikt u de parameter -As gevolgd door Lijst. PowerShell genereert een HTML-tabel met twee kolommen voor elk object dat lijkt op het Windows PowerShell-lijstformaat. De eerste kolom geeft de eigenschapsnamen weer zoals Versie, Bijschrift, Bouwnummer en Fabrikant en de tweede kolom geeft de eigenschapswaarde weer.

Uit de bovenstaande voorbeelden heeft u nu een idee hoe u de lay-out van de tabel kunt wijzigen, laten we de As-parameter toepassen in ons script om de lay-out van de tabellen met informatie over het besturingssysteem, processor, BIOS en schijf naar lijstformaat te wijzigen.

Update het script met de volgende code hieronder. Het script heeft de -As-parameter in de opdrachtregels voor het besturingssysteem, processor, BIOS en schijf.

#De opdracht hieronder zal de naam van de computer ophalen
$ComputerName = "<h1>Computer name: $env:computername</h1>"

#De opdracht hieronder zal de informatie over het besturingssysteem ophalen, het resultaat converteren naar HTML-code als tabel en het opslaan in een variabele
$OSinfo = Get-CimInstance -Class Win32_OperatingSystem | ConvertTo-Html -As List -Property Version,Caption,BuildNumber,Manufacturer -Fragment -PreContent "<h2>Operating System Information</h2>"

#De opdracht hieronder zal de processorinformatie ophalen, het resultaat converteren naar HTML-code als tabel en het opslaan in een variabele
$ProcessInfo = Get-CimInstance -ClassName Win32_Processor | ConvertTo-Html -As List -Property DeviceID,Name,Caption,MaxClockSpeed,SocketDesignation,Manufacturer -Fragment -PreContent "<h2>Processor Information</h2>"

#De opdracht hieronder zal de BIOS-informatie ophalen, het resultaat converteren naar HTML-code als tabel en het opslaan in een variabele
$BiosInfo = Get-CimInstance -ClassName Win32_BIOS | ConvertTo-Html -As List -Property SMBIOSBIOSVersion,Manufacturer,Name,SerialNumber -Fragment -PreContent "<h2>BIOS Information</h2>"

#De opdracht hieronder zal de details van de schijf ophalen, het resultaat converteren naar HTML-code als tabel en het opslaan in een variabele
$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>"

#De opdracht hieronder zal de informatie van de eerste 10 services ophalen, het resultaat converteren naar HTML-code als tabel en het opslaan in een variabele
$ServicesInfo = Get-CimInstance -ClassName Win32_Service | Select-Object -First 10  |ConvertTo-Html -Property Name,DisplayName,State -Fragment -PreContent "<h2>Services Information</h2>"
  
#De opdracht hieronder zal alle verzamelde informatie combineren in een enkel HTML-rapport
$Report = ConvertTo-HTML -Body "$ComputerName $OSinfo $ProcessInfo $BiosInfo $DiscInfo $ServicesInfo" -Title "Computer Information Report" -PostContent "<p>Creation Date: $(Get-Date)<p>"

#De opdracht hieronder zal het rapport genereren naar een HTML-bestand
$Report | Out-File .\Basic-Computer-Information-Report.html

Na het toepassen van de -Als parameter, moet het rapport worden bijgewerkt zoals hieronder weergegeven. De tabelindelingen voor informatie over het besturingssysteem, processor, BIOS en schijf zijn nu gewijzigd naar lijsten.

Verbetering van het Rapport met CSS

Laten we het rapport naar het volgende niveau tillen en beginnen met het toevoegen van het ontwerp met behulp van CSS. CSS wordt gebruikt om te bepalen hoe het HTML-rapport eruit zal zien in een webbrowser. CSS beheert de lettertypen, tekst, kleuren, achtergronden, marges en lay-out. Aan het einde van deze sectie zou je moeten kunnen zien hoe het rapport transformeert van eenvoudig naar rijk formaat met behulp van CSS.

Er zijn drie manieren om CSS toe te passen in HTML, zoals Inline, Internal en External. Voor dit artikel zal je de Interne methode toepassen met behulp van de Header-parameter in het HTML-rapport.

De Header-parameter specificeert de inhoud van de <HEAD>-tag. De <HEAD>-tag is een deel van de HTML-structuur waar je de code voor CSS plaatst. Zoals je kunt zien in de onderstaande schermafbeelding, is de <head>-tag al opgenomen wanneer de HTML-code wordt gegenereerd door de ConvertTo-Html-cmdlet.

Laten we nu CSS gebruiken om het HTML-rapport op te maken. Kopieer eerst de onderstaande code en plak deze aan het begin van het script. De CSS-code die is toegewezen aan de $header-variabele zal de opmaak van teksten in het rapport veranderen die zijn geplaatst in de <h1>-tag.

$header = @"
<style>

    h1 {

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

    } 
</style>

@”

Vervolgens gebruik je de Header-parameter en wijs je de $header-variabele toe. Werk het script bij met de onderstaande code.

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

Wanneer je het script uitvoert, zou het rapport moeten worden bijgewerkt zoals hieronder getoond. Let op dat het enige beïnvloede HTML-element de <h1> is die is toegepast op het label “Computernaam“. De bovenstaande stappen zijn een goed voorbeeld van hoe je het ontwerp van het HTML-rapport kunt beheersen of manipuleren met behulp van CSS.

Om meer ontwerp toe te voegen aan andere tabellen en labels die zijn geplaatst in de <h2>-tag in het rapport, blijf de variabele $header bijwerken met de onderstaande CSS-code.

$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 {

Na het bijwerken en uitvoeren van het script, moet het rapport worden opgemaakt zoals hieronder getoond – Dankzij CSS is het nu visueel aantrekkelijk en oogt het professioneel.

Het gebruik van HTML-id en class-attributen in CSS

HTML-elementen vormen de bouwstenen van je gehele HTML-rapport, CSS gebruikt deze elementen als een selector om te weten waar de stijl moet worden toegepast. Uit de vorige voorbeelden bleek dat de CSS-code werd toegepast op HTML-elementen h1, h2 en table in het rapport. Maar wat als je verschillende stijlen op verschillende elementen wilt toepassen? Hier komen id- en class-attributen van pas. Bij het ontwerpen van je HTML-rapport kun je ofwel id of class gebruiken om een enkel element te definiëren.

Houd er rekening mee dat een HTML-element slechts één unieke id kan hebben die bij dat ene element hoort, terwijl een klassenaam door meerdere elementen kan worden gebruikt. Voor webontwikkelaars zijn deze attributen niet alleen bedoeld voor het ontwerpen van de pagina, maar worden ze voornamelijk gebruikt in scripting om te bepalen hoe de pagina zal reageren op elk evenement of verzoek.

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

Laten we de id- en class-attributen toepassen in het HTML-rapport. Zoals je kunt zien in de onderstaande codefragment, staat het label voor de creatiedatum in de <p>-tag.

Wanneer het rapport wordt gegenereerd en in de browser wordt bekeken, wordt het creatiedatumlabel opgemaakt zoals hieronder getoond.

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

Om het creatiedatumlabel te formatteren met behulp van het id-attribuut – Wijs eerst een id-naam ‘CreationDate’ toe aan het <p>-tag. De id-naam moet binnen het starttag worden geplaatst. De bijgewerkte code wordt hieronder weergegeven.

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

Ten tweede, maak een nieuwe CSS-code om het creatiedatumlabel te formatteren. Gebruik het symbool # gevolgd door de ID-naam bij het verklaren van een ID in CSS. Voeg de CSS-code hieronder toe aan de variabele $header en sla vervolgens het script op en voer het uit in de PowerShell-console.

Nadat het id is toegewezen en een nieuwe CSS-code is gemaakt die het id-attribuut van de <p>-tag target, moet het rapport worden bijgewerkt zoals hieronder weergegeven.

Laten we het class-attribuut toepassen in de tabel Service-informatie. Gebruik CSS om de kleur van de tekst te wijzigen in groen **wanneer de waarde van de status Running is en gebruik rood wanneer de waarde Stopped is.

$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>'

Zoals eerder vermeld, kunnen de class-attributen worden toegewezen aan meerdere HTML-elementen. In het HTML-rapport is het element dat de tekst Running en Stopped bevat, de <td>-tag. Gebruik de -Replace-methode van PowerShell om de klassenamen RunningStatus en StopStatus toe te wijzen aan alle <td>-tags binnen de Services-informatie-tabel. Gebruik de onderstaande opdrachten en update het script.

.RunningStatus {
    color: #008000;
}

.StopStatus {
    color: #ff0000;
}

Voeg de volgende CSS-code toe onder de variabele $header. Alle <td>-tags met de classnaam RunningStatus krijgen de hexadecimale waarde #008000, wat overeenkomt met de kleur groen. En alle <td>-tags met de classnaam StopStatus krijgen de hexadecimale waarde #ff0000, wat overeenkomt met de kleur rood.

Sla het script op en voer het uit. De servicetabel in het rapport moet worden bijgewerkt zoals hieronder weergegeven.

Hieronder staat de uiteindelijke opmaak van het HTML-rapport opgemaakt met CSS.

Hier zijn de volledige opdrachten voor 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>
"@

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

#De opdracht hieronder zal de naam van de computer ophalen
$OSinfo = Get-CimInstance -Class Win32_OperatingSystem | ConvertTo-Html -As List -Property Version,Caption,BuildNumber,Manufacturer -Fragment -PreContent "<h2>Operating System Information</h2>"

#De opdracht hieronder zal de informatie over het besturingssysteem ophalen, het resultaat converteren naar HTML-code als tabel en het opslaan in een variabele
$ProcessInfo = Get-CimInstance -ClassName Win32_Processor | ConvertTo-Html -As List -Property DeviceID,Name,Caption,MaxClockSpeed,SocketDesignation,Manufacturer -Fragment -PreContent "<h2>Processor Information</h2>"

#De opdracht hieronder zal de processorinformatie ophalen, het resultaat converteren naar HTML-code als tabel en het opslaan in een variabele
$BiosInfo = Get-CimInstance -ClassName Win32_BIOS | ConvertTo-Html -As List -Property SMBIOSBIOSVersion,Manufacturer,Name,SerialNumber -Fragment -PreContent "<h2>BIOS Information</h2>"

#De opdracht hieronder zal de BIOS-informatie ophalen, het resultaat converteren naar HTML-code als tabel en het opslaan in een variabele
$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>"

#De opdracht hieronder zal de details van de schijf ophalen, het resultaat converteren naar HTML-code als tabel en het opslaan in een variabele
$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>'

  
#De opdracht hieronder zal de informatie over de eerste 10 services ophalen, het resultaat converteren naar HTML-code als tabel en het opslaan in een variabele
$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>"

#De opdracht hieronder zal alle verzamelde informatie combineren tot een enkel HTML-rapport
$Report | Out-File .\Basic-Computer-Information-Report.html

#De opdracht hieronder zal het rapport genereren naar een HTML-bestand

Conclusie

In dit artikel heb je geleerd hoe je de objecten (resultaten) naar HTML-code kunt converteren en ze kunt genereren naar een HTML-rapport.

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

Het genereren van het rapport in HTML-formaat geeft je de mogelijkheid om CSS toe te passen die het rapport gemakkelijker maakt om te verbeteren en te manipuleren. Er zijn veel gratis online bronnen die je kunt gebruiken om je HTML-codering en CSS-ontwerpvaardigheden naar een hoger niveau te tillen.

• Verdere Lezing
• ConvertTo-Html
• Gegevens Verzamelen Over Computers