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 相关文章推荐
一个加密JavaScript的开源工具PACKER2.0.2
Nov 04 Javascript
Javascript 学习笔记 错误处理
Jul 30 Javascript
Javascript 中的类和闭包
Jan 08 Javascript
node.js中的fs.readlinkSync方法使用说明
Dec 17 Javascript
javascript实现博客园页面右下角返回顶部按钮
Feb 22 Javascript
javascript实现简单的分页特效
Aug 12 Javascript
jQuery实现鼠标经过事件的延时处理效果
Aug 20 Javascript
学习Javascript面向对象编程之封装
Feb 23 Javascript
快速入门Vue
Dec 19 Javascript
浅谈ajax请求不同页面的微信JSSDK问题
Feb 26 Javascript
原生js实现下拉选项卡
Nov 27 Javascript
vue-preview动态获取图片宽高并增加旋转功能的实现
Jul 29 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
smarty模板中拼接字符串的方法
2014/02/14 PHP
php使用GD库创建图片缩略图的方法
2015/06/10 PHP
PHP实现事件机制的方法
2015/07/10 PHP
浅析PHP中Session可能会引起并发问题
2015/07/23 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
在IE模态窗口中自由查看HTML源码的方法
2007/03/08 Javascript
JavaScript学习笔记(十七)js 优化
2010/02/04 Javascript
js绘制圆形和矩形的方法
2015/08/05 Javascript
浅谈JavaScript中小数和大整数的精度丢失
2016/05/31 Javascript
JS未跨域操作iframe里的DOM
2016/06/01 Javascript
AngularJS  ng-table插件设置排序
2016/09/21 Javascript
jQuery排序插件tableSorter使用方法
2017/02/10 Javascript
layui选项卡效果实现代码
2017/05/19 Javascript
Vue 将后台传过来的带html字段的字符串转换为 HTML
2018/03/29 Javascript
微信小程序使用setData修改数组中单个对象的方法分析
2018/12/30 Javascript
VuePress 静态网站生成方法步骤
2019/02/14 Javascript
解析原来浏览器原生支持JS Base64编码解码
2019/08/12 Javascript
JS 数组基本用法入门示例解析
2020/01/16 Javascript
Vue SSR 即时编译技术的实现
2020/05/06 Javascript
[03:46]显微镜下的DOTA2第七期——满血与残血
2014/06/20 DOTA
Django 添加静态文件的两种实现方法(必看篇)
2017/07/14 Python
python实现K近邻回归,采用等权重和不等权重的方法
2019/01/23 Python
CSS3教程:边框属性border的极致应用
2009/04/02 HTML / CSS
韩国邮政旗下生鲜食品网上超市:epost
2016/08/27 全球购物
麦德龙官方海外旗舰店:德国麦德龙超市
2017/12/23 全球购物
全球最大运动品牌的男装、女装和童装官方库存商:A&A Sports
2021/01/17 全球购物
Linux上比较文件的命令都有哪些
2013/09/28 面试题
2014大学生批评与自我批评思想汇报
2014/09/21 职场文书
标准离婚协议书(2014版)
2014/10/05 职场文书
普通党员整改措施
2014/10/24 职场文书
2015年世界水日活动总结
2015/02/09 职场文书
教师学期末个人总结
2015/02/13 职场文书
员工离职通知函
2015/04/25 职场文书
SpringBoot整合MongoDB的实现步骤
2021/06/23 MongoDB
SQL中的三种去重方法小结
2021/11/01 SQL Server
mysql sql常用语句大全
2022/06/21 MySQL