Erstellen Sie beeindruckende HTML-Berichte mit PowerShell & CSS

PowerShell ist ein leistungsstolles Werkzeug, mit dem Sie mühsame und repetitive Aufgaben vereinfachen und automatisieren können. Administratoren verwenden in der Regel PowerShell, um Informationen aus einem System oder einer Datenbank abzurufen, wenn der Datensatz als Bericht präsentiert werden muss. Berichte in Text- oder CSV-Dateien fehlen jedoch oft das Flair und die ansprechende Gestaltung von HTML. In diesem Tutorial lernen Sie, wie Sie mit PowerShell einen HTML-Bericht erstellen können.

PowerShell kann Ihnen helfen, HTML-Berichte zu erstellen und sich von anderen langweiligen Formaten zu lösen. Mit PowerShell können Sie einen Bericht mit HTML zum Leben erwecken und somit eine sinnvolle Präsentation der aus dem System extrahierten Rohdaten erstellen. Sie können sogar Cascading Style Sheets (CSS) anwenden, um das Layout Ihres Berichts einfach anzupassen.

In diesem Artikel erfahren Sie, wie Sie das Cmdlet ConvertTo-HTML in Kombination mit Out-file verwenden, um einen HTML-Bericht zu generieren. Sie lernen außerdem das grundlegende Skripting für CSS und wie es beim Formatieren des Designs Ihres HTML-basierten Berichts nützlich sein kann.

Voraussetzungen

In diesem Artikel werden wir einen Schritt-für-Schritt-Anleitung durchgehen. Wenn Sie mitmachen möchten, stellen Sie sicher, dass Sie die folgenden Voraussetzungen im Voraus eingerichtet haben.

• Alle Beispiele werden mit Windows 10 Build 1709 gezeigt, aber diese Version ist nicht erforderlich.
• Windows PowerShell 5.1 oder eine neuere Version oder PowerShell Core 7.
• Ein Browser wie Internet Explorer oder Google Chrome.

Erstellen eines grundlegenden Computerinformationsberichts mit ConvertTo-Html

Um zu demonstrieren, wie das Cmdlet ConvertTo-Html und seine Parameter verwendet werden, erstellen Sie ein Skript, das grundlegende Informationen über einen Computer abruft (wie Betriebssystem, Prozessor, BIOS und verfügbarer Festplattenspeicher) und die Informationen in einen HTML-Bericht umwandelt.

Sie beginnen mit einem Befehl, der Informationen über die Betriebssystemversion von einem Computer sammelt. Öffnen Sie Ihre PowerShell-Konsole, kopieren und fügen Sie den folgenden Befehl ein und drücken Sie die Eingabetaste, um den Befehl auszuführen.

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

Wenn Sie den obigen Befehl ausführen, sammelt das Cmdlet Get-CimInstance die Eigenschaften der Klasse Win32_OperatingSystem, die Informationen über das Betriebssystem des Computers enthält. Der Befehl gibt viele Ergebnisse zurück, daher ist eine Filterung erforderlich, um nur die relevanten Informationen zu erhalten. Das Ergebnis sollte ähnlich aussehen wie auf dem unten gezeigten Screenshot.

Jetzt, da Sie den Befehl haben, um Informationen über das Betriebssystem zurückzugeben, konvertieren wir das Ergebnis in HTML-Code. Um das Ergebnis (Objekte) des obigen Befehls in HTML-Code umzuwandeln, können Sie die Ausgabe des Cmdlets Get-CimInstance an ConvertTo-Html weiterleiten. Führen Sie den folgenden Befehl in Ihrer PowerShell-Konsole aus.

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

Sie können im folgenden Screenshot sehen, dass PowerShell automatisch die HTML-Tags aus der Ausgabe des Get-CimInstance-Befehls generiert. Das Ergebnis wird in einer Tabellenform angezeigt, wobei der Tabellenkopf die Namen der Eigenschaften wie Version, Caption, BuildNumber, und Manufacturer anzeigt. Jede Tabellenzeile repräsentiert ein Objekt und zeigt die Werte des Objekts für jede Eigenschaft an.

