Vue使用lodop实现打印小结


Posted in Javascript onJuly 06, 2019

一. Lodop与C-Lodop的区别

Lodop打印控件是浏览器插件,与浏览器紧密结合来实现本地打印,是一种内嵌到浏览器里交互方式。(适用浏览器:ie系列、火狐51版及历史版本、谷歌44版及历史版本。(新版火狐及谷歌不再支持np插件,也不能使用lodop))

C-Lodop打印服务是以提供服务方式解决web打印,摆脱了对浏览器的依赖,解决了新版谷歌(45版及后续版本)、64位火狐、edge等浏览器不再支持Lodop插件方式的情况,C-Lodop打印服务支持所有浏览器。

既然C-Lodop可以替代Lodop并且支持所有浏览器,实际开发过程中可以直接使用C-Lodop进行完成打印需求

二.vue中使用Lodop

1 把官方提供的LodopFuncs.js文件保存到某个目录下,如myProject\src\assets\LodopFuncs.js

2 修改LodopFuncs.js文件, 在文件最底部添加一行代码 export { getLodop }; //导出getLodop

3 在打印事件处理函数所在文件里 import 该 module 在打印事件函数中调用getLodop获取LODOP对象变量,按照官方教程书写自己的打印函数,通过 PRINT、PREVIEW、PRINT_DESIGN进行输出。

三.实例代码

1. LodopFuncs.js由于选择了C-Lodop打印服务,也就不再需要进行对各浏览器进行判断了,也不再需要各种提示下载哪个版本的控件了

改写后的lodopFuncs.js如下图所示,项目需求中引入了element的组件,提醒用户点击确认后下载打印控件 (win32NT.exe既支持32位也支持64位的系统,也就不用对用户操作系统进行判断了直接下载安装后刷新页面使用就好)

Vue使用lodop实现打印小结

2. template模板代码

小提示: 注意id放置位置,引用的是documnet.getElmentById('tableId').innerHTML

Vue使用lodop实现打印小结

示例: 进行getLodop的引用 import getLodop from '你的LodopFuncs.js 的路径'

Vue使用lodop实现打印小结

打印报表的方法进行代码编写,主要程序就三行代码 let LODOP = getLodop()//调用getLodop获取LODOP对象

LODOP.PRINT_INIT("")

 LODOP.ADD_PRINT_TEXT(50, 231, 260, 39, "打印内容")

 LODOP.PREVIEW()

但实际项目需求中,需要对用户进行判断,判断用户是否已安装打印服务,如果没有安装要提示用户下载安装,已安装好可以提示直接安装

打印的样式根据项目的需求也会有不同,有的是打印表格,有的是文本 有的是图片,用户根据官方文档操作写样式,字体大小,横竖版设置等等

四.附源码

import { MessageBox } from 'element-ui'

// ====页面动态加载C-Lodop云打印必须的文件CLodopfuncs.js====
var head = document.head || document.getElementsByTagName('head')[0] || document.documentElement
var oscript = document.createElement('script')
// 让本机的浏览器打印(更优先一点):
oscript = document.createElement('script')
oscript.src = 'http://localhost:8000/CLodopfuncs.js?priority=2'
head.insertBefore(oscript, head.firstChild)
// 加载双端口(8000和18000)避免其中某个端口被占用:
oscript = document.createElement('script')
oscript.src = 'http://localhost:18000/CLodopfuncs.js?priority=1'
head.insertBefore(oscript, head.firstChild)

// 下载loadLodop
function loadLodop() {
 window.open('../../static/Lodop/CLodop_Setup_for_Win32NT.exe')
}

// ====获取LODOP对象的主过程:====
function getLodop() {
 var LODOP
 try {
 LODOP = getCLodop()
 if (!LODOP && document.readyState !== 'complete') {
  MessageBox.alert('C-Lodop打印控件还没准备好,请稍后再试!')
  return
 }
 return LODOP
 } catch (err) {
 MessageBox({
  title: '温馨提示',
  type: 'warning',
  showCancelButton: true,
  message: '您还未安装打印控件,点击确定下载打印控件,安装成功后刷新页面即可进行打印',
  callback: res => {
  if (res === 'confirm') {
   loadLodop()
  }
  }
 })
 }
}

export default getLodop
<template>
 <div class="umess table-dialog">
 <!-- 表格组 -->
 <div class="umess table-main">
  <div class="title">{{ tabName }}</div>
  <!-- 导入导出 -->
  <div class="btn-top-list">
  <el-button type="primary" plain @click="exportReport">导出报表</el-button>
  <el-button type="primary" plain @click="printReport">打印报表</el-button>
  </div>
  <!-- 表格组 -->
  <div id="tableId" class="table-box">
  <table class="utable">
   <caption><b><font face="黑体" size="3">{{ tabName }}</font></b></caption>
   <thead>
   <tr v-for="(tr,index) in tableHead" :key="index">
    <td v-for="(item,i) in tr" :key="i" :colspan="item.cols" :rowspan="item.rows" :min-width="item.width">{{ item.value }}</td>
   </tr>
   </thead>
   <tbody>
   <tr v-for="(item,index) in tableBody" :key="index">
    <td v-for="(td, i) in item" :key="i" :colspan="td.cols" :rowspan="td.rows">
    <div class="td1">{{ td.value }}</div>
    </td>
   </tr>
   </tbody>
  </table>
  </div>
 </div>
 <!-- end -->
 </div>
