使用PowerShell和CSS创建令人惊叹的HTML报告

教程
PowerShell

PowerShell是一款强大的工具，可帮助您简化和自动化繁琐重复的任务。管理员通常使用PowerShell从系统或数据库中提取信息，将所需的数据集呈现为报告。但是，文本或CSV文件的报告通常缺乏HTML格式的炫丽和时尚样式。在本教程中，您将学习如何使用 PowerShell 创建 HTML 报告，

PowerShell 可以帮助您构建具有生动呈现的 HTML 报告，摆脱其他单调格式。只需使用 PowerShell，您就可以通过 HTML 使报告栩栩如生，从而能够对从系统中提取的原始数据进行有意义的展示。您甚至可以应用层叠样式表（CSS）来轻松定制报告的布局。

在本文中，您将学习如何使用ConvertTo-HTML与Out-file cmdlet 结合生成 HTML 报告。您还将了解有关 CSS 的基本脚本编写，以及如何在格式化基于 HTML 的报告的设计中使用它。

先决条件

本文将进行逐步演练。如果您打算跟随操作，请确保提前设置以下先决条件。

  • 所有示例将使用 Windows 10 Build 1709 进行演示，但不需要此版本
  • Windows PowerShell 5.1 或更高版本，或 PowerShell Core 7
  • 浏览器，如 Internet Explorer 或 Google Chrome

创建一个基本的计算机信息报告使用ConvertTo-Html命令

为了演示如何使用ConvertTo-Html命令及其参数，您将创建一个脚本，该脚本获取计算机的基本信息（如操作系统、处理器、BIOS和可用磁盘空间），并将信息生成到一个HTML报告中。

您可以从一个命令开始，该命令收集有关计算机操作系统版本的信息。打开您的PowerShell控制台，然后复制并粘贴下面的命令，然后按Enter键运行命令。

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

当您运行上述命令时，Get-CimInstance命令收集Win32_OperatingSystem类的属性，该类包含有关计算机操作系统的信息，该命令将返回许多结果，因此需要过滤器来获取仅相关信息。结果应该类似于下面显示的截图。

Machine’s Operating System Information

现在您已经得到了返回操作系统信息的命令，让我们将结果转换为HTML代码。要将上述命令的结果（对象）转换为HTML代码，您可以将Get-CimInstance命令的输出管道传递给ConvertTo-Html。在您的PowerShell控制台中运行下面的命令。

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

您可以在下面的截图中看到，PowerShell会自动生成HTML标签，这些标签来自Get-CimInstance cmdlet的输出。结果以表格形式显示，表头显示属性名称，例如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代码格式返回不同的计算机信息。为了正确 consoli 在一个单一的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为每个对象生成一个两列的HTML表格，类似于Windows PowerShell列表格式。第一列显示属性名称，例如Version、Caption、Build Number和Manufacturer，第二列显示属性值。

HTML code generated by ConvertTo-Html cmdlet formatted as List

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

使用以下代码更新脚本。脚本中的命令行为操作系统、处理器、BIOS和磁盘的都带有-As参数。

#以下命令将获取计算机名称
$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 报告在 Web 浏览器中的外观。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

为其他表格和标签添加更多设计，这些表格和标签位于报告中的<h2>标签中，请继续使用下面的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和类属性

HTML元素是整个HTML报告的构建块，CSS使用这些元素作为选择器，以确定样式应该应用在哪里。从之前的例子中，CSS代码应用于报告中的HTML元素h1，h2和table。但是，如果您需要对不同的元素应用不同的样式，该怎么办？这就是id和class属性发挥作用的地方。在设计HTML报告时，您可以使用id或class来定义单个元素。

请注意，HTML元素只能有一个属于该单个元素的唯一id，而类名可以被多个元素使用。对于Web开发人员来说，这些属性不仅用于设计页面，而且主要用于脚本编写，以处理页面对每个事件或请求的响应方式。

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

让我们在HTML报告中应用id和class属性。如下面的代码片段所示，创建日期标签位于<p>标签中。

HTML report showing the creation date label

当生成报告并在浏览器中查看时，创建日期标签的格式如下所示。

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

将创建日期标签的格式化使用id属性 – 首先，将id名称`CreationDate`分配给`<p>`标签。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并创建了一个新的CSS代码以定位`<p>`标签的id属性后，报告应更新如下所示。

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文本的元素是`<td>`标签。使用PowerShell的`-Replace`方法，将类名RunningStatus和StopStatus分配给服务信息表中的所有`<td>`标签。使用下面的命令并更新脚本。

.RunningStatus {
    color: #008000;
}

.StopStatus {
    color: #ff0000;
}

在$header变量下方添加以下CSS代码。所有class名称为RunningStatus的

标签将具有十六进制值#008000，即绿色，所有class名称为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/