PowerShell & CSS로 멋진 HTML 보고서 생성 – techsyncer

PowerShell은 귀찮고 반복적인 작업을 단순화하고 자동화하는 데 도움이 되는 강력한 도구입니다. 일반적으로 관리자는 데이터 세트가 보고서로 제출되어야 할 때 시스템이나 데이터베이스에서 정보를 추출하기 위해 PowerShell을 사용합니다. 그러나 텍스트나 CSV 파일의 보고서는 일반적으로 HTML의 화려한 스타일링이나 디자인이 부족합니다. 이 튜토리얼에서는 PowerShell을 사용하여 HTML 보고서를 생성하는 방법을 배우게 됩니다.

PowerShell을 사용하면 다른 단조로운 형식에서 벗어나 HTML 보고서를 생성할 수 있습니다. PowerShell만으로도 시스템에서 추출한 원시 데이터를 의미있는 프리젠테이션으로 만들어줄 수 있습니다. 심지어 CSS(Cascading Style Sheets)를 적용하여 보고서의 레이아웃을 쉽게 사용자 정의할 수도 있습니다.

이 문서에서는 ConvertTo-HTML 및 Out-file cmdlet을 사용하여 HTML 보고서를 생성하는 방법을 배우게 됩니다. 또한 CSS에 대한 기본 스크립팅과 HTML 기반 보고서의 디자인을 서식 지정하는 데 유용한 방법도 배우게 됩니다.

전제 조건

이 문서는 실습을 위한 안내서입니다. 함께 따라하기를 원한다면 미리 다음의 전제 조건을 설정해야 합니다.

모든 예제는 Windows 10 빌드 1709에서 보여집니다. 하지만 이 버전은 필수적이지 않습니다.
Windows PowerShell 5.1 이상 또는 PowerShell Core 7
인터넷 익스플로러 또는 구글 크롬과 같은 브라우저

