说明

由于浏览器安全限制，直接在js中调用window.print() 只能弹出打印预览窗口，无法自动调用打印机进行打印。

在许多业务场景下，希望能够做到自动调用打印机打印，无需人工干预。

Lodop通过本地驱动和浏览器控件相结合的方式解决了Web自动打印的需求。

支持各种浏览器

使用步骤

1、下载安装驱动及控件

通过[http://www.lodop.net/download.html]下载相关程序，并安装

2、在页面中使用

1. 引入js文件

<script src="/static/js/LodopFuncs.js" type="text/javascript"></script>

2. js打印方法

var LODOP;
function doPrint(how) {
	
	LODOP=getLodop();  
// 	LODOP.SELECT_PRINTER(); //弹出打印机选项页面
	LODOP.PRINT_INIT("小票打印");//打印任务名称
	LODOP.SET_PRINTER_INDEX("ydyf_pos58");//指定打印机名称
	LODOP.SET_PRINT_PAGESIZE(1,580,600,'CreateCustomPage');

	LODOP.ADD_PRINT_HTM(0,0,"100%","100%",document.getElementById("print_div").innerHTML);

// 	LODOP.PREVIEW();
	LODOP.PRINT();

}

免费版在打印时会增加文字“本页由【试用版打印控件Lodop6.2.2.6】输出”

主要方法介绍

• PRINT_INIT(strPrintTaskName)打印初始化
• SET_PRINT_PAGESIZE(intOrient,intPageWidth,intPageHeight,strPageName)设定纸张大小
• ADD_PRINT_HTM(intTop,intLeft,intWidth,intHeight,strHtml)增加超文本项
• ADD_PRINT_TEXT(intTop,intLeft,intWidth,intHeight,strContent)增加纯文本项
• ADD_PRINT_TABLE(intTop,intLeft,intWidth,intHeight,strHtml)增加表格项
• ADD_PRINT_SHAPE(intShapeType,intTop,intLeft,intWidth,intHeight,intLineStyle,intLineWidth,intColor)画图形
• SET_PRINT_STYLE(strStyleName, varStyleValue)设置对象风格
• PREVIEW打印预览
• PRINT直接打印
• PRINT_SETUP打印维护
• PRINT_DESIGN打印设计

参考

• http://www.lodop.net/LodopDemo.html

斑马打印机打印二维码

项目（Web项目）功能中存在生成并打印二维码的功能，需要借助打印机打印出二维码。由于业务需求二维码需要打印在不干胶的材料上并可以进行粘贴，所以借助斑马打印机通过热敏不干胶纸进行打印。

1. 需要结合所使用的的斑马打印机的型号，去官网下载相关的浏览器打印插件。（使用的是GT800型号，可以下载Browser Print）
   
   

下载适用于Windows PC的Browser Print，同时还可以下载javaScript库或者查看Browser Print产品支持。
下载完成后解压，得到安装包并进行安装。
安装完成后进行设置（产品支持中都已写明，具体可以查看官网的产品支持），主要设置打印机设备，如果此时打印机已经连接（打印机的连接，放纸，介质校正等官网都有详细视频），可以自动检测到设备。
2. 然后通过javaScript库的参考示例编写打印二维码的功能。

//斑马打印机用
var selected_device;

var errorCallback = function(errorMessage){
    alert("Error: " + errorMessage);
}

//斑马打印机用
function setup()
{
    //首先从应用程序中获取默认设备。
    BrowserPrint.getDefaultDevice("printer", function(device)
    {
        //添加设备
        selected_device = device;
    }, function(error){
        alert(error);
    })
}
setup();

//发送打印机ZPL Label
var writeToSelectedPrinter = function(dataToWrite){
    var printString = '^XA^JMA^LL450^PW700^MD0^PR3^PON^LRN^LH0,0^CI26^FO200,30^BQN,2,5^FDHM,B0200'+ dataToWrite + '^FS^XZ';
    selected_device.send(printString, undefined, errorCallback);
}

其中^BQN,2,10是指定二维码，指令格式如下：
^BQa,b,c
a代表二维码方向，默认是N
b代表二维码的版本，可选值有（1,2），1是原始版本，2是增强版本，推荐用2。
c代表二维码的放大程度，可选值（1-10）

（注意二维码的打印还需要与 ^FD 配合，当我们使用 ^BQ 这个函数时，^FD 必须设置相关的参数 ^FDab , cd^FS）

a：错误纠正率，（H,Q,M,L）H是超高可靠度，L是高密度，建议使用H
b：数据输入模式，（A,M）A是自动模式（参数c可省略），M是手动模式（需要指定参数c的字符类型）
c：字符模式，N — 数字，A — 字符，B — 字节，K — Kanji（日文汉字）
d：二维码的内容
（具体的ZPL语言内容没有深度了解，仅供参考）

其中的dataToWrite变量为生成的二维码信息并经过压缩和加密后的字符串。

3. 然后根据需要进行二维码打印方法调用即可。

（注：开始使用的是GT800的打印机型号，且浏览器打印插件和JavaScript样例都是基于该型号下载的，但GT800已经停产，后更换的新款的ZD888桌面打印机，插件和代码同样适用）

web打印的方式可分为三种：

1. 直接调用浏览器打印
2. 通过javascript插件调用浏览器打印
3. 通过第三方程序直接调用打印机

一、直接调用浏览器打印

通过在javascript代码中调用window.print()函数实现，浏览器会自动获取当前页面内容，并打开浏览器的打印预览页面。

使用场景：刚好当前页面的全部内容需要打印。

优点：兼容性好

缺点：适用场景狭窄；仅能识别内联样式，无法识别行内样式和外部样式

不推荐

二、利用第三方js库

比较推荐的是Print.js，目前GitHub上star最多的js打印控件，支持ES6，npm引入。

使用场景：只要没有直接打印的需求的场景，都可以使用这款插件

优点：

1. 支持打印的类型多：PDF、HTML、IMAGE、JSON
2. 支持行内样式与外联样式，再也不用在DOM元素上写满样式了
3. 兼容性好，除了IE不支持PDF和IMAGE打印外，其余主流浏览器全部支持

缺点：

1. 可能出现的样式异常
2. 无法直接打印/静默打印，因为是调用chrome打印，还是会弹出打印预览页面

使用方法：  

1. 安装，npm方式：

npm install print-js --save

yarn方式： 

yarn add print-js

 2. 在需要使用的文件中引入：

import print from 'print-js'

 3. 调用打印，以打印html为例，调用打印方法后浏览器会弹出打印预览页面：

import * as medicalStyle from '@/assets/style/eye/medical/standard.css'
import print from 'print-js'
...
/**
 * 打印方法
 */
printMedical () {
 // 调用打印插件，配置项参考官网：https://printjs.crabbly.com/
 print ({
        // printable为需要打印的DOM的id
        printable: 'standard',
        // type为需要打印的类型
        type: 'html',
        // css为样式文件或者直接css样式，支持导入整个css文件，或者css文件数组
        css: medicalStyle,
        // 可选项，这样配置意味着应用所有导入的css文件
        targetStyles: ['*']
      })
}

三、利用第三方插件LODOP

LODOP是老牌打印插件了，功能十分强大，同时也在与时俱进，原先老版本是以插件形式提供打印服务，目前官方也发现随着浏览器不断更新，兼容性有问题，开发了新的C-Lodop程序，解决了浏览器的兼容问题，

适用场景：对打印有较多配置要求，尤其需要直接打印的场景

优点：

1. 支持直接打印
2. 支持打印类型丰富：HTML、TABLE、URL、TEXT、文档模板
3. 配置项十分丰富，大到是否显示打印预览，小到分页设置、边框设置等等
4. 兼容性好，除了兼容各类浏览器外，甚至还有LINUX版本

缺点：

1. 直接打印功能需要付费解锁，但价格不算离谱，210RMB起
2. 需要单独下载exe安装到电脑上，不过也没办法，能实现如此强大的打印功能，只有此途径
3. 只支持内联样式，样式只能卸载DOM元素上

使用方法（window操作系统）：

1. 下载插件：

建议只安装红圈中云打印程序。更详细的区别请看官网的介绍文档

   2. 将LodopFuncs.js拷贝至项目目录下，例如我是放在src/asserts/printPlugin目录下，在文件底部添加导出语句

   3. 在页面中使用：

...
// 导入打印插件
import { getLodop } from '@/assets/printPlugin/LodopFuncs'
...
// 打印方法
printMedical () {
      // 获取打印对象
      const LODOP = getLodop()
      // 打印初始化
      LODOP.PRINT_INIT('打印任务名')
      // 设定纸张大小，指定需要打印的DOM元素
      LODOP.ADD_PRINT_HTM(0, 0, '100%', '100%', document.getElementById('standard').innerHTML)
      // 执行打印-直接打印
      LODOP.PRINT()
    }

以上是最简打印配置，有其他需要可以参考官方文档