إنشاء تقارير HTML رائعة باستخدام PowerShell و CSS

الدروس التعليمية
PowerShell

PowerShell هو أداة قوية تساعدك في تبسيط وتأتيم المهام المملة والمتكررة. عادةً ما يستخدم المسؤولون PowerShell لاستخراج المعلومات من النظام أو قاعدة البيانات عندما يكون البيانات المطلوبة يجب تقديمها كتقرير. ولكن التقارير في ملفات النص أو CSV عادة ما تفتقر إلى الأناقة والتصميم الجذاب للأكواد HTML. في هذا البرنامج التعليمي، ستتعلم كيفية إنشاء تقرير HTML باستخدام PowerShell،

يمكن لـ PowerShell مساعدتك في إنشاء تقارير HTML والابتعاد عن هذه الصيغ الباهتة الأخرى. باستخدام PowerShell فقط، يمكنك إضفاء الحيوية على التقرير باستخدام HTML مما يتيح لك عرض بيانات النظام المستخرجة بشكل معنوي. يمكنك حتى تطبيق أوراق الأنماط المتداخلة (CSS) لتخصيص تصميم التقرير الخاص بك بسهولة.

في هذه المقالة، ستتعلم كيفية استخدام الأمر ConvertTo-HTML بالاشتراك مع الأمر Out-file لإنشاء تقرير HTML. ستتعلم أيضًا البرمجة الأساسية لـ CSS وكيف يمكن أن يكون مفيدًا في تنسيق تصميم تقريرك القائم على HTML.

المتطلبات المسبقة

سيكون هذا المقال دليلاً عملياً. إذا كنت تنوي متابعة الشرح، تأكد من إعداد المتطلبات المسبقة التالية مسبقًا.

  • سيتم عرض جميع الأمثلة باستخدام Windows 10 Build 1709، ولكن ليس هذا الإصدار مطلوبًا
  • Windows PowerShell 5.1 أو الإصدار الأحدث أو PowerShell Core 7
  • متصفح مثل إنترنت إكسبلورر أو جوجل كروم

إنشاء تقرير أساسي حول معلومات الكمبيوتر باستخدام ConvertTo-Html

لتوضيح كيفية استخدام cmdlet ConvertTo-Html ومعلماته، ستقوم بإنشاء سكريبت يحصل على معلومات أساسية حول الجهاز (مثل نظام التشغيل، والمعالج، وBIOS، ومساحة القرص المتاحة) ويولد هذه المعلومات في تقرير HTML.

تبدأ بأمر يجمع معلومات حول إصدار نظام التشغيل من الجهاز. افتح نافذة PowerShell الخاصة بك ثم قم بنسخ ولصق الأمر أدناه ثم اضغط على Enter لتشغيل الأمر.

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

عند تشغيل الأمر أعلاه، يقوم cmdlet Get-CimInstance بجمع خصائص فئة Win32_OperatingSystem التي تحتوي على معلومات حول نظام التشغيل للجهاز، وسيتم إرجاع العديد من النتائج، وبالتالي يتطلب تصفية للحصول على المعلومات ذات الصلة فقط. يجب أن تبدو النتيجة مشابهة للصورة المعروضة أدناه.

Machine’s Operating System Information

الآن بعد الحصول على الأمر لإرجاع معلومات نظام التشغيل، دعنا نقوم بتحويل النتيجة إلى كود HTML. لتحويل النتيجة (الكائنات) من الأمر السابق إلى كود HTML، يمكنك توجيه إخراج cmdlet Get-CimInstance إلى ConvertTo-Html. قم بتشغيل الأمر أدناه في نافذة PowerShell الخاصة بك.

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

يمكنك رؤية في الصورة أدناه أن PowerShell يقوم تلقائيًا بإنشاء علامات HTML من نتائج أمر “Get-CimInstance”. يتم عرض النتيجة في تنسيق جدول، حيث يعرض رأس الجدول أسماء الخصائص مثل “النسخة”، “العنوان”، “رقم البناء” و “الشركة المصنعة”. كل صف في الجدول يمثل كائنًا ويعرض قيم الكائن لكل خاصية.

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.

