.Net C#: Webbrowser control print line break

I was updating an old project for a client today. I needed to print a simple list and figured that the easiest way should be to format the data in HTML. Most developers out there has built webpages now days and we all know that it is a quick way to format the information and print it. So after a quick creation of the HTML i found an article named “Displaying custom HTML in WebBrowser control” by Gunnar Peipman. So easy enough to print the custom HTML from the control, based on Gunnar’s article I came up with this code:
[csharp]
WebBrowser webPrint = new WebBrowser();
webPrint.Navigate("about:blank");

if (webPrint.Document != null) {
webPrint.Document.Write(string.Empty);
}
webPrint.DocumentText = printHTML.ToString();
webPrint.DocumentCompleted += webPrint_DocumentCompleted;

void webPrint_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e) {
WebBrowser webPrint = (WebBrowser)sender;
webPrint.ShowPrintDialog();
}[/csharp]

If you don’t use the “DocumentComplete” event handler your printout will be blank. In the print I used a basic HTML table to show the data with rows like this:

[html]<table cellpadding="3" style="width:100%">
<tr style="color:White;background-color:Black;font-weight:bold;"><td>Box ID</td><td>Gång</td><td>Hylla</td><td>Nivå</td><td>Nåbar från golvet</td></tr>
<tr><td>10346</td><td>AB</td><td>3</td><td>F</td><td>True</td></tr>
<tr><td>10294</td><td>AB</td><td>3</td><td>D</td><td>True</td></tr>
<tr><td>10296</td><td>AB</td><td>3</td><td>C</td><td>True</td></tr>
<tr><td>10298</td><td>AB</td><td>3</td><td>C</td><td>True</td></tr>
<tr><td>10300</td><td>AB</td><td>3</td><td>B</td><td>True</td></tr>
<tr><td>10302</td><td>AB</td><td>3</td><td>B</td><td>True</td></tr>[/html]

When printing data that took up several pages I ended up with this:

pagebreak error

The data was cut of at the line breaks. I Googled a lot and found a few suggestions about css “page-break..” but they didn’t have any effect on the webbrowser control print layout. Finally I found a simple soulition, just add a bland column to the left of the table and the line break works. Like this:

[html]<table cellpadding="3" style="width:100%">
<tr style="color:White;background-color:Black;font-weight:bold;"><td> </td><td>Box ID</td><td>Gång</td><td>Hylla</td><td>Nivå</td><td>Nåbar från golvet</td></tr>
<tr><td> </td><td>10346</td><td>AB</td><td>3</td><td>F</td><td>True</td></tr>
<tr><td> </td><td>10294</td><td>AB</td><td>3</td><td>D</td><td>True</td></tr>
<tr><td> </td><td>10296</td><td>AB</td><td>3</td><td>C</td><td>True</td></tr>
<tr><td> </td><td>10298</td><td>AB</td><td>3</td><td>C</td><td>True</td></tr>
<tr><td> </td><td>10300</td><td>AB</td><td>3</td><td>B</td><td>True</td></tr>
<tr><td> </td><td>10302</td><td>AB</td><td>3</td><td>B</td><td>True</td></tr>
<tr><td> </td><td>10382</td><td>AB</td><td>4</td><td>F</td><td>True</td></tr>[/html]

Then the printout looked like this:

pagebreak fix

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: