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

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

时间：2024-06-07 13:58:52浏览次数：7  
标签：插件 document return 自定义 头页 LODOP var null match

一、前往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(); // 设置预览（如果使用预览，每次打印前会弹出预览窗口，根据需要决定是否使用）
     }
   }
}

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

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

标签：插件,document,return,自定义,头页,LODOP,var,null,match
From： https://blog.csdn.net/m0_74079648/article/details/139518758

相关文章

  • Android 13.0 hal层关于新增自定义hal模块功能实现
    1.前言在13.0的系统rom定制化开发中，在对hal模块进行开发时，需要通过添加自定义的hal模块来实现某些功能时，就需要添加hal模块的相关功能，接下来就来实现一个案例来供参考接下来就来具体实现这个功能2.hal层关于新增自定义hal模块功能实现的核心类hardware\interfaces\3.ha......
  • Vue简单自定义Canvas验证码组件。
    在您的Vue项目中，是否曾遇到过需要增加验证码来增强账户安全性的情况？这个Vue通用Canvas验证码组件！采用Canvas，实现了高度自定义和灵活的验证码生成方式，让您的网站或应用轻松应对各类验证码需求。在线演示地址：原文可查看演示一，创建一个Captcha验证码组件。<template><can......
  • ComfyUI 完全入门：必备插件
    ComfyUI 是一个基于StableDiffusion的AI绘画创作工具，最近发展势头特别迅猛，但是ComfyUI的上手门槛有点高，用户需要对StableDiffusion以及各种数字技术的原理有一定的了解才行。这个系列将会介绍ComfyUI的一些基础概念和使用方法，让大家更快的掌握ComfyUI的使用技巧，创......
  • 免费实用！16款 Stable Diffusion 插件全面测评
    一、前方高能1.prompt-all-in-one提示词翻译补全(自动翻译)推荐指数：☆☆☆☆☆易上手程度：☆☆☆☆☆使用频率：☆☆☆☆☆能做什么：prompt-all-in-one提示词翻译补全可以帮助英文不好的用户，快速弥补英文短板。其中包含，中文输入自动转英文、自动保存使用描述词、描述词历史......
  • Kibana的Dev Tools中创建自定义分词器
    1.登录Kibana并打开DevTools2.编写并发送PUT请求来创建索引映射和分词器在DevTools的编辑器中，编写一个PUT请求来创建索引，并在其映射（mapping）中定义你的自定义分词器。以下是一个示例请求#创建了一个名为my_index的索引，并在其设置（settings）中定义了一个名为my_custom_analyz......
  • 自定义监控项
    采集TCP连接状态（实战项目）精确分析tcp连接状态，可以精准得知服务器的链接情况，确保web服务器的健康1.命令获取tcp的状态[root@web-7~]##-a显示所有socket、-t显示tcp协议连接-n只显示ip[root@web-7~]#netstat-antActiveInternetconnections(serversandestablis......
  • 插件:vite-plugin-electron
    源文档地址:vite-plugin-electron安装npmi-Dvite-plugin-electron将vite-plugin-electron添加到vite.config.ts的插件部分importelectronfrom'vite-plugin-electron/simple'exportdefault{plugins:[electron({main:{//`build.lib.ent......
  • C# 使用Newtonsoft.Json的JsonProperty设置返回的Json数据列名/C# 通过实体类序列化生
    原文链接：https://blog.csdn.net/weixin_44917045/article/details/103236167         https://blog.csdn.net/bazinga_y/article/details/134416680在写分页的时候，返回Json数据给前台的时候，数据不能出来，原因就是Json数据的列名是大写的，而页面需要的是小写的。......
  • Revit二次开发-使用Advanced Installer打包插件安装包
    插件开发属于客户端开发，当我们交付产品给客户的时候，肯定用安装包的形式交付是最佳方案。所以我摸索了一下怎么用AdvancedInstaller来打包插件安装包。AdvancedInstaller简介AdvancedInstaller是一款功能强大且用户友好的Windows安装包制作工具，专门用于创建安装包（MSI、EX......
  • 金蝶云星空在原有简单账表的基础上加上自定义字段
    以采购订单执行明细表为例，在原有基础上加上下面的两个字段产业链备注：F_TXBE_CYL_Notes产业链物料明细ID：F_TXBE_CYL_MateriaID1、首先打开采购订单执行明细表过滤界面找到显示隐藏列中的字段合集 新增字段：产业链备注：F_TXBE_CYL_Notes产业链物料明细ID：F_TXBE_CYL_MateriaID2......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99