vue 通过 Lodop/C-Lodop 打印 pdf、小票、条码、html内容

一. Lodop 简介

Lodop/C-Lodop 是一款 web 端打印控件，需在官网购买序列号安装使用。可打印 pdf 文档、条码、表格、html 等

Lodop官网: https://www.lodop.net/LodopDemo.html

二. Lodop 控件的使用

Lodop/C-Lodop 控件无需通过 npm 安装依赖，只需从官网下载安装包（例：CLodop_Setup_for_Win32NT.exe），并购买序列号（也有免费试用版本，不过功能有限），我这里用的是 CLodop

1. 第一步，添加 LodopFuncs.js 文件

// LodopFuncs.js


import { MessageBox } from 'element-ui'

// ====页面动态加载C-Lodop云打印必须的文件CLodopfuncs.js====

var head = document.head || document.getElementsByTagName('head')[0] || document.documentElement
var oscript = document.createElement('script')

// 让本机的浏览器打印(更优先一点)：
oscript = document.createElement('script')
oscript.src = 'http://localhost:8000/CLodopfuncs.js?priority=2'
head.insertBefore(oscript, head.firstChild)

// 加载双端口(8000和18000）避免其中某个端口被占用：
oscript = document.createElement('script')
oscript.src = 'http://localhost:18000/CLodopfuncs.js?priority=1'
head.insertBefore(oscript, head.firstChild)

// 下载loadLodop

// eslint-disable-next-line no-unused-vars
function loadLodop() {
  MessageBox.alert('C-Lodop尚未安装！')
  //  window.open('../../public/static/CLodop_Setup_for_Win32NT.exe')
}

// ====获取LODOP对象的主过程：====

var num = 0
function getLodop() {
  var LODOP
  try {
    // eslint-disable-next-line no-undef
    LODOP = getCLodop()
    console.log('LODOP', LODOP)
    if (!LODOP && document.readyState !== 'complete') {
      MessageBox.alert('C-Lodop打印控件还没准备好，请稍后再试！')
      return
    }
    LODOP.SET_LICENSES('这里填公司名称', '购买的序列号', '繁体公司名称', '购买的对应序列号')
    LODOP.SET_LICENSES('THIRD LICENSE', '', '英文名称', '序列号')
    num = 0
    // 用于存储是否有可用的打印控件，按需使用
    localStorage.removeItem('noPrintLoop')
    return LODOP
  } catch (err) {
    if (num < 3) {
      num++
      getLodop()
    } else {
      num = 0
      // 用于存储是否有可用的打印控件，按需使用
      localStorage.setItem('noPrintLoop', 'true')
    }
    // MessageBox({
    //   title: '温馨提示',
    //   type: 'warning',
    //   showCancelButton: true,
    //   message: '您还未安装打印控件，点击确定下载打印控件，安装成功后刷新页面即可进行打印',
    //   callback: res => {
    //     if (res === 'confirm') {
    //       loadLodop()
    //     }
    //   }
    // })
  }
}

export { getLodop }

2. 第二步，在需要打印的页面中引入 LodopFuncs.js 并使用

I. 打印小票（自定义内容+条码）

// 引入 LodopFuncs.js 中的 getLodop 方法
import { getLodop } from '@/utils/LodopFuncs.js'

