Several Methods to Implement WEB Printing

Currently, WEB application development is very popular, mainly because the rules for WEB application clients are simple, easy to learn, maintain, and publish, reducing development difficulty. However, printing in WEB applications has always been a challenge, especially when it comes to label printing (such as package labels, shipping labels, etc.) and receipt printing (such as retail receipts). The difficulty lies in how to precisely align the content to be printed onto labels and receipts, accurately control pagination, and achieve high-speed continuous printing.

For WEB printing, there are several common methods, which are introduced below, hoping to be helpful to everyone.

1. Directly Using the Browser's Printing Function

Using the print menu or windows.print() is sufficient. The advantage of this method is that it does not require any browser extensions and is the simplest approach, but it also has the most issues, such as:

1. Inability to precisely paginate. Browsers generally decide the pagination position based on the user's page size settings and the amount of content on the web page, making it difficult for programmers to control.
2. Interference from headers and footers.
3. Inability to accurately align margins and printed text.
4. Inability to solve continuous printing. For example, not just printing one receipt but continuously printing several receipts at once.
5. Printing usually triggers pop-up prompts, affecting user experience.

2. Using Print CSS

This method is an enhanced version of directly using the browser's printing function. This solution embeds print-related CSS styles in the HTML document to control the output printing of the HTML document, such as setting paper size, paper orientation, print margins, pagination, etc. The advantages of this method are low cost, no need to download any plugins, and excellent cross-platform compatibility. However, the current issues are:

1. Poor support from manufacturers for print CSS.
2. The problem of pop-up prompts during printing is not solved, and continuous printing is less efficient. User experience is poor.
3. Not very suitable for printing small labels.
4. Printing barcodes and QR codes is not very convenient.
5. Must use Windows drivers, and support for professional label printers from companies like Zebra that use ZPL protocol is not good.

3. Using PDF Files

In this method, a PDF file stream is downloaded from the server, opened in the browser with an Adobe plugin, and then printed using Adobe's print menu. This solution can achieve precise printing but requires downloading the Adobe plugin. Also, this method is generally more suitable for report printing and not very suitable for label/receipt printing.

4. Using ActiveX

This solution was very popular in the IE era. This method involves downloading a control, and the receipt data is no longer presented in HTML but in ActiveX. The advantage of this method is high printing precision and good pagination control. However, the disadvantage is obvious: ActiveX controls can only be used in IE browsers, and with Firefox, Chrome, and Edge becoming mainstream, its applicability is greatly reduced.

5. The Technical Solution Adopted by PrintSpirit

The design goal of PrintSpirit is to support web printing, mobile device printing, and embedded device printing, meeting printing needs in various scenarios, and providing a tool for software developers and system integrators to reduce development difficulty and speed up product development. When designing PrintSpirit, we set the following goals:

1. Provide simple JS APIs to directly control the printer through APIs.
2. Support mainstream browsers like IE9+, Firefox, Chrome, Safari, and mobile browsers.
3. Focus on label printing, printing receipts, trademarks, tags, logistics labels, and support barcode and QR code printing.
4. Ultra-high-speed printing support for professional label printers, no need for Windows print drivers, directly using industry-standard ZPL/CPCL printing commands to ensure full-speed printing.
5. Provide a WYSIWYG template editor, separating template design and template printing, facilitating label design.
6. Support WEB printing, mobile device printing, and embedded device printing.

Based on the above goals, we proposed the technical implementation solution of PrintSpirit, with the printing template as the core, respectively implementing the drivers for WEB printing, mobile device printing, and embedded device printing. This article focuses on the implementation technology of the WEB driver, and the solutions for mobile devices/embedded devices will be introduced in other articles.

The conventional WEB printing technologies introduced earlier each have their own problems and cannot achieve the above goals. For example, to achieve cross-browser support, ActiveX technology cannot be used; to support WEB printing, mobile device printing, and embedded device printing simultaneously, print CSS technology cannot be used, etc. Through repeated research, comparison, and trade-offs, we designed the local printing proxy model.

The local printing proxy is essentially a miniWeb server started locally, and printing is completed through communication between the client browser and the miniWeb server. Since the miniWeb server runs in an independent process, various complex functions can be developed without affecting the browser, making it a very stable, reliable, and compatible solution for various browsers. The difficulty of this solution is designing a reasonable communication protocol and solving technical problems such as cross-domain access.

In implementation, we used the cross-platform Golang as the development language to develop a miniWebSvr program that can start automatically on boot and can be used on Windows, Linux, and other systems. Golang has high performance, and the final program is small in size and runs fast. Students in need can download it here.

To simplify printing operations, we encapsulated the underlying protocol and provided easy-to-use APIs. For details, see the JS API Usage Guide.