Exportieren des Berichts in eine HTML-Datei

Jetzt, da Sie das Ergebnis haben und in HTML-Code konvertiert haben, exportieren wir den Bericht in eine HTML-Datei mit dem Out-file-Befehl und sehen uns den Bericht in einem Webbrowser an. Leiten Sie die Ausgabe des ConvertTo-Html-Befehls weiter und geben Sie den Pfad an, unter dem Sie den Bericht speichern möchten, mit dem -FilePath-Parameter an und verwenden Sie Basic-Computer-Information-Report.html als Dateiname.

Öffnen Sie Ihren PowerShell ISE oder einen beliebigen Texteditor, kopieren Sie den folgenden Code und speichern Sie das Skript unter dem Dateinamen 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

Führen Sie das Skript Generate-HTML-Report.Ps1 in Ihrer PowerShell-Konsole aus

.\Generate-HTML-Report.Ps1

Nachdem Sie das Skript ausgeführt haben, öffnen Sie die Datei Basic-Computer-Information-Report.html in einem Webbrowser. Der Webbrowser interpretiert den Code des HTML-Berichts und zeigt die Daten auf dem Bildschirm des Browsers an. Der Bericht sollte ähnliche Informationen zum Betriebssystem des Computers enthalten wie im folgenden Screenshot.

Kombinieren von Berichten unter Verwendung des Fragment-Parameters

An diesem Punkt haben Sie nun ein Skript, das Informationen über das Betriebssystem der Maschine abruft und das Ergebnis in den HTML-Bericht exportiert. Ihr Ziel besteht darin, weitere Befehle in das Skript aufzunehmen, um die verbleibenden Informationen des Computers wie Prozessor, BIOS, Festplatte und Dienste abzurufen.

Jeder Befehl liefert unterschiedliche Computerinformationen im HTML-Format. Um die Informationen ordnungsgemäß in einem einzigen HTML-Bericht zusammenzufassen, verwenden Sie den Fragment-Parameter, um nur den Tabellenbereich des vom ConvertTo-Html-Cmdlet generierten HTML-Codes zu erhalten.

Wie Sie im untenstehenden Screenshot sehen können, generiert PowerShell alle grundlegenden HTML-Elemente, wenn die Ausgabe an das ConvertTo-Html-Cmdlet übergeben wird.

Wenn Sie den Fragment-Parameter verwenden, generiert PowerShell nur das HTML-Tabellenelement. Die Elemente <HTML>, <HEAD>, <TITLE>, <BODY> und andere werden weggelassen. Das Ergebnis wird unten angezeigt.

Jetzt, da Sie wissen, wie der Fragment-Parameter anhand des obigen Beispiels funktioniert, wenden wir das im Skript an.

Die Befehle im folgenden Skript führen Folgendes aus:

• Die ersten fünf Befehlszeilen erhalten verschiedene Informationen von der Maschine wie Betriebssystem, Prozessor, BIOS, Festplatte und Dienste.
• Filtern Sie das Ergebnis mithilfe des -Property-Parameters, um nur die relevanten Werte anzuzeigen.
• Speichern Sie die Werte in entsprechenden Variablen. Jede Information wird als Tabelle formatiert und mit -Fragment versehen.
• Konsolidieren Sie die HTML-Tabellen mithilfe des Parameters -Body zu einem einzigen HTML-Bericht
• Setzen Sie den Titel des Berichts mit dem Parameter -Title auf “Computer-Informationen-Bericht”
• Exportieren Sie den Bericht mit dem Parameter Out-File als HTML-Datei

Zusätzliche Informationen zum Skript finden Sie in den Kommentaren im folgenden Code-Schnipsel. Aktualisieren Sie das Skript mit dem folgenden Code.

