使用 PowerShell 和 CSS 創建令人驚嘆的 HTML 報告

教學
PowerShell

PowerShell 是一個強大的工具，可以幫助您簡化和自動化繁瑣重複的任務。管理員通常使用 PowerShell 從系統或數據庫中提取信息，以便將所需的數據集呈現為報告。但是，文本或 CSV 文件中的報告通常缺乏 HTML 的風格和豪華的樣式。在本教程中，您將學習如何使用 PowerShell 創建一個 HTML 報告，

PowerShell 可以幫助您建立 HTML 報告，擺脫這些其他單調的格式。僅使用 PowerShell，您可以使用 HTML 為報告增添生氣，使您可以對從系統中提取的原始數據進行有意義的展示。您甚至可以應用層疊樣式表（CSS）來輕松自定義報告的佈局。

在本文中，您將學習如何使用ConvertTo-HTML結合Out-file命令來生成 HTML 報告。您還將學習有關 CSS 的基本腳本編寫以及它在格式化 HTML 報告設計方面的用法。

先決條件

本文將進行一步步引導。如果您打算跟隨，請確保事先設置以下先決條件。

  • 所有示例都將使用 Windows 10 Build 1709 顯示，但不需要此版本
  • Windows PowerShell 5.1 或更新版本或 PowerShell Core 7
  • 瀏覽器，如 Internet Explorer 或 Google Chrome

使用ConvertTo-Html創建一個基本的計算機信息報告

為了演示如何使用ConvertTo-Html cmdlet及其參數，您將創建一個腳本，獲取計算機的基本信息（如操作系統、處理器、BIOS和可用磁盤空間），並將信息生成為HTML報告。

首先，您需要使用一個命令來收集計算機的操作系統版本信息。打開PowerShell控制台，然後複製並粘貼下面的命令，然後按Enter運行命令。

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

當您運行上面的命令時，Get-CimInstance cmdlet將收集Win32_OperatingSystem類的屬性，該類包含有關計算機操作系統的信息，該命令將返回許多結果，因此需要使用過濾器僅獲取相關信息。結果應該類似於下面顯示的屏幕截圖。

Machine’s Operating System Information

現在，您已經獲得了返回操作系統信息的命令，讓我們將結果轉換為HTML代碼。要將上述命令的結果（對象）轉換為HTML代碼，可以將Get-CimInstance cmdlet的輸出連接到ConvertTo-Html。在PowerShell控制台中運行下面的命令。

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

您可以在下面的屏幕截图中看到，PowerShell会根据Get-CimInstance cmdlet的输出自动生成HTML标签。结果以表格格式显示，其中表头显示属性名称，例如Version、Caption、BuildNumber和Manufacturer。每一行表示一个对象，并显示每个属性的对象值。

Generated HTML code

将报告导出为HTML文件

现在您已经获得了结果并将其转换为HTML代码，让我们使用Out-file cmdlet将报告导出为HTML文件，并在Web浏览器中查看报告。将ConvertTo-Html cmdlet的输出导入管道，并使用-FilePath参数指定要保存报告的路径，并使用Basic-Computer-Information-Report.html作为文件名。

打开您的PowerShell ISE或任何文本编辑器，复制下面的代码并将脚本保存为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

在PowerShell控制台中运行Generate-HTML-Report.Ps1脚本

.\Generate-HTML-Report.Ps1

运行脚本后，在Web浏览器中打开Basic-Computer-Information-Report.html文件。Web浏览器会解释HTML报告的代码，并在浏览器屏幕上显示数据。报告应包含关于机器操作系统的信息，类似于下面的屏幕截图。

HTML report viewed in a web browser

使用Fragment参数合并报告

在這一點上，您現在已經擁有一個能夠獲取機器操作系統信息並將結果導出到HTML報告的腳本。您的目標是在腳本中添加更多命令，以獲取計算機的其餘信息，例如處理器、BIOS、磁盤和服務。

每個命令將以HTML代碼格式返回不同的計算機信息。為了正確地將信息合併到一個單獨的HTML報告中，請使用ConvertTo-Html cmdlet生成的HTML代碼的Fragment參數，僅獲取HTML代碼的表格部分。

