vue2使用Clodop插件打印表格，分页，每页显示页头页尾，自定义纸张大小

已于 2024-09-11 09:04:55 修改
阅读量2k 收藏 13
点赞数 18
文章标签： vue.js 前端 javascript
于 2024-06-07 10:14:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74079648/article/details/139518758
版权

一、前往lodop官网，下载插件，下载中心 - Lodop和C-Lodop官网主站 

这里下载的window64位的，将插件安装好，运行，会看到

引入项目

第一种、可以直接将script标签放入vue的head中，在项目运行时自动加载。

第二种、也可以将js文件下载至本地，通过import引入，前提是将CLODOP对象export出来。

通常使用第三种方法

这里使用第三种方法，即动态加载方法,根据当前系统的环境及文件状态加载

代码：stamp.js

var CreatedOKLodop7766=null

//====判断是否需要安装CLodop云打印服务器:====
export function needCLodop(){
  try{
    var ua=navigator.userAgent
    if (ua.match(/Windows\sPhone/i) !=null) return true
    if (ua.match(/iPhone|iPod/i) != null) return true
    if (ua.match(/Android/i) != null) return true
    if (ua.match(/Edge\D?\d+/i) != null) return true

    var verTrident=ua.match(/Trident\D?\d+/i)
    var verIE=ua.match(/MSIE\D?\d+/i)
    var verOPR=ua.match(/OPR\D?\d+/i)
    var verFF=ua.match(/Firefox\D?\d+/i)
    var x64=ua.match(/x64/i)
    if ((verTrident==null)&&(verIE==null)&&(x64!==null))
      return true
    else if (verFF !== null) {
      verFF = verFF[0].match(/\d+/)
      if ((verFF[0]>= 42)||(x64!==null)) return true
    } else if ( verOPR !== null) {
      verOPR = verOPR[0].match(/\d+/)
      if ( verOPR[0] >= 32 ) return true
    } else if ((verTrident==null)&&(verIE==null)) {
      var verChrome=ua.match(/Chrome\D?\d+/i)
      if ( verChrome !== null ) {
        verChrome = verChrome[0].match(/\d+/)
        if (verChrome[0]>=42) return true
      }
    }
    return false
  } catch(err) {return true}
}