#Der folgende Befehl ruft die Betriebssysteminformationen ab, konvertiert das Ergebnis in HTML-Code als Tabelle und speichert es in einer Variablen
$OSinfo = Get-CimInstance -Class Win32_OperatingSystem | ConvertTo-Html -Property Version,Caption,BuildNumber,Manufacturer -Fragment

#Der folgende Befehl ruft die Prozessorinformationen ab, konvertiert das Ergebnis in HTML-Code als Tabelle und speichert es in einer Variablen
$ProcessInfo = Get-CimInstance -ClassName Win32_Processor | ConvertTo-Html -Property DeviceID,Name,Caption,MaxClockSpeed,SocketDesignation,Manufacturer -Fragment

#Der folgende Befehl ruft die BIOS-Informationen ab, konvertiert das Ergebnis in HTML-Code als Tabelle und speichert es in einer Variablen
$BiosInfo = Get-CimInstance -ClassName Win32_BIOS | ConvertTo-Html -Property SMBIOSBIOSVersion,Manufacturer,Name,SerialNumber -Fragment

#Der folgende Befehl ruft die Details der Festplatte ab, konvertiert das Ergebnis in HTML-Code als Tabelle und speichert es in einer Variablen
$DiscInfo = Get-CimInstance -ClassName Win32_LogicalDisk -Filter "DriveType=3" | ConvertTo-Html -Property DeviceID,DriveType,ProviderName,VolumeName,Size,FreeSpace -Fragment

#Der folgende Befehl ruft Informationen zu den ersten 10 Diensten ab, konvertiert das Ergebnis in HTML-Code als Tabelle und speichert es in einer Variablen
$ServicesInfo = Get-CimInstance -ClassName Win32_Service | Select-Object -First 10  |ConvertTo-Html -Property Name,DisplayName,State -Fragment
 
#Der folgende Befehl kombiniert alle gesammelten Informationen zu einem einzigen HTML-Bericht
$Report = ConvertTo-HTML -Body "$ComputerName $OSinfo $ProcessInfo $BiosInfo $DiscInfo $ServicesInfo" -Title "Computer Information Report" 

#Der folgende Befehl generiert den Bericht in eine HTML-Datei
$Report | Out-File .\Basic-Computer-Information-Report.html

Führen Sie das Skript in der PowerShell-Konsole aus. Sie können die Ausgabe des Berichts wie unten gezeigt sehen.

Hinzufügen einer Beschriftung mit den Parametern PreContent und PostContent

An diesem Punkt kann das Skript nun alle grundlegenden Informationen eines Computers abrufen und das Ergebnis in HTML exportieren. Wie Sie auf dem obigen Screenshot sehen können, kann es jedoch für jemanden oder einen Empfänger des Berichts schwierig sein, den Inhalt zu verstehen, wenn Sie die Annotation entfernen, da die Informationen nicht ordnungsgemäß beschriftet oder kategorisiert sind.

Mit den Parametern PreContent und PostContent können Sie in jede Tabelle Beschriftungen hinzufügen, damit jeder den Inhalt des Berichts leicht erkennen kann.

Der Parameter PreContent gibt den Text an, der vor dem Öffnen des <TABLE>-Tags hinzugefügt werden soll, und der Parameter PostContent gibt den Text an, der nach dem Schließen des </TABLE>-Tags hinzugefügt werden soll. Die Werte, die diesen Parametern hinzugefügt werden, werden nicht automatisch in HTML-Code konvertiert, daher müssen Sie explizit HTML-Tags verwenden, damit sie als HTML-Elemente ordnungsgemäß gerendert werden.

Aktualisieren Sie das Skript mit den folgenden Befehlen und führen Sie das Skript in der PowerShell-Konsole aus.

Hier sind die Änderungen im Skript:

• Ein neuer Befehl wird hinzugefügt, um den Namen des Computers abzurufen. Der Wert der Variablen $ComputerName enthält das <h1>-Tag, um das Textformat in eine Überschrift zu ändern, wenn es in einem Browser gerendert wird.
• Verschiedene Beschriftungen werden mit dem Parameter PreContent in jede Tabelle eingefügt und die Werte werden in <h2>-Tags platziert.
• Das Erstellungsdatum wird am Ende des Berichts mit dem Parameter PostContent hinzugefügt und der Wert wird in einem <p>-Tag platziert.