如下圖所示，當輸出被管道傳遞到ConvertTo-Html cmdlet時，PowerShell會生成所有基本的HTML元素。

List of generated HTML code using ConvertTo-Html cmdlet

當您使用Fragment參數時，PowerShell僅生成HTML表格元素。元素<HTML>、<HEAD>、<TITLE>、<BODY>和其他元素將被省略。結果如下所示。

List of HTML code for table using Fragment parameter

現在您已經了解了上面示例中Fragment參數的工作原理，讓我們在腳本中應用它。

腳本中的命令執行以下操作：

  • 前五行命令從計算機獲取不同的信息，例如操作系統、處理器、BIOS、磁盤和服務。
  • 使用-Property參數過濾結果，只顯示相關值
  • 將值存儲在相應的變量中。每個信息都使用-Fragment格式化為表格
  • 使用-Body参数将HTML表格合并为单个HTML报告
  • 使用-Title参数将报告标题设置为“计算机信息报告”
  • 使用Out-file参数将报告导出为HTML文件

有关脚本的附加信息可在下面的代码片段的注释中找到。使用以下代码更新脚本。

#以下命令将获取操作系统信息，将结果转换为HTML代码作为表格并存储到一个变量中
$OSinfo = Get-CimInstance -Class Win32_OperatingSystem | ConvertTo-Html -Property Version,Caption,BuildNumber,Manufacturer -Fragment

#以下命令将获取处理器信息，将结果转换为HTML代码作为表格并存储到一个变量中
$ProcessInfo = Get-CimInstance -ClassName Win32_Processor | ConvertTo-Html -Property DeviceID,Name,Caption,MaxClockSpeed,SocketDesignation,Manufacturer -Fragment

#以下命令将获取BIOS信息，将结果转换为HTML代码作为表格并存储到一个变量中
$BiosInfo = Get-CimInstance -ClassName Win32_BIOS | ConvertTo-Html -Property SMBIOSBIOSVersion,Manufacturer,Name,SerialNumber -Fragment

#以下命令将获取磁盘详细信息，将结果转换为HTML代码作为表格并存储到一个变量中
$DiscInfo = Get-CimInstance -ClassName Win32_LogicalDisk -Filter "DriveType=3" | ConvertTo-Html -Property DeviceID,DriveType,ProviderName,VolumeName,Size,FreeSpace -Fragment

#以下命令将获取前10个服务的信息，将结果转换为HTML代码作为表格并存储到一个变量中
$ServicesInfo = Get-CimInstance -ClassName Win32_Service | Select-Object -First 10  |ConvertTo-Html -Property Name,DisplayName,State -Fragment
 
#以下命令将所有收集到的信息合并为单个HTML报告
$Report = ConvertTo-HTML -Body "$ComputerName $OSinfo $ProcessInfo $BiosInfo $DiscInfo $ServicesInfo" -Title "Computer Information Report" 

#以下命令将生成报告到一个HTML文件中
$Report | Out-File .\Basic-Computer-Information-Report.html

在PowerShell控制台中运行脚本。您可以看到报告的输出如下所示。

HTML report with basic computer information

使用PreContent和PostContent参数添加标签

此时，脚本现在可以获取计算机的所有基本信息并将结果导出为HTML。然而，正如您在上面的截图中所看到的那样，当您删除注释时，有人或报告的接收者可能很难理解内容，因为信息没有正确标记或分类。

通过使用PreContent和PostContent参数，您可以在每个表中添加标签，这样任何人都可以轻松辨别报告的内容。

PreContent参数指定要添加到开头的文本<TABLE>标签之前，PostContent参数指定要添加到关闭的文本</TABLE>标签之后。在这些参数中添加的值不会自动转换为HTML代码，因此您需要明确使用HTML标签，以便它们能正确呈现为HTML元素。

使用以下命令更新脚本，然后在PowerShell控制台中运行脚本。

