js 调用浏览器打印功能

功能需求：店家从商家后台调用打印机打印送货单，送货单信息：二维码，地址，电话等等

首先拆分功能点：生成二维码、调用浏览器打印机打印订单 （二维码使用qrcode.react第三方生成，二维码格式为canvas，但是浏览器打印不能识别canvas格式，qrcode.react (v7.1.2) 。具体如下）

1. 二维码生成使用qrcode.react

             <QRCode value={`${orderInfo.orderSn}`} size={80}/>
             {/*value(string) 写法{`${orderInfo.orderSn}`}*/} 
             文档要求value值string，v7.1.2

2. 调用浏览器打印机 window.print()

			// html
			<div id="order-print" style={{ display: 'none'}}>
				<!--content-->
         	 </div>

		 	//javascript
		 	  printOrder = async () => {
		 	  	await this.convertCanvasToImage();
		 	  	//获取打印内容最外层dom节点
    			let bdHtml = window.document.getElementById("order-print").innerHTML;
    			//打印内容赋值innerHTML绘制新页面（window.print()打印当前页)
    			window.document.body.innerHTML = bdHtml;
    			//调用浏览器打印机
    			window.print(); 
    			//刷新页面返回当前页
   				location.reload();
 			 };

执行代码发现，二维码无法显示在打印内容中，通过查看qrcode.react底层图形绘制，发现生成得二维码是canvas格式，浏览器的打印无法识别canvas，所以不能显示在打印内容上面，可以服务端生成二维码，前端拿url放img显示打印，也可以知道二维码图像格式canvas，我们就可以把canvas转为image格式，再去打印，前端实现方法如下如下：

 			//首页在页面初始渲染时将二维码生成，并隐藏（视业务需求而定）
 			<div style={{display: 'none'}}>
              <QRCode value={`${orderInfo.orderSn}`} size={80}/>
              {/*value(string) 写法{`${orderInfo.orderSn}`}*/}
            </div>
            
			//需要在调用打印方法之前将canvas转为image，所以在打印内容中添加一个img-qrcode节点，
			将初始渲染的二维码转为image格式，再插入到打印内容的img-qrcode节点中,然后调用打印事件。
			<div id="order-print" style={{ display: 'none'}}>
				<!--content-->
				<div id="img-qrcode"></div>
         	 </div>
		
  			convertCanvasToImage = () => {
  				//因为当前页只要一个canvas节点，所以获取第一个canvas节点
    			let myCanvas1 = document.getElementsByTagName('canvas')[0]; 
    			//获取二维码所在父级dom节点
    			let element = document.getElementById("img-qrcode");
    			//实例化image对象
   			    let image = new Image();
   			    //将canvas格式二维码转为image/png格式
    			image.src = myCanvas1.toDataURL("image/png");
    			//插入所需节点
    			element.appendChild(image);
 	 		 };

链接打印机，执行打印事件，打印浏览器打印，打印所需内容

如有疑问请留言。