其他分享
首页 > 其他分享> > vue实现lodop打印功能--无感打印

vue实现lodop打印功能--无感打印

作者:互联网

vue实现lodop打印功能

 

为什么使用lodop
公司开发一个功能需要直接打印文件,并且可以指定打印机,lodop可以满足需求

lodop是什么(摘自官网)
有人说她是Web打印控件,因为她能打印、在浏览器中以插件的形式出现,用简单一行语句就把整个网页打印出来;
有人说她是打印编程接口,因为她介于浏览器和打印设备之间,是个通道和桥梁,几乎能想到的打印控制事项都能做到;
有人说她是JavaScript的扩展,因为她所有功能就那么几个语句,和JS语法一样,一看就明白个究竟;
有人说她是报表打印工具,因为那个add_print_table语句把报表统计的那点事弄了个明明白白;
有人说她是条码打印工具,因为用了她再也不用后台生成条码图片了,前端一行指令就动态输出清晰准确的条码,一维二维都行;
有人说她是图表打印工具,因为用她能输出几乎能想象的任何图表,虽然没那么豪华,但什么饼图、折线图、柱图甚至复合图等等都不在话下;
有人说她是个小玩意,因为她体积太小了,才2M多,她所包含的其中任何一个对照工具都是她的好几倍(例如条码打印控件、图表控件等);
有人说她是套打教案,因为以Lodop+JS实现套打这种模式,在网上已被吵吵为教科书般的解决方案;
有人说她是Web打印控件的“终结者”,因为接触“她”后再不想别的“她”;
有人说她就是一个Web编程小工具,因为有了她,在BS下的打印终于像cs下那种随意而高效了;
但我们说,她是全国1000多家软件公司的智慧结晶,诞生10年了,几乎每个功能细节都蕴藏着无数开发者的期待和汗水;
她就是Lodop(读音“劳道谱”),没有别的名称,她是web开发的必选伴侣;
现在,她又添了个小兄弟,名叫C-Lodop(可编程的云打印),未来将由他开创…
如何在项目中使用
1、官网下载 http://www.lodop.net/download.html

2.解压安装运行
点击CLodop_Setup_for_Win32NT.exe进行安装

 

 

 

 

 

 

 

 


3.vue代码实现(具体操作见官网:http://www.lodop.net/faq/pp35.html)

3.1把官方提供的LodopFuncs.js文件保存到项目某个目录下

 

 

 


  
3.2 修改LodopFuncs.js文件, 在文件最底部添加一行代码


export { getLodop }; //导出getLodop
把该文件中的getLodop函数 export 出来。

3.3在打印事件处理函数所在文件里 import 该 module


在打印事件函数中调用getLodop获取LODOP对象变量,
按照官方教程书写自己的打印函数,通过 PRINT、PREVIEW、PRINT_DESIGN进行输出。
如下代码所示 myProject\src\components\Print.vue

 

 

 

<template>
  <div class="Print">
    <button class="print-btn" v-on:click="btnClickPrint">
      <span>{{msg}}</span>
    </button>
  </div>
</template>
<script>
  import { getLodop } from '../assets/LodopFuncs' //导入模块
  export default {
  name: 'Print',
  data () {
    return {
      msg: '点击按钮打印'
    }
  },
  methods: {
    btnClickPrint: function () {
      let LODOP = getLodop()//调用getLodop获取LODOP对象
      LODOP.PRINT_INIT("")
      LODOP.ADD_PRINT_TEXT(50, 231, 260, 39, "打印内容")
      LODOP.PREVIEW()
      //LODOP.PRINT()
  }
}
}
</script>

27
遇到的一些问题(欢迎补充讨论)


1、lodop热敏打印机小票打印,
LODOP.PREVIEW();先预览,再点击打印,切纸正常,会在文档结束自动切纸
LODOP.PRINT();直接打印就不会在文档结束切纸,并且末尾会有小字样水印

 

 

 

 

 

 


原因:不经过预览的“直接打印”功能需要注册
如下功能需要注册使用权:
1、 (不经过预览的)“直接打印”功能;
2、 “导出数据到Excel文件” 功能;
不经注册使用以上功能时,打印输出结果的左下角会出现“本页由【试用版打印控件LodopX.0】输出”小字样水印。

搜索

复制

标签:控件,vue,getLodop,打印,LODOP,PRINT,无感,lodop
来源: https://www.cnblogs.com/songfengyang/p/16286893.html