`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 클래스의 속성을 수집합니다. 해당 명령은 여러 결과를 반환하므로 관련 정보만 얻기 위해 필터링이 필요합니다. 결과는 아래에 표시된 스크린샷과 유사해야 합니다.

이제 운영 체제 정보를 반환하는 명령을 얻었으므로 결과를 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와 같은 속성 이름이 표시됩니다. 각 테이블 행은 개체를 나타내며 각 속성의 개체 값이 표시됩니다.

보고서를 HTML 파일로 내보내기

결과를 얻고 HTML 코드로 변환했으므로, Out-file cmdlet을 사용하여 보고서를 HTML 파일로 내보내고 웹 브라우저에서 보고서를 확인해 보겠습니다. 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

스크립트를 실행한 후 웹 브라우저에서 Basic-Computer-Information-Report.html 파일을 엽니다. 웹 브라우저는 HTML 보고서의 코드를 해석하고 데이터를 브라우저 화면에 표시합니다. 보고서에는 스크린샷과 유사한 방식으로 컴퓨터의 운영 체제에 대한 정보가 포함되어야 합니다.

`Fragment` 매개변수를 사용하여 보고서를 결합

이 시점에서는 이제 스크립트가 기계의 운영 체제 정보를 가져와 결과를 HTML 보고서로 내보내는 스크립트가 있습니다. 목표는 스크립트에 더 많은 명령을 추가하여 프로세서, BIOS, 디스크 및 서비스와 같은 컴퓨터의 나머지 정보를 가져오는 것입니다.

각 명령은 HTML 코드로 서식이 지정된 다른 컴퓨터 정보를 반환합니다. 정보를 하나의 단일 HTML 보고서로 적절하게 통합하기 위해 ConvertTo-Html cmdlet에서 생성된 HTML 코드의 테이블 부분만 가져오기 위해 Fragment 매개 변수를 사용하세요.

아래 스크린샷에서 확인할 수 있듯이, PowerShell은 출력이 ConvertTo-Html cmdlet에 파이프되면 모든 기본 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 테이블을 생성합니다.

아래 스크린샷에서 볼 수 있듯이, 테이블 헤더는 버전, 캡션, 빌드 번호 및 제조사와 같은 속성 이름을 표시하고, 각 테이블 행은 개체를 나타내며 각 속성에 대한 개체의 값을 표시합니다.

HTML code generated by ConvertTo-Html cmdlet formatted as Table

테이블 레이아웃을 목록으로 변경하려면 매개 변수 -As를 사용한 다음 List를 입력합니다. PowerShell은 각 개체에 대해 두 개의 열로 구성된 Windows PowerShell 목록 형식과 유사한 HTML 테이블을 생성합니다. 첫 번째 열에는 버전, 캡션, 빌드 번호 및 제조사와 같은 속성 이름이 표시되고, 두 번째 열에는 속성 값이 표시됩니다.

HTML code generated by ConvertTo-Html cmdlet formatted as List

위의 예제를 통해 테이블 레이아웃을 변경하는 방법을 알았으므로, 운영 체제, 프로세서, BIOS 및 디스크 정보 테이블의 레이아웃을 목록 형식으로 변경하기 위해 스크립트에 As 매개 변수를 적용해 보겠습니다.

다음 코드로 스크립트를 업데이트하세요. 스크립트에는 운영 체제, 프로세서, 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 보고서가 웹 브라우저에서 어떻게 보일지를 제어하는 데 사용됩니다. CSS는 글꼴, 텍스트, 색상, 배경, 여백 및 레이아웃을 제어합니다. 이 섹션을 마치면 CSS를 사용하여 보고서가 일반적인 형식에서 풍부한 형식으로 변환되는 모습을 볼 수 있을 것입니다.

CSS를 HTML에 적용하는 세 가지 방법이 있습니다. 인라인, 내부 및 외부 방식이 있습니다. 이 문서에서는 HTML 보고서에서 Header 매개변수를 사용하여 내부 방식을 적용할 것입니다.

Header 매개변수는 <HEAD> 태그의 내용을 지정합니다. <HEAD> 태그는 CSS 코드를 배치하는 HTML 구조의 일부입니다. 아래 스크린샷에서 볼 수 있듯이 HTML 코드가 ConvertTo-Html cmdlet에 의해 생성될 때 <head> 태그가 이미 포함되어 있습니다.

이제 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 {

스크립트를 업데이트하고 실행한 후, 보고서는 아래와 같이 포맷되어야 합니다. CSS 덕분에 시각적으로 매력적이고 전문적으로 보입니다.

CSS에서 HTML id와 class 속성 사용

HTML 요소는 HTML 보고서의 구성 요소이며, CSS는 이러한 요소를 선택자로 사용하여 스타일을 적용합니다. 이전 예제에서 CSS 코드는 보고서의 h1, h2, table HTML 요소에 적용되었습니다. 그러나 서로 다른 요소에 서로 다른 스타일을 적용해야 하는 경우에는 어떻게 해야 할까요? 이때 id와 class 속성이 사용됩니다. HTML 보고서를 디자인할 때, 단일 요소를 정의하기 위해 id나 class 중 하나를 사용할 수 있습니다.

HTML 요소는 단일 요소에만 속하는 고유한 id를 가질 수 있지만, 클래스 이름은 여러 요소에서 사용될 수 있습니다. 웹 개발자들에게 이러한 속성들은 페이지를 디자인하는 데만 사용되는 것이 아니라, 주로 스크립트에서 페이지가 각 이벤트나 요청에 어떻게 응답할지 처리하는 데 사용됩니다.

-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 속성을 사용하여 생성 날짜 레이블의 형식을 지정하려면 먼저 <p> 태그에 ‘CreationDate’라는 id 이름을 할당하십시오. 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 속성을 할당하고 <p> 태그의 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 텍스트를 포함하는 요소는 <td> 태그입니다. PowerShell의 -Replace 메서드를 사용하여 서비스 정보 테이블 내의 모든 <td> 태그에 class 이름 RunningStatus과 StopStatus를 할당하십시오. 아래의 명령을 사용하여 스크립트를 업데이트하십시오.

.RunningStatus {
    color: #008000;
}

.StopStatus {
    color: #ff0000;
}

다음 CSS 코드를 $header 변수 아래에 추가합니다. class 이름이 RunningStatus인 모든

태그는 16진수 값이 #008000인 녹색과 동일하며, class 이름이 StopStatus인 모든

태그는 16진수 값이 #ff0000인 빨간색과 동일합니다.

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

스크립트를 저장하고 실행하세요. 보고서의 서비스 정보 테이블은 아래와 같이 업데이트되어야 합니다.

다음은 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!

전제 조건

ConvertTo-Html를 사용하여 기본 컴퓨터 정보 보고서를 생성합니다.

보고서를 HTML 파일로 내보내기

Fragment 매개변수를 사용하여 보고서를 결합

PreContent 및 PostContent 매개변수를 사용하여 레이블 추가

As 매개변수를 사용하여 테이블 레이아웃 변경