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 相关文章推荐
jquery创建并行对象或者合并对象的实现代码
Oct 10 Javascript
jQuery对html元素取值与赋值的方法
Nov 20 Javascript
js获得当前时区夏令时发生和终止的时间代码
Feb 23 Javascript
浅析函数声明和函数表达式——函数声明的声明提前
May 03 Javascript
Markdown+Bootstrap图片自适应属性详解
May 21 Javascript
使用vue框架 Ajax获取数据列表并用BootStrap显示出来
Apr 24 Javascript
jquery实现简单实用的轮播器
May 23 jQuery
浅谈ajax在jquery中的请求和servlet中的响应
Jan 22 jQuery
vue-rx的初步使用教程
Sep 21 Javascript
微信小程序textarea层级过高(盖住其他元素)问题的解决办法
Mar 04 Javascript
vue+iview动态渲染表格详解
Mar 19 Javascript
vue实现登录页面的验证码以及验证过程解析(面向新手)
Aug 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/10/26 PHP
基于PHP读取TXT文件向数据库导入海量数据的方法
2013/04/23 PHP
遭遇php的in_array低性能问题
2013/09/17 PHP
详解php命令注入攻击
2019/04/06 PHP
JavaScript 关键字屏蔽实现函数
2009/08/02 Javascript
jQuery之网页换肤实现代码
2011/04/30 Javascript
node.js中的http.response.writeHead方法使用说明
2014/12/14 Javascript
直接拿来用的页面跳转进度条JS实现
2016/01/06 Javascript
jQuery版本升级踩坑大全
2016/01/12 Javascript
前端axios下载excel文件(二进制)的处理方法
2018/07/31 Javascript
Vue项目History模式404问题解决方法
2018/10/31 Javascript
electron制作仿制qq聊天界面的示例代码
2018/11/26 Javascript
js实现简单的打印表格
2020/01/15 Javascript
JS基础之逻辑结构与循环操作示例
2020/01/19 Javascript
[24:42]VP vs TNC Supermajor小组赛B组 BO3 第三场 6.2
2018/06/03 DOTA
[54:57]DOTA2-DPC中国联赛定级赛 Aster vs DLG BO3第二场 1月8日
2021/03/11 DOTA
python判断windows隐藏文件的方法
2014/03/21 Python
pycharm 将django中多个app放到同个文件夹apps的处理方法
2018/05/30 Python
使用Python给头像戴上圣诞帽的图像操作过程解析
2019/09/20 Python
python图形开发GUI库wxpython使用方法详解
2020/02/14 Python
JAVA SWT事件四种写法实例解析
2020/06/05 Python
一个非常简单好用的Python图形界面库(PysimpleGUI)
2020/12/28 Python
详解matplotlib绘图样式(style)初探
2021/02/03 Python
亿阳信通股份有限公司C#笔试题
2016/12/06 面试题
工程概预算专业毕业生求职信
2013/10/04 职场文书
4s店市场专员岗位职责
2014/04/09 职场文书
家长通知书教师评语
2014/04/17 职场文书
群众路线专项整治方案
2014/10/27 职场文书
2014年个人技术工作总结
2014/12/08 职场文书
2014年生产部工作总结
2014/12/17 职场文书
李强感恩观后感
2015/06/17 职场文书
摘录式读书笔记
2015/07/01 职场文书
公安纪律作风整顿心得体会
2016/01/23 职场文书
个人道歉信大全
2019/04/11 职场文书
SQL Server中使用判断语句(IF ELSE/CASE WHEN )案例
2021/07/07 SQL Server
nginx的zabbix 5.0安装部署的方法步骤
2021/07/16 Servers