data() {
	return {
		LODOP: null,
	}
},
mounted() {
	// 初始化 LODOP
	if (!this.LODOP) {
       setTimeout(() => {
         this.LODOP = getLodop()
       }, 1000)
    }
},
methods: {
	// 打印小票（包含条形码）
	toPrint() {
	
		// 判断是否有可用打印插件
	    const noPrintLoop = localStorage.getItem('noPrintLoop') === 'true'
	    if (noPrintLoop) {
	      this.noPrintDialogVisible = true
	      return
	    }
	    
		// 初始化语句
		this.LODOP.PRINT_INIT('打印任务名，比如住院号')
		// 初始化 
		/*
			参数：
			‌intXOffset‌：整体偏移值，表示在打印页面上的水平偏移量。
			‌intYOffset‌：整体偏移值，表示在打印页面上的垂直偏移量。
			‌intWidth‌：打印设计可视化编辑区域的宽度。（并非纸张的宽高）
			‌intHeight‌：打印设计可视化编辑区域的高度。（并非纸张的宽高）
			‌strPrintTaskName‌：打印任务名称，用于标识不同的打印任务。
		*/
		this.LODOP.PRINT_INITA(0, 0, 337, 302, '打印任务名')
		
		// 添加打印的第一行文字内容
		// 参数分别为：距离打印区域顶部的距离，距离打印区域左侧的距离，文字的整体宽度，文字的高度，文字的内容
        this.LODOP.ADD_PRINT_TEXT(58, 66, 280, 31, '第一行文字的内容')
        
        // 设置打印的文字的样式
        /*
        	参数：
        	‌varItemNameID‌：内容对象的序号，用于指定要设置样式的打印对象。如果设置为0，表示当前页的所有打印对象。
			‌strStyleName‌：样式名称，如“FontSize”、“FontName”等。
			‌varStyleValue‌：样式值，根据不同的样式名称，其值也不同。例如，字体大小、字体名称等。
		*/
		// 设置第一个打印对象的字号为 40
        this.LODOP.SET_PRINT_STYLEA(1, 'FontSize', 40)
        
		// 添加打印的第二行文字内容
        this.LODOP.ADD_PRINT_TEXT(130, 66, 280, 31, '第二行文字的内容')
        
        // 设置所有打印对象的字体为 Arial
        this.LODOP.SET_PRINT_STYLEA(0, 'FontName', 'Arial')
        // 设置打印的第二个对象的字号为30
        this.LODOP.SET_PRINT_STYLEA(2, 'FontSize', 30)
		
		// 添加打印条码
		/*
			top： 距离打印区域顶部的距离
			left： 距离打印区域左侧的距离
			Width： 条码的总宽度，计量单位px
			Height： 条码的总高度（一维条码时包括文字高度）
			BarCodeType： 条码的类型（规制）名称
			BarCodeValue： 条码值
		*/
        this.LODOP.ADD_PRINT_BARCODE(210, 68, 238, 60, '128A', '123456-1')

        this.LODOP.On_Return = (TaskID, Value) => {
          console.log('on_return', Value)
        }
        
        // 打印
        this.LODOP.PRINT()
        
        // 预览（弹出打印预览）
        // this.LODOP.PREVIEW()
	}
}

打印的小票效果图：

关于条码打印：

支持打印多种一维码和二维码，类型详见：https://www.lodop.net/demolist/PrintSample11.html

其他条码样式相关的设置：

//设置上面这个条码下方的文字字体大小
LODOP.SET_PRINT_STYLEA(0,'FontSize',18);

//设置当前条码以及条码下方字体的颜色
LODOP.SET_PRINT_STYLEA(0,'Color','#FF0000');

//设置旋转角度
LODOP.SET_PRINT_STYLEA(0,'Angle',180);

//设置是否显示下方的文字
LODOP.SET_PRINT_STYLEA(0,'ShowBarText',0);

//设置条码下方的文字相对于条码本身居中
LODOP.SET_PRINT_STYLEA(0,'AlignJustify',2);

//设置条码下方的文字相对于条码本身居左
LODOP.SET_PRINT_STYLEA(0,'AlignJustify',1);

//设置条码下方的文字相对于条码本身居右
LODOP.SET_PRINT_STYLEA(0,'AlignJustify',3);

II. 打印 pdf

参考文档：http://www.lodop.net.cn/faq/pp36.html

