js打印及问题处理（CLodop/jquery.print.js）

整理下知道的前端打印功能，涉及到二维码打印及遇到的问题和解决方法，分享给大家。

实现方案（以vue项目为例）

实现方案一：

使用CLodop打印。

Web打印控件，介于浏览器和打印设备之间，是个通道和桥梁，几乎能想到的打印控制事项都能做到；主要担纲Windows下的Web打印服务，它可以像浏览器打印插件一样使用，也可部署成集中打印服务器，给手机和平板打印提供云端。

控件功能强大,却简单易用,所有调用如同JavaScript扩展语句，主要接口函数如下：
● 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打印设计

步骤：

1. 在public/index.html 下引入

    <script src='http://127.0.0.1:8000/CLodopfuncs.js?priority=1'></script>
    <script src='http://127.0.0.1:18000/CLodopfuncs.js?priority=0'></script>

2. 获取打印对象

function getPrintCLopDop () {
	let LODOP  = null;
	try {
	  LODOP = getCLodop();
	  let devCount = 0;
	  if (LODOP) {
	    devCount = LODOP.GET_PRINTER_COUNT(); // 获取电脑上已安装驱动的打印机设备数
	    if (devCount  === 0) {
	      throw new Error("未安装打印机")；
	    }
	    let hasTargetDev = true;
	    for (var  i = 0; i < iCount  ; i++) {
	        let devName = LODOP.GET_PRINTER_NAME(i);
	        if (devName == "xxxx"){
	           LODOP.SET_PRINTER_INDEX(i); // 设置打印顺序，解决目标打印机未设置成默认打印机时，不打印的问题
	           hasTargetDev = false;
	        }
	     }
        if (!hasTargetDev ) {
          throw new Error("未安装xxxxx打印机")；
        }
	   } else {
         throw new Error("未安装CLodop打印机控件")
       }
     } catch (e) {
	    return null;
	 }
	 return LODOP;
  }

3. 打印二维码

直接读写端口数据（如发指令到打印设备）
向打印机发送原始数据的函数格式是： SEND_PRINT_RAWDATA(strRawData)

详细例子参考演示直接读写端口数据

LODOP.SEND_PRINT_RAWDATA(strRawData)

strRawData 内容解释
  // 开始标识
  let start = '^XA'
  // 结束标识
  let end = '^FS^XZ'
  // 120表示离纸张上边缘距离，240表示左边缘距离， 36 表示字体大小
  let styleStr = ' ^FO120,240^A0,N,36,36^FD'

实现方案二：

使用jquery插件 jquery.print.js 打印；

1. 引入jQuery，/jquery.qrcode.js，jquery.print.js文件

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.qrcode.js"></script>
<script type="text/javascript" src="js/jquery.print.js"></script> 

2.生成二维码

$(`#code`).qrcode(
   {
   	   render: "canvas",  // render 方式: 'canvas', 'table'
       width: 80,
       height: 80,
       text: "http://blog.wpjam.com",
       ecLevel: "M"  // 容错率， 'L', 'M', 'Q' or 'H'
     }
   )

3. 打印

$(`#code`).print({
	globalStyles : false,  // 是否引入全局样式
    mediaPrint : true, // 是否引入  media=“print” 样式
    iframe : true,  // 是否使用iframe标签打印
    noPrintSelector : "",
    prepend : "", // 页眉
    append : "", // 页脚
    deferred: $.Deferred().done(function() { console.log('Printing done', arguments); }) // 打印完成回调
})

常见问题

1. Q： CLodop 打印命令发送后，打印机没反应
   A：

   1. 更新CLodop 打印机控件下载中心，
   2. 检查电脑是否安装打印机驱动，已安装的打印下测试页

2. Q： 使用Jquery插件打印，页眉页脚不显示设置
   A： 在页面中引入下面这段代码，并检查调用print打印api里面prepend 和append 配置项是否为空，即可。

<style  media=“print”>
	@page {
	  size: auto; /* auto is the initial value */
	  margin: 0mm; /* this affects the margin in the printer settings 最关键的还是这个*/
	}
</style>

3. Q： 二维码打印预览时不显示
   A： 把二维码转换成图片，打印时显示图片，隐藏二维码

   let imgBase64Url = $("#code").find("canvas")[0].toDataURL('image/png');
   $("#code").prev().prop("src", imgBase64Url);

<style  media=“print”>
	#code {
	 display: none;
	}
	img {
	 display: inline-block;
	}
</style>

• Q： 二维码内容太多，扫码内容半天没反应
  A： 1. 增大生成二维码的尺寸； 2.设置ecLevel等级为“H”。即可。

• Q： 打印出来的效果模糊
  A： 1. 设置打印字体颜色；2. 设置打印机的精细度；3. 设置打印色度
  设置打印字体颜色最好是#000，如果要彩色就不用设置了，
  打印机精度和色度设置，不同打印机的配置都不一样，具体的步骤如下
  ① 在Windows操作系统中，点击开始菜单，然后选择“控制面板。
  ② 在控制面板或系统偏好设置中，找到并点击“设备和打印机”（或类似的选项）；
  ③ 找到你要调整分辨率的打印机，右键点击它，然后选择“打印机属性”（或类似的选项）；
  ④ 在打印机属性对话框中，你可能需要切换到“高级”或“设置”选项卡；
  ⑤ 在高级或设置选项卡中，查找与分辨率相关的设置。具体的名称和位置可能因打印机型号而异；
  ⑥ 选择更高的分辨率选项。通常，选择更高的数值表示更清晰的打印结果；
  ⑦ 保存并应用更改，然后关闭打印机属性对话框。