#Der folgende Befehl gibt den Computernamen zurück
$ComputerName = "<h1>Computer name: $env:computername</h1>"

#Der folgende Befehl gibt Informationen über das Betriebssystem zurück, konvertiert das Ergebnis in HTML-Code als Tabelle und speichert es in einer Variable
$OSinfo = Get-CimInstance -Class Win32_OperatingSystem | ConvertTo-Html -Property Version,Caption,BuildNumber,Manufacturer -Fragment -PreContent "<h2>Operating System Information</h2>"

#Der folgende Befehl gibt Informationen über den Prozessor zurück, konvertiert das Ergebnis in HTML-Code als Tabelle und speichert es in einer Variable
$ProcessInfo = Get-CimInstance -ClassName Win32_Processor | ConvertTo-Html -Property DeviceID,Name,Caption,MaxClockSpeed,SocketDesignation,Manufacturer -Fragment -PreContent "<h2>Processor Information</h2>"

#Der folgende Befehl gibt Informationen über die BIOS-Version zurück, konvertiert das Ergebnis in HTML-Code als Tabelle und speichert es in einer Variable
$BiosInfo = Get-CimInstance -ClassName Win32_BIOS | ConvertTo-Html -Property SMBIOSBIOSVersion,Manufacturer,Name,SerialNumber -Fragment -PreContent "<h2>BIOS Information</h2>"

#Der folgende Befehl gibt Informationen über die Festplatte zurück, konvertiert das Ergebnis in HTML-Code als Tabelle und speichert es in einer 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>"

#Der folgende Befehl gibt Informationen über die ersten 10 Dienste zurück, konvertiert das Ergebnis in HTML-Code als Tabelle und speichert es in einer Variable
$ServicesInfo = Get-CimInstance -ClassName Win32_Service | Select-Object -First 10  | ConvertTo-Html -Property Name,DisplayName,State -Fragment -PreContent "<h2>Services Information</h2>"

#Der folgende Befehl kombiniert alle gesammelten Informationen zu einem einzigen HTML-Bericht
$Report = ConvertTo-HTML -Body "$ComputerName $OSinfo $ProcessInfo $BiosInfo $DiscInfo $ServicesInfo" -Title "Computer Information Report" -PostContent "<p>Creation Date: $(Get-Date)<p>"

#Der folgende Befehl generiert den Bericht in einer HTML-Datei
$Report | Out-File .\Basic-Computer-Information-Report.html

Mit etwas zusätzlicher Arbeit kann der Bericht deutlich besser aussehen, der Bericht sollte wie folgt aktualisiert werden.

Tabellenlayout mit dem Parameter As ändern

Möglicherweise hat die generierte HTML-Tabelle mehrere Spalten und Sie möchten das Format ändern, um den Wert ordnungsgemäß als Liste anzuzeigen. Hierfür können Sie den Parameter As verwenden. Standardmäßig generiert PowerShell beim Piping der Ausgabe in ConvertTo-html eine HTML-Tabelle, die dem Windows PowerShell-Tabellenformat ähnelt.

Wie Sie im untenstehenden Screenshot sehen können, zeigt der Tabellenheader die Eigenschaftsnamen wie Version, Caption, Build-Nummer und Hersteller an und jede Tabellenzeile repräsentiert ein Objekt und zeigt die Werte des Objekts für jede Eigenschaft an.

Um das Layout der Tabelle in eine Liste zu ändern, verwenden Sie den Parameter -As gefolgt von List. PowerShell generiert für jedes Objekt eine zweispaltige HTML-Tabelle, die dem Windows PowerShell-Listenformat ähnelt. Die erste Spalte zeigt die Eigenschaftsnamen wie Version, Caption, Build-Nummer und Hersteller an und die zweite Spalte zeigt den Eigenschaftswert an.