以下是脚本中的更改：

  • 添加了一个新命令来获取计算机的名称。变量$ComputerName的值具有<h1>标记，以在浏览器中呈现时更改文本格式为标题。
  • 使用PreContent参数在每个表中添加了不同的标签，并将值放在<h2>标签中
  • 使用PostContent参数在报告末尾添加了创建日期标签，并将值放在<p>标签中
#下面的命令将获取计算机的名称
$ComputerName = "<h1>Computer name: $env:computername</h1>"

#下面的命令将获取操作系统信息，并将结果转换为HTML代码作为表格，并将其存储到一个变量中
$OSinfo = Get-CimInstance -Class Win32_OperatingSystem | ConvertTo-Html -Property Version,Caption,BuildNumber,Manufacturer -Fragment -PreContent "<h2>Operating System Information</h2>"

#下面的命令将获取处理器信息，并将结果转换为HTML代码作为表格，并将其存储到一个变量中
$ProcessInfo = Get-CimInstance -ClassName Win32_Processor | ConvertTo-Html -Property DeviceID,Name,Caption,MaxClockSpeed,SocketDesignation,Manufacturer -Fragment -PreContent "<h2>Processor Information</h2>"

#下面的命令将获取BIOS信息，并将结果转换为HTML代码作为表格，并将其存储到一个变量中
$BiosInfo = Get-CimInstance -ClassName Win32_BIOS | ConvertTo-Html -Property SMBIOSBIOSVersion,Manufacturer,Name,SerialNumber -Fragment -PreContent "<h2>BIOS Information</h2>"

#下面的命令将获取磁盘的详细信息，并将结果转换为HTML代码作为表格，并将其存储到一个变量中
$DiscInfo = Get-CimInstance -ClassName Win32_LogicalDisk -Filter "DriveType=3" | ConvertTo-Html -Property DeviceID,DriveType,ProviderName,VolumeName,Size,FreeSpace -Fragment -PreContent "<h2>Disk Information</h2>"

#下面的命令将获取前10个服务的信息，并将结果转换为HTML代码作为表格，并将其存储到一个变量中
$ServicesInfo = Get-CimInstance -ClassName Win32_Service | Select-Object -First 10  | ConvertTo-Html -Property Name,DisplayName,State -Fragment -PreContent "<h2>Services Information</h2>"

#下面的命令将所有收集到的信息合并为一个单独的HTML报告
$Report = ConvertTo-HTML -Body "$ComputerName $OSinfo $ProcessInfo $BiosInfo $DiscInfo $ServicesInfo" -Title "Computer Information Report" -PostContent "<p>Creation Date: $(Get-Date)<p>"

#下面的命令将生成HTML文件的报告
$Report | Out-File .\Basic-Computer-Information-Report.html

通过一些额外的工作，你可以看到报告的外观变得更好，报告应按照下面的方式进行更新。

HTML report added with labels using PreContent and PostContent Parameters

使用As参数来更改表格布局

也许，生成的HTML表格有多个列，您想要更改格式以正确显示值作为列表，您可以使用As参数。默认情况下，当您将输出导向ConvertTo-html时，PowerShell生成一个类似于Windows PowerShell表格格式的HTML表格。

如下面的截图所示，表头显示属性名称，如Version、Caption、Build Number和Manufacturer，每个表格行代表一个对象，并显示每个属性的对象值。

HTML code generated by ConvertTo-Html cmdlet formatted as Table

要将表格布局更改为列表，请使用参数-As，然后跟随List。PowerShell为每个对象生成一个类似于Windows PowerShell列表格式的两列HTML表格。第一列显示属性名称，如Version、Caption、Build Number和Manufacturer，第二列显示属性值。

HTML code generated by ConvertTo-Html cmdlet formatted as List

通过上面的示例，您现在知道如何更改表格的布局，让我们在脚本中应用As参数，将操作系统、处理器、BIOS和磁盘信息表格的布局更改为列表格式。

使用下面的代码更新脚本。脚本中的命令行中包含了-As参数，用于操作系统、处理器、BIOS和磁盘。

#以下命令将获取计算机名称
$ComputerName = "<h1>Computer name: $env:computername</h1>"

