Use js to call the printer on the front-end web page

Use js to call the printer on the front-end web page

I recently participated in the transformation of an older project, which required the use of printer-related technologies.
Since the printer is also relatively old, there is no SDK-related application. Although there is a desktop plug-in, it needs to be integrated into the web. Finally, I found the universal driver lodop.
This is because the printer is needle-type, so the following methods are summarized, which are enough for me at present.

Install:

Download the distribution package on the official website home page of http://www.lodop.net/download.html
and start it after installation, then call the following method to realize printing.

method function

getLodop() initializes the print control

PRINT_INIT(name) Initialize printing, name: print document name, the name can be seen in the print device queue

GET_PRINTER_COUNT() Get the number of printers

GET_PRINTER_NAME(intPrinterIndex) Get the printer name with the serial number, the general serial number starts from 0, and -1 refers to the default printer;
SET_PRINTER_INDEX() specifies the printer according to the serial number or name, and manual reselection is prohibited after selection; the general setting is -1, which is used to specify use default printer

SET_PRINT_STYLE(attr, value) Set the basic print style attr: attributes,
such as FontSize, FontColor,
etc. attr: attribute, FontSize, FontColor, etc. value: attribute value

SET_PRINT_PAGESIZE(intOrient,intPageWidth,intPageHeight,strPageName) Set paper size
intOrient: printing orientation and paper type
1—vertical printing, fixed paper;
2—horizontal printing, fixed paper;
3—vertical printing, fixed width, height according to the printed content Highly self-adaptive
0—the direction is not fixed, which can be selected by the operator or according to the default setting of the printer.
intPageWidth:
paper width, the unit is 0.1mm. For example, the parameter value is 45, which means 4.5mm, and the measurement accuracy is 0.1mm.
intPageHeight:
When the paper is fixed, this parameter is the height of the paper; when the height is adaptive, this parameter is the blank height of the bottom edge of the paper, and the unit of measurement is the same as the paper width.
strPageName:
paper type name, this parameter is only valid when intPageWidth is equal to zero, for the specific name, refer to the format definition in the print service properties of the operating system.
The keyword "CreateCustomPage" will create a custom paper type named "LodopCustomPage" in the system.

ADD_PRINT_TEXT(top, left, width, height, text) // Add print text
top: the distance from the top of the paper
left: the distance from the left side of the paper
width: the width of the current text will be hidden if the width is less than the character length
height: the current text The height of the height is less than the character height has no effect on
text: text string

ADD_PRINT_TABLE( top ,
left , width,
height , tableDom) Print tables, which can print HTML-drawn
tables It is better to use percentage for height
tableDom: dom element of table

ADD_PRINT_HTM(top, left, width, height, dom); Print HTML elements, not the ellipse drawn by css
top: the distance from the top of the paper
left: the distance from the left side of the paper
width: the width of the current element
height: the height of the current element height
dom: dom element

NewPage() Add a new page, which is more suitable for continuation

PREVIEW() print preview

PRINT() prints directly

PRINT_DESIGN() prints the design, you can design the template and then generate the code for direct use

example

function templatePrint() {
    
    
    // 初始化打印机
    let LODOP = getLodop();
    // 初始化打印名称
    LODOP.PRINT_INIT('测试打印')
    LODOP.SET_PRINTER_INDEX(-1)  // 设置使用的打印机，-1表示使用默认打印机
    LODOP.SET_PRINT_STYLE('FontSize', 24);  // 设置基本样式，字体大小24
    LODOP.SET_PRINT_PAGESIZE(1, 2100, 2970, 'CreateCustomPage') // 设置打印方向和纸张大小
    // LODOP.SET_PRINT_PAGESIZE(1, 0, 0, 'A4') // 直接设置A4纸规格
    LODOP.ADD_PRINT_TEXT(100, 100, 500, 20, '测试文本1');  // 添加打印文字
    LODOP.ADD_PRINT_TEXT(200, 100, 500, 20, '测试文本2');  // 添加打印文字
    LODOP.SET_PRINT_STYLEA(2, 'FontSize', 24); // 指定第二条的字体样式
    LODOP.NewPage()  // 添加一页，续打
    LODOP.ADD_PRINT_TABLE(0, 0, "100%", '100%', dom);  // 打印表格
    LODOP.NewPage() // 添加一页，续打
    LODOP.ADD_PRINT_HTM(0, 0, 500, 100, dom);  // 打印HTML内容
    LODOP.PREVIEW()  // 打印预览
    // LODOP.PRINT()  // 直接打印
    // LODOP.PRINT_DESIGN()  // 打印设计
}