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://i-blog.csdnimg.cn/direct/23153166a0cf4a2cb3ade0e12f61afbf.png

关于条码打印：

支持打印多种一维码和二维码，类型详见：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()
		}
}复制

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

一. Lodop 简介

二. Lodop 控件的使用

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

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

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

II. 打印 pdf

III. 打印html内容

在线骑行|基于SpringBoot的在线骑行网站设计与实现(源码数据库文档)

jQuery get 方法内操控vue变量（异步ajax请求方法中操控双向绑定的响应式变量）实现异步请求函数内完成变量的双向响应式绑定

echarts 折线图上只显示某一个点值

月工作总结

2022高职国家技能大赛（大数据竞赛）-模块E：数据可视化-任务书4

nodejs vue校园二手交易系统 73kl6

Vue3 UI库与组件库（如Vuetify、Element Plus）

彻底搞懂Vue中的Mixin混入（保姆级教程）

vue封装el-cascader级联选择器组件单选、多选、搜索、数据回显问题

Vue 前端开发中的路由知识：从入门到精通

前端哥

C/C | 每日一练 (2)

Linux性能监控工具汇总

在线骑行|基于SpringBoot的在线骑行网站设计与实现(源码数据库文档)

DeepSeek 提示词：定义、作用、分类与设计原则

【Linux系统】—— 冯诺依曼体系结构与操作系统初理解

Python常见面试题的详解16

Docker实战-使用docker compose搭建博客

QQ登录测试用例报告

乐享数科：供应链金融—三个不同阶段的融资模式

【Deepseek】Linux 本地部署 Deepseek

1
【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001

2
jQuery.flowchart 项目常见问题解决方案

2025-02-24 13:02:021000

3
CSS常用属性（文本属性）

2024-11-04 09:11:111000

4
TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000

5
CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000

6
vue使用datav echarts

2024-09-06 00:09:381000

7
使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000

8
使用CDN提高jQuery加载速度

2024-08-24 23:08:211000

9
小兔鲜儿网页首页制作黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000

10
《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000

	// 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 }

	// 引入 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()
	}
	}

	//设置上面这个条码下方的文字字体大小
	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);

	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()
	}
	}

	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()
	}
	}

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

一. Lodop 简介

二. Lodop 控件的使用

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

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

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

II. 打印 pdf

III. 打印html内容

微信扫一扫：分享