methods: {
	// 打印 pdf
	toPrintPdf() {
		// 初始化
		this.LODOP.PRINT_INIT('文书id')
		
		// 设置打印的 pdf
		// 参数分别是：横向偏移量，纵向偏移量，打印的宽度，打印的高度，pdf 的 url
        this.LODOP.ADD_PRINT_PDF(0, 0, '100%', '100%', "http://localhost:8000/CLodopDemos/PDFDemo.pdf")
        // 打印纸张设置
        /*
        	参数：
			intOrient：打印方向及纸张类型，值为1表示纵向打印，固定纸张；值为2表示横向打印，固定纸张；值为3表示纵向打印，宽度固定，高度按打印内容的高度自适应；0（或其他值）表示打印方向由操作者自行选择或按打印机缺省设置。
			intPageWidth：纸张宽，单位为0.1mm，例如45表示4.5mm。
			intPageHeight：纸张高，单位为0.1mm。当高度自适应时，该参数是纸张底边的空白高。
			strPageName：纸张名，当intPageWidth等于0时本参数才有效，可以选择如Letter、A4等预定义的纸张类型‌1。
		*/
		
		//纸张设置：纵向打印，宽度固定，高度自适应
        this.LODOP.SET_PRINT_PAGESIZE(3, 0, 0, '')
        
        //参数值含义：0-缩小大页面 、1-实际大小、2-适合纸张
        this.LODOP.SET_PRINT_STYLEA(0, 'PDFScalMode', 2)
        
        this.LODOP.On_Return = (TaskID, Value) => {
          console.log('打印')
          resolve(Value)
        }
        
        // 执行打印
        this.LODOP.PRINT()
	}
}

III. 打印html内容

methods: {
	toPrintHtml() {
		  // 初始化
		  this.LODOP.PRINT_INIT('打印任务名称')
		  
		  //  这里打印的是一个 table 表格，表格中包含文字和图片，可以通过 style 设置样式
	      const value = `
		      <table border="0" width="100%" height="100%" style="border-collapse:collapse;border:none">
		        <tr>
		          <td width="100%" height="100%">
		            <p align="center" style="margin-top:20%;font-size:10px;font-family:'微软雅黑'">
		              ${info.patientName ? `<p align='center'><font face='微软雅黑' size='3'>患者姓名: </font>
		                  <font face='微软雅黑' style='display:inline-block;width:180px;border-bottom:1px solid #000;padding-left:4px;text-align:left;'>${info.patientName}</font>
		                </p>` : ''}
		              ${info.dischargedDatetime ? `<p align="center"><font face="微软雅黑" size="3">出院时间: </font>
		                <font face="微软雅黑" style="display:inline-block;width:180px;border-bottom:1px solid #000;padding-left:4px;text-align:left;">${info.dischargedDatetime}</font>
		              </p>` : ''}
		              ${info.dischargedDepartment ? `<p align="center"><font face="微软雅黑" size="3">出院科室: </font>
		                <font face="微软雅黑" style="display:inline-block;width:180px;border-bottom:1px solid #000;padding-left:4px;text-align:left;">${info.dischargedDepartment}</font>
		              </p>` : ''}
		              <img src="${info.imgFile}" width="80%" style="margin-top:10px;margin-left:10%;" />
		              <p>
		            </p>
		          </td>
		        </tr>
		      </table>
	      `
	      
	      // 打印 HTML 内容
	      this.LODOP.ADD_PRINT_HTM(0, 0, '100%', '100%', value)
	      
	      // 设置打印模式：高度自适应
	      this.LODOP.SET_PRINT_MODE('PRINT_PAGE_PERCENT', 'Auto-Height')
	      
	      //纸张设置：自定义模式
	      this.LODOP.SET_PRINT_PAGESIZE(0, 0, 0, '')
	      
	      this.LODOP.On_Return = (TaskID, Value) => {
	        console.log('打印', Value)
	      }
	      // 打印
	      this.LODOP.PRINT()
	      
	      // 预览
	      // this.LODOP.PREVIEW()
		}
}