//====页面引用CLodop云打印必须的JS文件：====
if (needCLodop()) {
  var head = document.head || document.getElementsByTagName("head")[0] || document.documentElement
  var oscript = document.createElement("script")
  oscript.src ="http://localhost:8000/CLodopfuncs.js?priority=1"
  head.insertBefore( oscript,head.firstChild )

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

//====获取LODOP对象的主过程：====
export function getLodop(oOBJECT,oEMBED){
  var strHtmInstall="<br><font color='#FF00FF'>打印控件未安装!点击这里<a href='install_lodop32.exe' target='_self'>执行安装</a>,安装后请刷新页面或重新进入。</font>"
  var strHtmUpdate="<br><font color='#FF00FF'>打印控件需要升级!点击这里<a href='install_lodop32.exe' target='_self'>执行升级</a>,升级后请重新进入。</font>"
  var strHtm64_Install="<br><font color='#FF00FF'>打印控件未安装!点击这里<a href='install_lodop64.exe' target='_self'>执行安装</a>,安装后请刷新页面或重新进入。</font>"
  var strHtm64_Update="<br><font color='#FF00FF'>打印控件需要升级!点击这里<a href='install_lodop64.exe' target='_self'>执行升级</a>,升级后请重新进入。</font>"
  var strHtmFireFox="<br><br><font color='#FF00FF'>（注意：如曾安装过Lodop旧版附件npActiveXPLugin,请在【工具】->【附加组件】->【扩展】中先卸它）</font>"
  var strHtmChrome="<br><br><font color='#FF00FF'>(如果此前正常，仅因浏览器升级或重安装而出问题，需重新执行以上安装）</font>"
  var strCLodopInstall="<br><font color='#FF00FF'>CLodop云打印服务(localhost本地)未安装启动!点击这里<a href='http://www.c-lodop.com/download/CLodop_Setup_for_Win32NT_https_3.008Extend.zip' target='_self'>执行安装</a>,安装后请刷新页面。</font>"
  var strCLodopUpdate="<br><font color='#FF00FF'>CLodop云打印服务需升级!点击这里<a href='CLodop_Setup_for_Win32NT.exe' target='_self'>执行升级</a>,升级后请刷新页面。</font>"
  var LODOP
  try{
    var isIE = (navigator.userAgent.indexOf('MSIE')>=0) || (navigator.userAgent.indexOf('Trident')>=0)
    if (needCLodop()) {
      try{ LODOP=getCLodop()} catch(err) {}
      if (!LODOP && document.readyState!=="complete") {
        alert("C-Lodop没准备好，请稍后再试！")
        return
      }
      if (!LODOP) {
        // if (isIE) document.write(strCLodopInstall) else
        // document.documentElement.innerHTML=strCLodopInstall+document.documentElement.innerHTML
        // return
      } else {
        if (CLODOP.CVERSION<"3.0.0.2") {
          if (isIE) document.write(strCLodopUpdate)
          else document.documentElement.innerHTML=strCLodopUpdate+document.documentElement.innerHTML
        }
        if (oEMBED && oEMBED.parentNode) oEMBED.parentNode.removeChild(oEMBED)
        if (oOBJECT && oOBJECT.parentNode) oOBJECT.parentNode.removeChild(oOBJECT)
      }
    } else {
      var is64IE  = isIE && (navigator.userAgent.indexOf('x64')>=0)
      //=====如果页面有Lodop就直接使用，没有则新建:==========
      if (oOBJECT!=undefined || oEMBED!=undefined) {
        if (isIE) LODOP=oOBJECT
        else LODOP=oEMBED
      } else if (CreatedOKLodop7766==null){
        LODOP=document.createElement("object")
        LODOP.setAttribute("width",0)
        LODOP.setAttribute("height",0)
        LODOP.setAttribute("style","position:absoluteleft:0pxtop:-100pxwidth:0pxheight:0px")
        if (isIE) LODOP.setAttribute("classid","clsid:2105C259-1E0C-4534-8141-A753534CB4CA")
        else LODOP.setAttribute("type","application/x-print-lodop")
        document.documentElement.appendChild(LODOP)
        CreatedOKLodop7766=LODOP
      } else LODOP=CreatedOKLodop7766
      //=====Lodop插件未安装时提示下载地址:==========
      if ((LODOP==null)||(typeof(LODOP.VERSION)=="undefined")) {
        if (navigator.userAgent.indexOf('Chrome')>=0)
          document.documentElement.innerHTML=strHtmChrome+document.documentElement.innerHTML
        if (navigator.userAgent.indexOf('Firefox')>=0)
          document.documentElement.innerHTML=strHtmFireFox+document.documentElement.innerHTML
        if (is64IE) document.write(strHtm64_Install)
        else if (isIE)   document.write(strHtmInstall)
        else document.documentElement.innerHTML=strHtmInstall+document.documentElement.innerHTML
        return LODOP
      }
    }
    if (LODOP.VERSION<"6.0") {
      if (!needCLodop()){
        if (is64IE) document.write(strHtm64_Update)
        else if (isIE) document.write(strHtmUpdate)
        else document.documentElement.innerHTML=strHtmUpdate+document.documentElement.innerHTML
      }
      return LODOP
    }
    //===如下空白位置适合调用统一功能(如注册语句、语言选择等):===
    //LODOP.SET_LICENSES("北京XXXXX公司","8xxxxxxxxxxxxx5","","")

    //===========================================================
    return LODOP
  } catch(err) {alert("请安装Lodop主程序！"); return null;}
}

在项目中引入：


<template>
  <div id="print_page">
    <div><el-button type="success" @click="print1()">打印送货单</el-button></div>
  </div>
</template>
                        
import { getLodop } from "./stamp";

export default {
  data () {
    return {
      orderDocuments: [], //打印表格内容  内容数据需要自己编写
      printerList:[] //将打印机存入printerList数组中
    }
   },
  methods:{
     print1(){
        this.LODOP = getLodop(); // 创建一个LODOP对象
      let counter = this.LODOP.GET_PRINTER_COUNT(); // 获取打印机个数
      for (let i = 0; i < counter; i++) {
        this.printerList.push({
          // 将打印机存入printerList数组中
          name: this.LODOP.GET_PRINTER_NAME(i),
          value: i,
        });
      }
      var html = "";
      for (let d = 0; d < this.orderDocuments.length; d++) {
        html += `
            <h1 style="text-align: center;">配送单</h1>
            <span format="ChineseNum"></span>
              <br/>
            <table role="table" style="margin-top:30px;padding:0px;width:100%;border-collapse:collapse;height:100px;font-size:25px;">
              <thead>
             <tr style="height:20px;">
              <th style="text-align:center;font-size:30px;" colspan="10" type="header" name="goods_count">配送单</th>
             </tr>
             <tr style="height:20px;">
              <th style="" colspan="10" type="header" name="goods_count"></th>
             </tr>
            <tr>
              <th style="text-align:left; padding:5px 1px;" colspan="2" type="header" name="deliveryId">配送单：${
                this.orderDocuments[d].deliveryId
              }</th>
              <th style="text-align:left; padding:5px 1px;  word-break:break-all; width:100px;" colspan="3" type="header" name="department">下单人：${
                this.orderDocuments[d].buyUser
              }</th>
              <th style="text-align:left; padding:5px 1px;" colspan="2" type="header" name="deliveryTime">配送时间：${
                this.orderDocuments[d].deliveryTime.slice(0, -9)
              }</th>
              <th style="text-align:left; padding:5px 1px; word-break:break-all;" colspan="3" type="header" name="orderAmount">订单总额：${
                this.orderDocuments[d].orderAmount
              }</th>
            </tr>
             <tr style=" padding:5px 0;">
                <th style="border: 1px solid black; padding:5px 0;" rowspan="1" type="header" name="goods_name">序号</th>
                <th style="border: 1px solid black;" rowspan="1" type="header" name="goods_spec">商品名称</th>
                <th style="border: 1px solid black" rowspan="1" type="header" name="goods_price">单位</th>
                <th style="border: 1px solid black" rowspan="1" type="header" name="goods_count">规格</th>
                <th style="border: 1px solid black; width:120px;" rowspan="1" type="header" name="goods_money">基准价</th>
                <th style="border: 1px solid black; width:120px;" rowspan="1" type="header" name="goods_money">结算价</th>
                <th style="border: 1px solid black; width:100px;" rowspan="1" type="header" name="goods_money">数量</th>
                <th style="border: 1px solid black; width:100px;" rowspan="1" type="header" name="goods_money">小计</th>
              </tr>
              </thead>
              <tbody class="chris-table-body">
              ${this.orderDocuments[d].goodsList
                .map((i, index) => {
                  return `<tr class="chris-table-row first last" role="row">
                    <td style="border: 1px solid black;text-align:center; padding:5px 0; word-break:break-all; width:100px;" type="body" name="goods_name">${
                      index + 1
                    }</td>
                    <td style="border: 1px solid black;text-align:center; word-break:break-all; width:150px;" type="body" name="goods_spec">${
                      i.goodsName
                    }</td>
                    <td style="border: 1px solid black;text-align:center; word-break:break-all; width:100px;" type="body" name="goods_price">${
                      i.goodsMeasure
                    }</td>
                    <td style="border: 1px solid black;text-align:center; word-break:break-all;width:160px;" type="body" name="goods_count">${
                      i.goodsStandard
                    }</td>
                    <td style="border: 1px solid black;text-align:right;padding-right:1px;" type="body" name="goods_money">¥${
                      i.benchmarkPrice
                    }</td>
                    <td style="border: 1px solid black;text-align:right;padding-right:1px;" type="body" name="goods_name">¥${
                      i.purchasePrice
                    }</td>
                    <td style="border: 1px solid black;text-align:right;padding-right:1px;" type="body" name="goods_spec">${
                      i.mount
                    }</td>
                    <td style="border: 1px solid black;text-align:right;padding-right:1px;" type="body" name="goods_price">¥${
                      i.amount
                    }</td>
                </tr>
                ${
                  i.remark != null
                    ? `<tr class="chris-table-row first last"><td type="body" style="border:1px solid black; word-break:break-all; width:100%;" name="goods_name" colspan="10">${i.remark}</td></tr>`
                    : ""
                }
                `;
                })
                .join(" ")}
                ${ this.orderDocuments[d].remark != null ? `<tr class="chris-table-row first last" style="border:1px solid black;"><td type="body" style="border:1px solid black; word-break:break-all; width:100%;" name="goods_name" colspan="10">${this.orderDocuments[d].remark}</td></tr>` : null}
              </tbody>
              <tfoot>
               <tr style="height:20px;">
              <th style="" colspan="10 type="header" name="goods_count"></th>
             </tr>
              <tr>
                <th style="text-align:left;" rowspan="1" type="header" colspan="3" 
 name="goods_name">配送人:</th>
                <th style="text-align:left;" rowspan="1" type="header" name="goods_spec" colspan="3">签收人:</th>
                <th style="text-align:left;" rowspan="1" type="header" name="goods_price" colspan="3">监管人:</th>
              </tr>
              </tfoot>
            </table>
            <br/>
          `;
      }

      var body = "<body style='text-align:center;'>" + html + "</body>";
      const _this = this;
      _this.LODOP.PRINT_INIT("打印发货单"); //打印初始化
      _this.LODOP.SET_PRINTER_INDEX(_this.printer); //选择的打印机类型（注意这里是打印机下标，0开始的）
      _this.LODOP.SET_PRINT_STYLE("FontSize", 18); //设置对象风格
      // this.LODOP.ADD_PRINT_TEXT(50, 521, 130, 39, this.description) //增加纯文本项
      _this.LODOP.SET_PRINT_PAGESIZE(1, 2410, 2800, ""); //设定纸张大小
      _this.LODOP.SET_PRINT_MODE("PRINT_PAGE_PERCENT", "50%"); //设置缩放
      _this.LODOP.SET_PRINT_STYLEA(0, "TextNeatRow", true);
      _this.LODOP.SET_PREVIEW_WINDOW(2, 2, 0, 0, 0, ""); //设置窗口
      _this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 60); //设置窗口
      _this.LODOP.ADD_PRINT_TABLE(79, 20, 1500, "78%", body); //设置表格挂载
      _this.LODOP.SET_PRINT_STYLEA(0, "Horient", 2);
      _this.LODOP.ADD_PRINT_HTM(
        "93%",
        "90%",
        "100mm",
        "100mm",
        "<font color='#000' style='font-size:25px;'><span tdata='pageNo'>##</span>/ <span tdata='pageCount'>##</span></font>"  //分页
      );
      _this.LODOP.SET_PRINT_STYLEA(0, "ItemType", 1);
      _this.LODOP.PREVIEW(); // 设置预览（如果使用预览，每次打印前会弹出预览窗口，根据需要决定是否使用）
     }
   }
}

 点击打印按钮，会调用打印机 然后会出来预览打印 出现这样的一个表格

 为了防止真正打印，这里将代码改为了打印预览，实际每调用一次会打印一次，也可以边请求后台数据边打，只要有纸，可以一直打，我最多打了二百多张纸，有问题的可以联系

