PowerShell

Creating Portable HTML in PowerShell

In a previous Petri.com article, we were exploring ways to do more with HTML in PowerShell. At the end, I showed you a finished file that used a path to a local copy of a CSS file. There is nothing wrong with this if the file will never leave your computer or when testing. To make the document portable, you can embed the style information directly into your HTML file.

 

 

Sponsored Content

Read the Best Personal and Business Tech without Ads

Staying updated on what is happening in the technology sector is important to your career and your personal life but ads can make reading news, distracting. With Thurrott Premium, you can enjoy the best coverage in tech without the annoying ads.

To keep my code samples a bit easier to read, I am going to be working with the same data.

$data = Get-Eventlog -List | Select @{Name="Max(K)";Expression = {"{0:n0}" -f $_.MaximumKilobytes }},
@{Name="Retain";Expression = {$_.MinimumRetentionDays }},
OverFlowAction,@{Name="Entries";Expression = {"{0:n0}" -f $_.entries.count}},
@{Name="Log";Expression = {$_.LogDisplayname}}

I will pipe $data to ConvertTo-HTML. I am also going to start using a hashtable of parameter values to splat to ConvertTo-HTML.
$convertParams = @{
 Title = "Event Log Report"
 PreContent = "<H1>$($env:COMPUTERNAME)</H1>" 
 PostContent = "<H5><i>$(get-date)</i></H5>"
}

The style information goes in the html header. I will copy the code from my CSS file to a here string variable. Then, I will add the variable to the parameter hashtable, since I have already created it.
$head = @"
<style>
body { background-color:#E5E4E2;
       font-family:Monospace;
       font-size:10pt; }
td, th { border:0px solid black; 
         border-collapse:collapse;
         white-space:pre; }
th { color:white;
     background-color:black; }
table, tr, td, th { padding: 0px; margin: 0px ;white-space:pre; }
table { margin-left:25px; }
h2 {
 font-family:Tahoma;
 color:#6D7B8D;
}
.footer 
{ color:green; 
  margin-left:25px; 
  font-family:Tahoma;
  font-size:8pt;
}
</style>
"@

$convertParams.add("Head",$head)

Let’s try it out.
$data | convertto-html @convertParams | out-file d:\temp\a.htm

Using embedded CSS (Image credit: Jeff Hicks)
Using Embedded CSS (Image credit: Jeff Hicks)

Pretty good. Although, if you look closely, you will see that I have lost my report title. When you use a header, the -Title parameter is ignored. Let’s revise the header to insert the Title tag and try again.

$convertParams = @{ 
 PreContent = "<H1>$($env:COMPUTERNAME)</H1>" 
 PostContent = "<H5><i>$(get-date)</i></H5>"
 head = @"
 <Title>Event Log Report</Title>
<style>
body { background-color:#E5E4E2;
       font-family:Monospace;
       font-size:10pt; }
td, th { border:0px solid black; 
         border-collapse:collapse;
         white-space:pre; }
th { color:white;
     background-color:black; }
table, tr, td, th { padding: 0px; margin: 0px ;white-space:pre; }
table { margin-left:25px; }
h2 {
 font-family:Tahoma;
 color:#6D7B8D;
}
.footer 
{ color:green; 
  margin-left:25px; 
  font-family:Tahoma;
  font-size:8pt;
}
</style>
"@
}

$data | convertto-html @convertParams | out-file d:\temp\a.htm

Corrected header with title (Image credit: Jeff Hicks)
Corrected Header with Title (Image credit: Jeff Hicks)

And while we are on the subject of style, here is a tip on how to get alternating bands. This is helpful for very long tables. Insert this code into your style sheet.

tr:nth-child(odd) {background-color: lightgray}

You can set the background-color value to any valid HTML color value. Another style trick is to set the table to fill more of the page and also to automatically resize when you resize the browser.
table { width:95%;margin-left:5px; margin-bottom:20px;}

Here is my final complete code:
$convertParams = @{ 
 PreContent = "<H1>$($env:COMPUTERNAME)</H1>" 
 PostContent = "<H5><i>$(get-date)</i></H5>"
 head = @"
 <Title>Event Log Report</Title>
<style>
body { background-color:#E5E4E2;
       font-family:Monospace;
       font-size:10pt; }
td, th { border:0px solid black; 
         border-collapse:collapse;
         white-space:pre; }
th { color:white;
     background-color:black; }
table, tr, td, th { padding: 2px; margin: 0px ;white-space:pre; }
tr:nth-child(odd) {background-color: lightgray}
table { width:95%;margin-left:5px; margin-bottom:20px;}
h2 {
 font-family:Tahoma;
 color:#6D7B8D;
}
.footer 
{ color:green; 
  margin-left:25px; 
  font-family:Tahoma;
  font-size:8pt;
}
</style>
"@
}

$data | convertto-html @convertParams | out-file d:\temp\a.htm

A better formatted report (Image credit: Jeff Hicks)
A Better Formatted Report (Image credit: Jeff Hicks)

This is a much nicer looking report and I hope you will try the code out for yourself to see this in action.

My sharp eyed readers may have noticed a section of the style sheet that defined a footer. However, the final result does not appear to be using it. How is that supposed to work? Or let’s say I want any event log with 0 entries to display in red. How can I do that? I will show you how in the next article.

Related Topics:

BECOME A PETRI MEMBER:

Don't have a login but want to join the conversation? Sign up for a Petri Account

Register
Comments (0)

Leave a Reply

Download this eBook!

External Sharing and Guest User Access in Microsoft 365 and Teams

his eBook will dive into policy considerations you need to make when creating and managing guest user access to your Teams network, as well as the different layers of guest access and the common challenges that accompany a more complicated Microsoft 365 infrastructure. The eBook will also outline some of the major decision points across four general-purpose guest access policy scenarios for how an organization can set this up with standard licensing.

Download Now

Sponsored By