Создавайте потрясающие HTML-отчеты с помощью PowerShell и CSS

PowerShell – это мощный инструмент, который помогает упростить и автоматизировать утомительные и повторяющиеся задачи. Администраторы обычно используют PowerShell для извлечения информации из системы или базы данных, когда требуемый набор данных должен быть представлен в виде отчета. Однако отчеты в текстовом или CSV формате обычно лишены элегантности и стиля HTML. В этом руководстве вы узнаете, как создать HTML-отчет с помощью PowerShell,

PowerShell может помочь вам создавать HTML-отчеты и избежать этих других блеклых форматов. Используя только PowerShell, вы можете сделать отчет живым с помощью HTML, что позволит вам осмысленно представить необработанные данные, извлеченные из системы. Вы даже можете применить Таблицы стилей CSS (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 и его параметры, вы создадите скрипт, который получает базовую информацию о компьютере (такую как операционная система, процессор, 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. Результат отображается в формате таблицы, где заголовок таблицы показывает имена свойств, такие как Version, Caption, BuildNumber и Manufacturer. Каждая строка таблицы представляет собой объект и отображает значения объекта для каждого свойства.

Generated HTML code

Экспорт отчета в файл HTML

Теперь, когда у вас есть результат и он преобразован в HTML-код, давайте экспортируем отчет в файл HTML, используя командлет Out-file, и просмотрим отчет в веб-браузере. Перенаправьте вывод командлета ConvertTo-Html и укажите путь, где вы хотите сохранить отчет, используя параметр -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

Запустите скрипт Generate-HTML-Report.Ps1 в вашей консоли PowerShell

.\Generate-HTML-Report.Ps1

После запуска скрипта откройте файл Basic-Computer-Information-Report.html в веб-браузере. Веб-браузер интерпретирует код отчета HTML и отображает данные на экране браузера. Отчет должен содержать информацию об операционной системе компьютера, аналогичную скриншоту ниже.

HTML report viewed in a web browser

Комбинирование отчетов с использованием параметра Fragment

На данный момент у вас есть скрипт, который получает информацию об операционной системе компьютера и экспортирует результат в HTML-отчет. Ваша цель – добавить в скрипт дополнительные команды для получения остальной информации о компьютере, такой как процессор, BIOS, диск и службы.

Каждая команда будет возвращать различную информацию о компьютере в формате HTML-кода. Чтобы правильно объединить информацию в один HTML-отчет, используйте параметр Fragment, чтобы получить только часть таблицы HTML-кода, сгенерированную с помощью командлета ConvertTo-Html.

Как видно на скриншоте ниже, PowerShell генерирует все основные элементы HTML, когда вывод передается в командлет ConvertTo-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
  • Объедините таблицы HTML с использованием параметра -Body в один HTML-отчет
  • Установите заголовок отчета на “Отчет о компьютерной информации” с помощью параметра -Title
  • Экспортируйте отчет в виде HTML-файла с помощью параметра Out-file

Дополнительная информация о сценарии доступна в комментариях в следующем фрагменте кода.

#Команда ниже получит информацию об операционной системе, преобразует результат в 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 создает HTML-таблицу, похожую на формат таблицы в Windows PowerShell.

Как видно на скриншоте ниже, заголовок таблицы отображает имена свойств, такие как 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 и диске на формат списка.

Обновите скрипт следующим кодом ниже. В скрипте присутствует параметр -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.

Существует три способа применения CSS в HTML: встроенный (Inline), внутренний (Internal) и внешний (External). Для этой статьи вы будете использовать внутренний метод, используя параметр Header в HTML-отчёте.

Параметр Header указывает содержимое тега <HEAD>. Тег <HEAD> является частью структуры HTML, где вы размещаете код для CSS. Как видно на скриншоте ниже, тег <head> уже включён, когда HTML-код создаётся с помощью cmdlet ConvertTo-Html.

HTML code showing the Head element

Теперь давайте используем CSS для форматирования HTML-отчёта. Сначала скопируйте код ниже и вставьте его в начало скрипта. Код CSS, назначенный переменной $header, изменит форматирование текстов в отчёте, которые находятся в теге <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>, применённый к метке “Computer name”. Приведённые выше шаги отличный пример того, как можно контролировать или манипулировать дизайном HTML-отчёта с помощью CSS.

HTML report with CSS using Head Parameter

Чтобы добавить больше дизайна к другим таблицам и меткам, которые размещены в теге <h2> в отчете, продолжайте обновлять переменную $header с помощью CSS кода ниже.

$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 он теперь визуально привлекателен и выглядит профессионально.

Использование атрибутов Id и Class в CSS

Элементы HTML являются строительными блоками всего вашего отчета HTML, CSS использует эти элементы как селектор, чтобы знать, куда должен быть применен стиль. Из предыдущих примеров, CSS код был применен к элементам HTML h1, h2 и table в отчете. Но что, если вам нужно применить разный стиль к разным элементам? Здесь на помощь приходят атрибуты id и class. При разработке вашего отчета HTML вы можете использовать либо id, либо class для определения одного элемента.

Пожалуйста, обратите внимание, что у элемента HTML может быть только один уникальный id, который принадлежит этому одному элементу, в то время как имя класса может использоваться несколькими элементами. Для веб-разработчиков эти атрибуты не только для дизайна страницы, но и в первую очередь используются в скриптах для управления тем, как страница будет реагировать на каждое событие или запрос.

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

Давайте применим атрибуты id и class в отчете HTML. Как вы можете видеть в приведенном ниже фрагменте кода, метка даты создания размещена в теге <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-код для форматирования метки даты создания. Используйте символ #, за которым следует имя ID при объявлении ID в CSS. Добавьте следующий CSS-код в переменную $header, затем сохраните и выполните скрипт в консоли PowerShell.

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

После присвоения id и создания нового CSS-кода, нацеленного на атрибут id тега <p>, отчет должен быть обновлен, как показано ниже.

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>. С использованием метода -Replace PowerShell присвойте имена классов RunningStatus и StopStatus всем тегам <td> в пределах таблицы Информация о службах. Используйте следующие команды и обновите скрипт.

.RunningStatus {
    color: #008000;
}

.StopStatus {
    color: #ff0000;
}

Добавьте следующий CSS-код ниже в переменную $header. Все теги <td> с именем класса RunningStatus будут иметь шестнадцатеричное значение #008000, что эквивалентно зеленому цвету, а все теги <td> с именем класса StopStatus будут иметь шестнадцатеричное значение #ff0000, что эквивалентно красному цвету.

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

Сохраните и запустите скрипт. Информация об услуге в отчете должна быть обновлена следующим образом.

Final layout of HTML report

Ниже представлена окончательная структура HTML-отчета, оформленного с использованием CSS.

Ниже приведены полные команды для 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/