vue2控制打印机打印(三)

最新推荐文章于 2025-10-25 10:38:48 发布

原创

最新推荐文章于 2025-10-25 10:38:48 发布 · 1k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

本文介绍了如何在项目中使用Lodop打印控件进行操作，包括下载JS文件、设置打印机、纸张大小和添加HTML内容，以及注意事项，如避免将LODOP挂载到data对象以解决事件错误。

本篇文章是使用WEB打印控件Lodop进行操作的

该插件不需要npm install下载任何依赖，但是需要购买这个软件，并把项目部署到购买软件时填写的域名下，不然打印页的左右下角会有"本页由【试用版打印控件Lodop6.5.7.9】输出"的水印

废话不多说，上代码

首先到lodop官网下载相关的js文件和技术文档

lodop官网

第一个打包文件里有个LodopFuncs.js文件，这个需要放入到项目里面引入的。本人放在了utils文件里。

import { getLodop } from "@/utils/LodopFuncs"; //导入模块

methods代码

goPrient() {
  var LODOP = getLodop();
  LODOP.PRINT_INIT("打印");//命名打印机任务
  LODOP.SET_PRINTER_INDEX('打印机') //规定选择的打印机
  LODOP.SET_PRINT_PAGESIZE(2, 2100,2970,'')  //规定打印纸的大小
    //其中SET_PRINT_PAGESIZE的第一个参数是1---纵(正)向打印，固