كما يمكنك رؤية في الصورة أدناه، تعرض رأس الجدول أسماء الخصائص مثل الإصدار، العنوان، رقم البناء و الشركة المصنعة وتمثل كل صف في الجدول كائنًا وتعرض قيم الكائن لكل خاصية.

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. في هذه المقالة ، ستقوم بتطبيق الطريقة الداخلية باستخدام معلمة 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> التي تطبق على تسمية “اسم الكمبيوتر”. تعد الخطوات السابقة مثالًا رائعًا على كيفية التحكم أو تلاعب في تصميم تقرير HTML باستخدام CSS.

HTML report with CSS using Head Parameter

لإضافة المزيد من التصميم إلى الجداول والتسميات الأخرى التي يتم وضعها في علامة

في التقرير ، قم بالاستمرار في تحديث المتغير $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 ، أصبح الشكل جذابًا بصريًا ويبدو احترافيًا.

استخدام الهوية والفئة في عناصر HTML باستخدام CSS

تعتبر عناصر HTML أدوات البناء الأساسية للتقرير بلغة HTML بأكملها ، وتستخدم CSS هذه العناصر كمحدد لمعرفة المكان الذي يجب تطبيق النمط عليه. من الأمثلة السابقة ، تم تطبيق النمط CSS على عناصر HTML

،

، و

في التقرير. ولكن ماذا لو كنت بحاجة إلى تطبيق نمط مختلف على عناصر مختلفة؟ هنا يأتي دور الهوية والفئة. في تصميم تقرير HTML الخاص بك ، يمكنك استخدام إما الهوية أو الفئة لتعريف عنصر واحد.

يرجى ملاحظة أنه يمكن لعنصر HTML أن يحتوي على هوية فريدة واحدة تنتمي إلى ذلك العنصر الوحيد ، في حين يمكن استخدام اسم فئة من قبل عناصر متعددة. بالنسبة لمطوري الويب ، فإن هذه السمات ليست مجرد لتصميم الصفحة ولكنها تُستخدم في الأساس في البرمجة للتعامل مع كيفية استجابة الصفحة لكل حدث أو طلب.

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

لنقم بتطبيق الهوية والفئة في تقرير HTML. كما يُظهر الكود المصغر أدناه ، يتم وضع تسمية تاريخ الإنشاء في علامة

.

HTML report showing the creation date label

عندما يتم إنشاء التقرير وعرضه في المتصفح ، يتم تنسيق تسمية تاريخ الإنشاء كما هو موضح أدناه.

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

لتنسيق تسمية تاريخ الإنشاء باستخدام سمة الهوية – أولاً ، قم بتعيين اسم الهوية ‘CreationDate‘ لعلامة <p>. يجب وضع اسم الهوية داخل العلامة البدء. يتم عرض الشيفرة المحدثة أدناه.

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

ثانياً ، قم بإنشاء شيفرة CSS جديدة لتنسيق تسمية تاريخ الإنشاء. استخدم الرمز ‘#’ متبوعاً باسم الهوية عند إعلان الهوية في CSS. أضف الشيفرة CSS أدناه في المتغير $header ثم احفظ وقم بتشغيل النص في نافذة الأوامر في PowerShell.

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

بعد تعيين الهوية وإنشاء شيفرة CSS جديدة تستهدف سمة الهوية لعلامة <p> ، يجب تحديث التقرير كما هو موضح أدناه.

HTML report showing the Services Information table

لنقم بتطبيق سمة الفئة في جدول معلومات الخدمة. باستخدام 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>'

كما ذكر سابقًا ، يمكن تعيين سمات الفئة لعناصر HTML متعددة. في التقرير HTML ، العنصر الذي يحمل النص قيد التشغيل و متوقف هو علامة <td>. باستخدام طريقة -Replace في PowerShell ، قم بتعيين أسماء الفئة حالة التشغيل و حالة الإيقاف لجميع العلامات <td> داخل جدول معلومات الخدمة. استخدم الأوامر أدناه وقم بتحديث النص.

.RunningStatus {
    color: #008000;
}

.StopStatus {
    color: #ff0000;
}

أضف الكود التالي أدناه في المتغير $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/