#以下命令将获取操作系统信息，将结果转换为HTML表格代码并存储到变量中
$OSinfo = Get-CimInstance -Class Win32_OperatingSystem | ConvertTo-Html -As List -Property Version,Caption,BuildNumber,Manufacturer -Fragment -PreContent "<h2>Operating System Information</h2>"

#以下命令将获取处理器信息，将结果转换为HTML表格代码并存储到变量中
$ProcessInfo = Get-CimInstance -ClassName Win32_Processor | ConvertTo-Html -As List -Property DeviceID,Name,Caption,MaxClockSpeed,SocketDesignation,Manufacturer -Fragment -PreContent "<h2>Processor Information</h2>"

#以下命令将获取BIOS信息，将结果转换为HTML表格代码并存储到变量中
$BiosInfo = Get-CimInstance -ClassName Win32_BIOS | ConvertTo-Html -As List -Property SMBIOSBIOSVersion,Manufacturer,Name,SerialNumber -Fragment -PreContent "<h2>BIOS Information</h2>"

#以下命令将获取磁盘详细信息，将结果转换为HTML表格代码并存储到变量中
$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>"

#以下命令将获取前10个服务的信息，将结果转换为HTML表格代码并存储到变量中
$ServicesInfo = Get-CimInstance -ClassName Win32_Service | Select-Object -First 10  |ConvertTo-Html -Property Name,DisplayName,State -Fragment -PreContent "<h2>Services Information</h2>"
  
#以下命令将把所有收集到的信息合并为一个HTML报告
$Report = ConvertTo-HTML -Body "$ComputerName $OSinfo $ProcessInfo $BiosInfo $DiscInfo $ServicesInfo" -Title "Computer Information Report" -PostContent "<p>Creation Date: $(Get-Date)<p>"

#以下命令将生成报告并保存为HTML文件
$Report | Out-File .\Basic-Computer-Information-Report.html

应用-As参数后，报告应如下所示更新。操作系统、处理器、BIOS和磁盘信息的表格布局现在变更为列表。

HTML report with tables formatted as List

使用CSS增强报告

讓我們將報告提升到下一個層次，並開始使用CSS添加設計。CSS用於控制HTML報告在網頁瀏覽器中的外觀。CSS控制字體、文本、顏色、背景、邊距和佈局。在本節結束時，您應該能夠看到報告如何從普通格式轉化為使用CSS的豐富格式。

在HTML中有三種應用CSS的方式，即內聯、內部和外部。對於本文，您將使用內部方法，使用HTML報告中的Header參數。

Header參數指定了<HEAD>標籤的內容。<HEAD>標籤是HTML結構的一部分，您在其中放置CSS代碼。如下面的截圖所示，當HTML代碼由ConvertTo-Html cmdlet生成時，已包含<head>標籤。

HTML code showing the Head element

現在讓我們使用CSS來格式化HTML報告。首先，將下面的代碼複製並粘貼到腳本的開頭。在$header變量中分配的CSS代碼將改變報告中放置在<h1>標籤中的文本的格式。

$header = @"
<style>

    h1 {

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

    } 
</style>

@”

接下來，使用Header參數並分配$header變量。使用下面的代碼更新腳本。

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

運行腳本後，報告應如下所示更新。請注意，唯一受影響的HTML元素是應用於“計算機名稱”標籤的<h1>。以上步驟是如何使用CSS控制或操作HTML報告的設計的一個很好的例子。

HTML report with CSS using Head Parameter

為了添加更多的設計到其他放置在報告中的

標籤中的表格和標籤，請繼續使用下面的CSS代碼更新$header變量。

$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

更新並運行腳本後，報告應按照下面所示的格式進行格式化-多虧了CSS，現在它在視覺上更有吸引力，看起來更專業。

在CSS中使用HTML的id和class屬性

HTML元素是整個HTML報告的構建塊，CSS使用這些元素作為選擇器，以知道樣式應該應用在哪裡。從前面的示例中，CSS代碼應用於報告中的HTML元素

，

和