Aus den obigen Beispielen haben Sie nun eine Vorstellung davon, wie Sie das Layout der Tabelle ändern können. Wenden wir den Parameter As in unserem Skript an, um das Layout der Tabellen für Betriebssystem, Prozessor, BIOS und Festplatteninformationen in Listenformat zu ändern.

Aktualisieren Sie das Skript mit dem folgenden Code. Das Skript enthält den Parameter -As in den Befehlszeilen für Betriebssystem, Prozessor, BIOS und Festplatte.

#Der Befehl unten holt den Namen des Computers
$ComputerName = "<h1>Computer name: $env:computername</h1>"

#Der Befehl unten holt Informationen über das Betriebssystem, konvertiert das Ergebnis in HTML-Code als Tabelle und speichert es in einer Variablen
$OSinfo = Get-CimInstance -Class Win32_OperatingSystem | ConvertTo-Html -As List -Property Version,Caption,BuildNumber,Manufacturer -Fragment -PreContent "<h2>Operating System Information</h2>"

#Der Befehl unten holt Informationen über den Prozessor, konvertiert das Ergebnis in HTML-Code als Tabelle und speichert es in einer Variablen
$ProcessInfo = Get-CimInstance -ClassName Win32_Processor | ConvertTo-Html -As List -Property DeviceID,Name,Caption,MaxClockSpeed,SocketDesignation,Manufacturer -Fragment -PreContent "<h2>Processor Information</h2>"

#Der Befehl unten holt Informationen über das BIOS, konvertiert das Ergebnis in HTML-Code als Tabelle und speichert es in einer Variablen
$BiosInfo = Get-CimInstance -ClassName Win32_BIOS | ConvertTo-Html -As List -Property SMBIOSBIOSVersion,Manufacturer,Name,SerialNumber -Fragment -PreContent "<h2>BIOS Information</h2>"

#Der Befehl unten holt Details zur Festplatte, konvertiert das Ergebnis in HTML-Code als Tabelle und speichert es in einer Variablen
$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>"

#Der Befehl unten holt Informationen zu den ersten 10 Diensten, konvertiert das Ergebnis in HTML-Code als Tabelle und speichert es in einer Variablen
$ServicesInfo = Get-CimInstance -ClassName Win32_Service | Select-Object -First 10  |ConvertTo-Html -Property Name,DisplayName,State -Fragment -PreContent "<h2>Services Information</h2>"
  
#Der Befehl unten kombiniert alle gesammelten Informationen zu einem einzelnen HTML-Bericht
$Report = ConvertTo-HTML -Body "$ComputerName $OSinfo $ProcessInfo $BiosInfo $DiscInfo $ServicesInfo" -Title "Computer Information Report" -PostContent "<p>Creation Date: $(Get-Date)<p>"

#Der Befehl unten generiert den Bericht als HTML-Datei
$Report | Out-File .\Basic-Computer-Information-Report.html

Nach Verwendung des Parameters -As sollte der Bericht wie folgt aktualisiert werden. Die Tabellenlayouts für Betriebssystem, Prozessor, BIOS und Festplatteninformationen werden nun als Listen angezeigt.

Verbesserung des Berichts mit CSS

Lassen Sie uns den Bericht auf die nächste Stufe bringen und das Design mit CSS hinzufügen. CSS wird verwendet, um zu steuern, wie der HTML-Bericht in einem Webbrowser angezeigt wird. CSS kontrolliert die Schriftarten, Texte, Farben, Hintergründe, Abstände und das Layout. Am Ende dieses Abschnitts sollten Sie sehen können, wie sich der Bericht von einfachem zu reichem Format mit Hilfe von CSS verwandelt.

Es gibt drei Möglichkeiten, CSS in HTML anzuwenden, nämlich Inline, Intern und Extern. Für diesen Artikel verwenden wir die interne Methode und verwenden den Header-Parameter im HTML-Bericht.