</template>

<script>
import { tableHead, tableResolve } from '../excelTem/reportOne.js'
import getLodop from '@/api/lodop'
export default {
 data() {
 return {
  tabId: '',
  tabName: '',
  tableHead: tableHead,
  tableBody: []
 }
 },
 mounted() {

 },
 methods: {
 // 打印报表
 printReport() {
  const LODOP = getLodop()
  if (LODOP) {
  var strBodyStyle = '<style>'
  strBodyStyle += 'table { border-top: 1 solid #000000; border-left: 1 solid #000000; border-collapse:collapse; border-spacing:0;}'
  strBodyStyle += 'caption { line-height:2em; }'
  strBodyStyle += 'td { border-right: 1 solid #000000; border-bottom: 1 solid #000000; text-align:center; padding:2px 3px; font-size:11px;}'
  strBodyStyle += '</style>' //设置打印样式
   var strFormHtml = strBodyStyle + '<body>' + document.getElementById('tableId').innerHTML + '</body>' //获取打印内容
  LODOP.PRINT_INIT('') //初始化
  LODOP.SET_PRINT_PAGESIZE(2, 0, 0, 'A4') //设置横向
  LODOP.ADD_PRINT_HTM('1%', '1%', '98%', '98%', strFormHtml) //设置打印内容
  LODOP.SET_PREVIEW_WINDOW(2, 0, 0, 800, 600, '') //设置预览窗口模式和大小
  LODOP.PREVIEW()
  }
 }
 }
}
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
showModelessDialog()使用详解
Sep 21 Javascript
深入理解JavaScript系列(37):设计模式之享元模式详解
Mar 04 Javascript
浅谈javascript中的DOM方法
Jul 16 Javascript
javascript学习总结之js使用技巧
Sep 02 Javascript
BooStrap对导航条的改造实践小结
Sep 21 Javascript
原生JS查找元素的方法(推荐)
Nov 22 Javascript
详解angularjs中的隔离作用域理解以及绑定策略
May 31 Javascript
微信小程序 地图map实例详解
Jun 07 Javascript
在Vue-cli里应用Vuex的state和mutations方法
Sep 16 Javascript
微信小程序实现文字无限轮播效果
Dec 28 Javascript
微信小程序时间选择插件使用详解
Dec 28 Javascript
JavaScript 原型与原型链详情
Nov 02 Javascript
cordova+vue+webapp使用html5获取地理位置的方法
Jul 06 #Javascript
elementui之el-tebs浏览器卡死的问题和使用报错未注册问题
Jul 06 #Javascript
vue router总结 $router和$route及router与 router与route区别
Jul 05 #Javascript
基于vue实现圆形菜单栏组件
Jul 05 #Javascript
vue 使用axios 数据请求第三方插件的使用教程详解
Jul 05 #Javascript
vue中实现Monaco Editor自定义提示功能
Jul 05 #Javascript
VueCli3.0中集成MockApi的方法示例
Jul 05 #Javascript
You might like
php 向访客和爬虫显示不同的内容
2009/11/09 PHP
第4章 数据处理-php正则表达式-郑阿奇(续)
2011/07/04 PHP
Laravel5.5 视图 - 创建视图和数据传递示例
2019/10/21 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
JS 页面计时器示例代码
2013/10/28 Javascript
Document.location.href和.replace的区别示例介绍
2014/03/04 Javascript
Bootstrap网格系统详解
2016/04/26 Javascript
angular-ngSanitize模块-$sanitize服务详解
2017/06/13 Javascript
Vue中v-for的数据分组实例
2018/03/07 Javascript
ES6与CommonJS中的模块处理的区别
2018/06/13 Javascript
详解JavaScript 中 if / if...else...替换方式
2018/07/15 Javascript
JavaScript实现随机点名器实例详解
2019/05/07 Javascript
Javascript Worker子线程代码实例
2020/02/20 Javascript
vue使用微信扫一扫功能的实现代码
2020/04/11 Javascript
openlayers4实现点动态扩散
2020/08/17 Javascript
[06:13]DOTA2进化论(修改版)
2013/10/08 DOTA
python绘图库Matplotlib的安装
2014/07/03 Python
tensorflow实现加载mnist数据集
2018/09/08 Python
python3 读取Excel表格中的数据
2018/10/16 Python
python使用Plotly绘图工具绘制气泡图
2019/04/01 Python
Python 分发包中添加额外文件的方法
2019/08/16 Python
Python猜数字算法题详解
2020/03/01 Python
Python小整数对象池和字符串intern实例解析
2020/03/21 Python
python中列表的含义及用法
2020/05/26 Python
Sentry错误日志监控使用方法解析
2020/11/12 Python
Django 权限管理(permissions)与用户组(group)详解
2020/11/30 Python
加拿大最大的箱包及旅游配件零售商:Bentley Leathers
2017/07/19 全球购物
会计专业自我鉴定范文
2013/10/06 职场文书
临床医学专业毕业生的自我评价
2013/10/17 职场文书
寄语十八大感言
2014/02/07 职场文书
2014新年元旦活动策划方案
2014/02/18 职场文书
抗洪抢险事迹材料
2014/05/06 职场文书
工作检讨书范文
2015/01/23 职场文书
公司搬迁通知
2015/04/20 职场文书
用基于python的appium爬取b站直播消费记录
2021/04/17 Python
Python实现视频自动打码的示例代码
2022/04/08 Python