How to setup html file for printing with thermal printer

Question

My objective is printing 10cm x 6.5cm labels for products. I have a Zebra printer for printing labels. I was using Fast-reports for Printing labels by using handheld. Since fast-reports is only for Net Framework and not for Net CF, I was using sockets to handle data between handheld and pc.

Desktop applications hard to make stable for my knowledge of c#. I am a PHP dev. so I thought I can create labels with HTML & CSS since barcodes can also done with php.

The reason I am asking this question because I don't know how to send html page to printer and What sizes should I use for 10cm x 6.5cm with pixels for best quality printing.

Pfennig

Answer 1

Might be a little late for a response but I was facing the exact same problem back in the day and to accomplish what you describe I approached in a weird way that eventually worked. The steps that I describe don't affect the UI but it renders your HTML without the user noticing.

1. Render the HTML on a Webview that won't be visible to the user and set a WebViewClientCallback that will be called as soon that your WebViewRenders your html.

   var webview = new Android.Webkit.WebView(Common.Instance);
   webview.Layout(0, 0, widthOfHTML, heightOfHtml);
   webview.Settings.LoadWithOverviewMode = true;
   webview.Settings.UseWideViewPort = true;
   webview.LoadDataWithBaseURL("file:///android_asset/", template, "text/HTML", "UTF-8", null);
   webview.SetWebViewClient(new WebViewClientCallback());
   

2. In you webviewClient callback override the OnPageFinished method that will

   public class WebViewClientCallback : WebViewClient
   {
       public override async void OnPageFinished(WebView myWebview, string url)
       {
            // Render webview to a bitmap
            var bitmap = Bitmap.CreateBitmap(myWebview.Width, myWebview.Height + 50, Bitmap.Config.Argb8888);
   
            // Code to print bitmap
       }
   }
   

Skillet

Answer 2

You will need to set up a @media print { YOUR CSS STYLES } after you get that set the way you want it to look when printed. Make sure to convert your cm to one of these as well pt, px, em or rem. You can then add a bit of javascript to a button to make it open in print view if you want otherwise you would just right-click on the html page and tell it to print. Using the javascript something like this:

<button onclick="myFunction()">Print this page</button>

<script>
function myFunction() {
    window.print();
}
</script>

Lastditch