Der Header-Parameter gibt den Inhalt des <HEAD>-Tags an. Der <HEAD>-Tag ist Teil der HTML-Struktur, in dem der CSS-Code platziert wird. Wie Sie im folgenden Screenshot sehen können, ist der <head>-Tag bereits enthalten, wenn der HTML-Code mit dem ConvertTo-Html-Cmdlet generiert wird.

Lassen Sie uns nun CSS verwenden, um den HTML-Bericht zu formatieren. Kopieren Sie zunächst den untenstehenden Code und fügen Sie ihn am Anfang des Skripts ein. Der CSS-Code, der der Variablen $header zugewiesen ist, ändert das Format der Texte im Bericht, die im <h1>-Tag platziert werden.

$header = @"
<style>

    h1 {

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

    } 
</style>

@”

Verwenden Sie anschließend den Header-Parameter und weisen Sie die Variable $header zu. Aktualisieren Sie das Skript mit dem folgenden Code.

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

Wenn Sie das Skript ausführen, sollte der Bericht wie unten gezeigt aktualisiert werden. Beachten Sie, dass das einzige betroffene HTML-Element das <h1>-Element ist, das auf das Label „Computername“ angewendet wird. Die obigen Schritte sind ein gutes Beispiel dafür, wie Sie das Design des HTML-Berichts mit CSS steuern oder manipulieren können.

Um mehr Design zu den anderen Tabellen und Beschriftungen hinzuzufügen, die im <h2>-Tag im Bericht platziert sind, aktualisieren Sie die Variable $header mit dem folgenden 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 {

Nachdem Sie das Skript aktualisiert und ausgeführt haben, sollte der Bericht wie unten angezeigt formatiert sein. Dank CSS ist er jetzt optisch ansprechend und professionell.

Verwendung von HTML-ID- und Klassenattributen in CSS

HTML-Elemente sind die Bausteine Ihres gesamten HTML-Berichts. CSS verwendet diese Elemente als Selektor, um zu wissen, wo der Stil angewendet werden soll. In den vorherigen Beispielen wurde der CSS-Code auf die HTML-Elemente h1, h2 und table im Bericht angewendet. Aber was ist, wenn Sie unterschiedliche Stile auf unterschiedlichen Elementen anwenden möchten? Hier kommen die ID- und Klassenattribute ins Spiel. Beim Entwerfen Ihres HTML-Berichts können Sie entweder eine ID oder eine Klasse verwenden, um ein einzelnes Element zu definieren.

Bitte beachten Sie, dass ein HTML-Element nur eine eindeutige ID haben kann, die zu diesem einzelnen Element gehört, während ein Klassenname von mehreren Elementen verwendet werden kann. Für Webentwickler sind diese Attribute nicht nur zum Gestalten der Seite da, sondern werden hauptsächlich beim Skripten verwendet, um zu bestimmen, wie die Seite auf jedes Ereignis oder jede Anfrage reagieren soll.

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

Lassen Sie uns die ID- und Klassenattribute im HTML-Bericht anwenden. Wie Sie im folgenden Code-Snippet sehen können, befindet sich das Erstellungsdatumsetikett im <p>-Tag.

Wenn der Bericht generiert und im Browser angezeigt wird, wird das Erstellungsdatumsetikett wie unten angezeigt formatiert.

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

Um das Erstellungsdatumsetikett mit dem Attribut „id“ zu formatieren – weisen Sie zunächst dem <p>-Tag einen ID-Namen „CreationDate“ zu. Der ID-Name sollte im Start-Tag platziert werden. Der aktualisierte Code wird unten angezeigt.

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

Zweitens, erstellen Sie einen neuen CSS-Code, um das Erstellungsdatumsetikett zu formatieren. Verwenden Sie das #-Symbol gefolgt vom ID-Namen beim Deklarieren einer ID in CSS. Fügen Sie den CSS-Code unten in die Variable $header ein und speichern Sie das Skript in der PowerShell-Konsole.

Nachdem Sie die ID zugewiesen und einen neuen CSS-Code erstellt haben, der das id-Attribut des <p>-Tags anspricht, sollte der Bericht wie unten gezeigt aktualisiert werden.

Wenden Sie nun das Klassenattribut in der Tabelle „Serviceinformationen“ an. Ändern Sie mit CSS die Farbe des Textes in grün, wenn der Wert des Zustands „Running“ ist, und verwenden Sie rot, wenn der Wert „Stopped“ ist.

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

Wie bereits erwähnt, können Klassenattribute mehreren HTML-Elementen zugewiesen werden. In dem HTML-Bericht ist das Element, das den Text „Running“ und „Stopped“ enthält, das <td>-Tag. Weisen Sie mit der „-Replace“-Methode von PowerShell allen <td>-Tags innerhalb der Tabelle „Servicesinformationen“ die Klassennamen „RunningStatus“ und „StopStatus“ zu. Verwenden Sie die folgenden Befehle und aktualisieren Sie das Skript.

.RunningStatus {
    color: #008000;
}

.StopStatus {
    color: #ff0000;
}

Fügen Sie den folgenden CSS-Code unterhalb der $header-Variable hinzu. Alle

Speichern und führen Sie das Skript aus. Die Service-Informationstabelle im Bericht sollte wie folgt aktualisiert werden.

Nachfolgend finden Sie das endgültige Layout des HTML-Berichts, das mit CSS formatiert ist.

Nachfolgend finden Sie die vollständigen Befehle für 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>"

#Der folgende Befehl ruft den Computernamen ab
$OSinfo = Get-CimInstance -Class Win32_OperatingSystem | ConvertTo-Html -As List -Property Version,Caption,BuildNumber,Manufacturer -Fragment -PreContent "<h2>Operating System Information</h2>"

#Der folgende Befehl ruft die Betriebssysteminformationen ab, konvertiert das Ergebnis in HTML-Code als Tabelle und speichert es in einer Variablen
$ProcessInfo = Get-CimInstance -ClassName Win32_Processor | ConvertTo-Html -As List -Property DeviceID,Name,Caption,MaxClockSpeed,SocketDesignation,Manufacturer -Fragment -PreContent "<h2>Processor Information</h2>"

#Der folgende Befehl ruft die Prozessorinformationen ab, konvertiert das Ergebnis in HTML-Code als Tabelle und speichert es in einer Variablen
$BiosInfo = Get-CimInstance -ClassName Win32_BIOS | ConvertTo-Html -As List -Property SMBIOSBIOSVersion,Manufacturer,Name,SerialNumber -Fragment -PreContent "<h2>BIOS Information</h2>"

#Der folgende Befehl ruft die BIOS-Informationen ab, konvertiert das Ergebnis in HTML-Code als Tabelle und speichert es in einer Variablen
$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>"

#Der folgende Befehl ruft die Details der Festplatte ab, konvertiert das Ergebnis in HTML-Code als Tabelle und speichert es in einer Variablen
$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>'

  
#Der folgende Befehl ruft Informationen zu den ersten 10 Diensten ab, konvertiert das Ergebnis in HTML-Code als Tabelle und speichert es in einer Variablen
$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>"

#Der folgende Befehl kombiniert alle gesammelten Informationen zu einem einzigen HTML-Bericht
$Report | Out-File .\Basic-Computer-Information-Report.html

#Der folgende Befehl generiert den Bericht in einer HTML-Datei

Schlussfolgerung

In diesem Artikel haben Sie gelernt, wie Sie die Objekte (Ergebnisse) in HTML-Code konvertieren und sie in einem HTML-Bericht generieren können.

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

Das Generieren des Berichts im HTML-Format ermöglicht es Ihnen, CSS anzuwenden, um den Bericht einfacher zu verbessern und zu manipulieren. Es gibt viele kostenlose Online-Ressourcen, mit denen Sie Ihre HTML-Codierungs- und CSS-Designfähigkeiten verbessern können.

• Weitere Informationen
• ConvertTo-Html
• Informationen über Computer sammeln