。但是，如果您需要在不同的元素上應用不同的樣式怎麼辦？這就是id和class屬性發揮作用的地方。在設計HTML報告時，您可以使用id或class來定義單個元素。

請注意，HTML元素只能有一個屬於該單個元素的唯一id，而class名稱可以被多個元素使用。對於網絡開發人員來說，這些屬性不僅用於設計頁面，而且主要用於腳本編寫，以處理頁面對每個事件或請求的響應。

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

讓我們在HTML報告中應用id和class屬性。如下面的代碼片段中所示，創建日期標籤放置在

標籤中。

HTML report showing the creation date label

當報告生成並在瀏覽器中查看時，創建日期標籤的格式如下所示。

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

以id属性格式化创建日期标签-首先，将id名称“CreationDate”分配给

标签。 id名称应放置在开始标记中。 更新后的代码如下所示。

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

其次，创建一个新的CSS代码来格式化创建日期标签。 在CSS中声明ID时，请使用#符号后跟ID名称。 将下面的CSS代码添加到$header变量中，然后保存并在PowerShell控制台中运行脚本。

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

在分配id并创建一个针对

标签的id属性的新CSS代码之后，报告应更新如下所示。

HTML report showing the Services Information table

让我们在“服务信息”表中应用class属性。 使用CSS将文本颜色更改为绿色**当状态的值为“Running”时，并在值为“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>'

如前所述，class属性可以分配给多个HTML元素。 在HTML报告中，保存“Running”和“Stopped”文本的元素是

标签。 使用PowerShell的-Replace方法，将类名称“RunningStatus”和“StopStatus”分配给“Services information”表中的所有

标签。 使用以下命令并更新脚本。 
.RunningStatus {
    color: #008000;
}

.StopStatus {
    color: #ff0000;
}

在$header变量下方添加以下CSS代码。所有带有RunningStatus类名的

标签将具有十六进制值为#008000的颜色，即绿色，所有带有StopStatus类名的

标签将具有十六进制值为#ff0000的颜色，即红色。
HTML report showing the Services Information table formatted using CSS via class selector

保存并运行脚本。报告中的服务信息表应按以下方式更新。

Final layout of HTML report

下面是使用CSS格式化的HTML报告的最终布局。

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代碼
$ComputerName = "<h1>Computer name: $env:computername</h1>"

#以下命令將獲取計算機名稱
$OSinfo = Get-CimInstance -Class Win32_OperatingSystem | ConvertTo-Html -As List -Property Version,Caption,BuildNumber,Manufacturer -Fragment -PreContent "<h2>Operating System Information</h2>"

#以下命令將獲取操作系統信息，將結果轉換為HTML代碼並存儲到變量中
$ProcessInfo = Get-CimInstance -ClassName Win32_Processor | ConvertTo-Html -As List -Property DeviceID,Name,Caption,MaxClockSpeed,SocketDesignation,Manufacturer -Fragment -PreContent "<h2>Processor Information</h2>"

#以下命令將獲取處理器信息，將結果轉換為HTML代碼並存儲到變量中
$BiosInfo = Get-CimInstance -ClassName Win32_BIOS | ConvertTo-Html -As List -Property SMBIOSBIOSVersion,Manufacturer,Name,SerialNumber -Fragment -PreContent "<h2>BIOS Information</h2>"

#以下命令將獲取BIOS信息，將結果轉換為HTML代碼並存儲到變量中
$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>"

#以下命令將獲取磁盤詳細信息，將結果轉換為HTML代碼並存儲到變量中
$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>'

  
#以下命令將獲取前10個服務信息，將結果轉換為HTML代碼並存儲到變量中
$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>"

#以下命令將把所有收集到的信息合併成一個HTML報告
$Report | Out-File .\Basic-Computer-Information-Report.html

#以下命令將生成報告到一個HTML文件

結論

在本文中，您學到了如何將對象（結果）轉換為HTML代碼並生成HTML報告。

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

將報告生成為HTML格式使您能夠應用CSS，從而更容易增強和操作報告。有許多免費的在線資源可供使用，可提升您的HTML編碼和CSS設計技能。

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