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