getaxiosluo
关注
使用Vue.js和C-Lodop实现预览和打印PDF的前端开发
CflfEditor的博客
09-22 1450
现在，你可以运行你的Vue.js项目，并在浏览器中查看结果。你将看到一个包含标题为"使用Vue.js和C-Lodop实现预览和打印PDF的前端开发"的页面。当你点击打印按钮时，C-Lodop库将调用打印功能，将预览的PDF文件打印出来。通过这种方法，你可以方便地在Vue.js项目中实现对PDF文件的预览和打印功能。需要注意的是，为了使上述代码能够正常工作，你需要确保C-Lodop库的文件路径正确，并且在运行项目之前将其正确地复制到项目中。标签放在该组件的模板中，我们实现了PDF的预览和打印功能。
【分页表格】Vue2 + Element UI实现自定义的分页表格组件（自定义Vue组件）
✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过 CSDN 记录学习心得和笔记内容。
06-11 1592
自定义分页表格组件，是基于vue2.6.14、前端组件是element-ui、jQuery3.2.1的基础之上实现的，其中由于使用了slot具名插槽，slot具名插槽是vue2.6.x版本之后才支持的功能，所以需要保证vue.js的版本在2.6.x之上，这篇文章使用的【vue.js版本是vue2.6.14】。到此，自定义分页表格就完成啦。
vue+lodop单独打印和全部打印以及批量打印 打印实现表格格式
m0_56892470的博客
10-24 1290
1.下载lodop插件 下载后得到LodopFuncs.js 放到工具utils（任意文件夹）文件夹。2.下载斑马打印机驱动（找厂商提供或者官网找到对应型号下载即可）下载好之后选择安装。情况：斑马打印机 lodop第三方打印插件 vue3 表格形式包含二维码。4.效果预览 标签大小和适配自己调整为标签纸大小适应即可。3.准备就绪 代码如下。
Vue 中云打印C-Lodop简单应用
_夜渐凉
12-18 6737
C-Lodop是一个免费云服务程序，可接受来自其它平台浏览器的JavaScrip语句实现远程打印。 目前是各家软件公司进行手机或微信远程打印的流行解决方案。 和其它“云打印”概念相比，C-Lodop主要是能编程控制，程序员可据此帮助客户部署自己的云打印主机。 官网：http://www.c-lodop.com/download.html 左边有很多demo，一个LoddpFuncs.js文...
Vue2+Lodop插件实现在线打印功能（提供Gitee源码）
最新发布
黄团团的个人博客
03-27 659
官方的拿过来不能直接使用，否则会报如下错误：checkOrTryHttp is not defined ReferenceError: checkOrTryHttp is not defined at <anonymous>，安装LodopFuncs.js和CLodop_Setup_for_Win32NT，就可以实现在线打印了。
vue+lodop实现web端打印标签功能
chensi_07的博客
05-09 1745
Lodop免费WEB打印控件官网,提1 把官方提供的LodopFuncs.js文件保存到某个目录下， 如myProject\src\assets\LodopFuncs.js。3 在打印事件处理函数所在文件里 import 该 module在打印事件函数中调用getLodop获取LODOP对象变量，按照官方教程书写自己的打印函数，通过 print、preview、print_design进行输出。Lodop打印控件、WEB打印、C-Lodop、CLodop、lodop控件、云打印、手机打印、免费、AO打印。
vue 自定义打印CLodop
sky_sunshine_x的博客
12-07 1313
1.新建一个js文件，引入LoddpFuncs.js,官网也有，如下： var CreatedOKLodop7766=null; //====判断是否需要安装CLodop云打印服务器:==== export function needCLodop(){ try{ var ua=navigator.userAgent; if (ua.match(/Win...
详解如何在vue项目中使用lodop打印插件
10-17
主要介绍了详解如何在vue项目中使用lodop打印插件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
详解如何在vue项目中使用lodop打印插件,以及样式打印预览缺失的问题（底部）
chelflan's blog
03-28 1万+
C-Lodop是一个免费云服务程序，可接受来自其它平台浏览器的JavaScrip语句实现远程打印。 目前是各家软件公司进行手机或微信远程打印的流行解决方案。 和其它“云打印”概念相比，C-Lodop主要是能编程控制，程序员可据此帮助客户部署自己的云打印主机。 官网：http://www.c-lodop.com/download.html 左边有很多demo，一个LoddpFuncs.js文件（...
vue使用Clodop插件打印
帆酱的博客
07-28 7181
一、前往lodop官网，下载插件，http://www.lodop.net/index.html这里下载的window64位的，将插件安装好，运行，会看到点击‘去了解C-Lodop>>’,会跳转至使用说明页面，在这个页面里，可以打印测试页面，以验证插件正常连接打印机。
[亲测]vue使用C-lodop打印总结
热门推荐
Armymans的博客
08-22 2万+
按照我步骤走不迷路 1.先来到官方网站 下图中的1点击下载，下载后安装，傻瓜式安装方式就不再阐述了 下图中的2点击下载，下载后大概的看一下(内容不是很重要但是还是需要看的) 2.找到你安装好的C-lodop，将其启动 如下图 3.访问本地的教程，这里默认你的8000端口之前没有被占用，即使被占用那就访问18000端口，若仔细看文档的都知道，访问成功如下图仔细琢磨以下内容,他给的代码是js的，不...
vue2 Pagination 分页组件
weixin_43845137的博客
03-28 1017
【代码】vue2 Pagination 分页组件。
Vue2.0分页组件
03-16
Vue2.0分页组件
Vue使用lodop实现打印小结
10-16
主要介绍了Vue使用lodop打印小结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
超好用的Vue打印插件，可支持分页
01-20
Vue打印插件
Vue2 - 最新详细实现页面区域打印预览和导出PDF功能，网页指定局部区域参与打印与下载pdf文档（解决预览导出不全、部分内容显示不完整、复杂表格分页/图表复杂有滚动条、打印导出丢失、防止内容截断）
王二红
12-21 6008
vue2，区域打印，前端页面局部转pdf，页面局部打印预览，vue如何实现指定区域打印及导出pdf，只打印一小部分并非全部，指定区域范围内导出生成PDF文件，打印div指定区域内容并保留css样式，可以预览打印机和下载pdf文件，打印指定DOM元素内的内容，vue网页局部打印不全，打印插件Print.js，vuejspdfhtml2canvas，自定义选中页面内容导出为pdf文件，打印功能内容显示不完整，内容显示不全，表格打印不全的问题，空白页，指定div页面转为pdf文件，解决页面样式不出现或者tab
vue打印功能-每页都有表头和一页打印20行表格-$print组件
weixin_44568532的博客
04-23 5370
打印功能vue 插件$print 1. 使用div进行布局-table表格调试会比较困难/ html部分 至于安装$print组件可以到百度上找、分享一下打印的想法。我使用的时候组件已经安装好，所有哈哈哈自行百度 <el-button @click="handlePrint" type="info" size="mini" ...
Vue2 - ElementUI表格组件el-table分页勾选数据并导出到Excel电子表格，Table表格跨页选中某行后一键将指定键名数据导出为xls文件，分页多选导出excel表格（纯前端方案）
王二红
09-13 3828
vue2，elementUI，Table表格，el-table组件，导出表格，excel，xls，可导出分页数据，表格跨页勾选后导出xlsx，Vue2表格中导出Excel，如何先勾选表格复选框然后导出，表格下载为xls文档，Vue2实现Excel表格导出，将表格选中的数据导出为excel，分页的表格如何导出来，表格勾选行后再导出xls，选中特定行导出，vue+element-ui项目中如何勾选表格数据导出到excel表格，表格数据选中与全选导出，导出的是当前页选中的数据，将分页的表格导出下载，前端导出，不
lodop+vue实现无感打印 （标签机打印标签）
he3236220的博客
12-29 2028
vue实现静默打印标签功能
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值