צור דוחות HTML מרהיבים עם PowerShell & CSS – techsyncer

PowerShell הוא כלי עוצמתי שיעזר לך לפשט ולאוטומטז משימות מזמינות וחוזרות. מנהלים בדרך כלל משתמשים ב-PowerShell כדי לחלץ מידע ממערכת או ממסד נתונים כאשר סט הנתונים הנדרש יש להציגו כדוח בדוח. אך דוחות בקבצי טקסט או CSV כמעט תמיד חסרים בסגנון ובעיצוב מרשים של HTML. במדריך זה, תלמד איך ליצור דוח HTML באמצעות PowerShell,

PowerShell יכול לעזור לך לבנות דוחות HTML ולהימנע מפורמטים יבשים אחרים. באמצעות PowerShell בלבד, אתה יכול להביא דוח לחיים עם HTML שמאפשר לך להציג מצג משמעותי של המידע הגולמי שחולץ מהמערכת. אתה יכול אפילו להחיל גיוס של גיוס (CSS) כדי להתאים אישית את פריסת הדוח שלך בקלות.

במאמר זה, תלמד כיצד להשתמש ב-ConvertTo-HTML בשילוב עם Out-file cmdlets ליצירת דוח 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 שמכילה את המידע על מערכת ההפעלה של המחשב, הפקודה תחזיר הרבה תוצאות, לכן יש צורך בסינון כדי לקבל רק את המידע הרלוונטי. התוצאה צריכה להיראות דומה לצילום המסך המוצג למטה.

עכשיו שיש לך את הפקודה שמחזירה את מידע המערכת ההפעלה, בוא נמיר את התוצאה לקוד HTML. כדי להמיר את התוצאה (אובייקטים) מהפקודה למעלה לקוד HTML, תוכל להעביר את הפלט של הפקודה Get-CimInstance לפקודת ConvertTo-Html. הרץ את הפקודה למטה בחלון הפקודות של PowerShell.

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

הנה תמונת מסך שמציינת שפוורשל אוטומטית יוצרת תגי HTML מפלט הפקודה Get-CimInstance. התוצאה מוצגת בפורמט טבלה, כאשר כותרת הטבלה מציגה את שמות המאפיינים כמו Version, Caption, BuildNumber ו־Manufacturer. כל שורת טבלה מייצגת אובייקט ומציגה את הערכים של האובייקט עבור כל מאפיין.

ייצוא הדוח לקובץ 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 ויציג את המידע על מסך הדפדפן. הדוח אמור לכלול מידע על מערכת ההפעלה של המחשב, כפי שמוצג בתמונת המסך למטה.

שילוב דוחות באמצעות פרמטר `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>"

#הפקודה למטה תקבל את פרטי עשר שירותים ראשונים, תמיר את התוצאה לקוד 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.

כפי שאתה יכול לראות בתמונת המסך למטה, כותרת הטבלה מציגה את שמות המאפיינים כמו גרסה, כיתוב, מספר בניין ו־יצרן וכל שורת טבלה מייצגת אובייקט ומציגה את ערכי האובייקט עבור כל מאפיין.

HTML code generated by ConvertTo-Html cmdlet formatted as Table

כדי לשנות את תבנית הטבלה לרשימה, השתמש בפרמטר -As ואז עקוב אחרי List. PowerShell מייצר טבלת HTML עם שתי עמודות עבור כל אובייקט שדומה לתבנית הרשימה של Windows PowerShell. העמודה הראשונה מציגה את שמות המאפיינים כמו גרסה, כיתוב, מספר בניין ו־יצרן והעמודה השנייה מציגה את ערך המאפיין.

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. במאמר זה, תחילה תשתמשו בשיטת Internal באמצעות הפרמטר Header בדוח ה-HTML.

הפרמטר Header מציין את תוכן התגית <HEAD>. התגית <HEAD> היא חלק ממבנה ה-HTML שבו מכניסים את הקוד עבור CSS. כפי שניתן לראות בתמונה מצורפת, התגית <head> כבר כלולה כאשר הקוד HTML נוצר על ידי cmdlet של ConvertTo-Html.

עכשיו בואו נשתמש ב-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>"

כאשר תריצו את הסקריפט, הדוח צריך להתעדכן כפי שמוצג למטה. שימו לב כי האלמנט היחיד שנפגע הוא התגית <h1> שנמצאת על "שם המחשב". השלבים לעיל הם דוגמה נהדרת לכיצד ניתן לשלוט או לשנות את עיצוב הדוח ה-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 {

לאחר העדכון והרצת הסקריפט, הדוח יוצג בפורמט המוצג למטה – תודות ל־CSS, הוא מוצג בצורה חזותית מושכת ומקצועית כעת.

שימוש במזהה ובמאפייני קבוצה ב־HTML ו־CSS

אלמנטים של HTML הם בלוקי בנייה של דוח HTML שלך, CSS משתמש באלמנטים אלה כמבחר כדי לדעת היכן ליישם את הסגנון. מדוגמאות הקודמות, קוד CSS הוחל על אלמנטי HTML h1, h2 ו־table בדוח. אך מה קורה אם תרצה להחיל סגנון שונה על אלמנטים שונים? זהו המקום שבו נכנסים מאפייני id ו־class. בעיצוב של דוח ה־HTML שלך, תוכל להשתמש ב־id או class להגדיר אלמנט יחיד.

שים לב שאלמנט של HTML יכול להכיל רק id ייחודי אחד ששייך לאותו אלמנט בודד, בעוד ששם של class יכול לשמש על ידי מספר אלמנטים. למפתחי אתרים, מאפיינים אלו אינם רק לעיצוב העמוד אלא בעיקר נעשה בהם שימוש בתסריטים לטיפול באירועים או בקשות שונות.

-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 שנניח לשנות את צבע הטקסט לירוק **כאשר ערך המצב הוא פועל ולהשתמש באדום כאשר הערך הוא עצר.

$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, הרכיב שמחזיק את הטקסט פועל ועצר הוא תג <td>. באמצעות השימוש בשיטת -Replace של PowerShell, הקצה את שמות המחלקות RunningStatus וStopStatus לכל תגי <td> בתוך טבלת מידע על השירותים. השתמש בפקודות הבאות ועדכן את הסקריפט.

.RunningStatus {
    color: #008000;
}

.StopStatus {
    color: #ff0000;
}

הוסף את קוד ה־CSS הבא למטה במשתנה $header. כל התגי

עם שם מחלקה של RunningStatus יהיו בערך ההקסדצימלי של #008000 המקביל לצבע ירוק, וכל התגי

עם שם מחלקה של StopStatus יהיו בערך ההקסדצימלי של #ff0000 המקביל לצבע אדום.

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

שמור והפעל את הסקריפט. טבלת מידע השירות בדוח צריכה להתעדכן כפי שמוצג למטה.

למטה מוצג הפריסה הסופית של דוח ה־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.

דרישות מוקדמות

יצירת דוח מידע בסיסי על מחשב באמצעות ConvertTo-Html