php lodop 实例,Vue使用lodop实现打印小结
一. 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位的系统,也就不用对用户操作系统进行判断了直接下载安装后刷新页面使用就好)
2. template模板代码
小提示: 注意id放置位置,引用的是documnet.getElmentById('tableId').innerHTML
示例: 进行getLodop的引用 import getLodop from '你的LodopFuncs.js 的路径'
打印报表的方法进行代码编写,主要程序就三行代码 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
导出报表
打印报表
{{ item.value }}
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 = '
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 += '' //设置打印样式
var strFormHtml = strBodyStyle + '
' + document.getElementById('tableId').innerHTML + '' //获取打印内容
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()
}
}
}
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
php lodop 实例,Vue使用lodop实现打印小结相关推荐
- VUE使用lodop实现前端打印页面指定内容
最近做项目,遇到一个需要页面无需下载在线打印Word的功能,最初尝试直接打印页面,会导致将整个页面都打印出来,不符合要求.后期客户要求要使用lodop,这样打印与页面展示Word两个方面都是未知的东西 ...
- vue项目中如何利用lodop控件实现多页打印
针对windows环境下的vue项目中如何利用lodop控件实现打印的功能,不支持mac环境 下载安装 首先去lodop官网下载中心下载相关的包,完成安装 重点关注前四个文件,安装第一个文件,在第二个 ...
- vue结合Lodop前端实现打印机的获取及打印
vue结合Lodop前端实现打印机的获取及打印 首先展示一下实现的效果: 一.Lodop的使用 使用Lodop来实现本地打印机的获取,首先在自己的vue页面引入LodopFuncs.js文件. //= ...
- VUE 集成 LODOP插件打印
VUE 集成LODOP插件打印 VUE 集成LODOP插件打印 Lodop.C-Lodop使用说明及样例 VUE简单使用lodop 1.创建LodopFuncs.js文件 2.在打印功能vue页面引入 ...
- vue使用lodop打印插件
首先将lodop安装包放到static下 下载地址:http://www.c-lodop.com/download.html 新建一个vue测试lodop功能 LodopFuncs.js var Cr ...
- vue 调用打印机插件 LODOP 实例详解
最近的项目需要调用打印机,把网上的一些资料整理一些,分享给大家,需要注意的是lodop会有脚标,如果想去掉脚标,只能先预览再打印,或者购买版权. lodop官网vue案例地址:点击进入 安装打印机驱动 ...
- vue使用lodop.js实现前端标签打印
最近做项目, 需要使用到类似顺丰标签的那种标签打印, 需实现单打和批量打印,由于打印的功能是给到国外的同事使用,纸张大小为4*6, 有点特殊,国外打印机和国内的也不一样, 所以调试的时候也是花费了挺多 ...
- vue使用lodop打印控件
1.下载 http://www.lodop.net/download.html Lodop发行包解压,安装lodop及云打印插件CLodop 注:安装与浏览器位数对应的lodop版本 2.把Lodop ...
- vue 下载lodop时页面数据丢失问题
在Vue 中使用lodop时,如果未下载lodop会出现页面数据丢失的情况其问题在于Lodop的JS是将下载的数据直接插入到body下,此时app里面的内容就会被阻塞,如果不行出现数据丢失问题,则需要 ...
最新文章
- ActiveMQ消息存储持久化
- 模板元编程时的参数推导类型输出
- 使用python套用excel模板_集成python的excel插件模板pyaddin——使用说明
- 08 域控 架构主机 转移_论无服务器架构的特征
- struts2中result的type跳转类型总结
- 压缩包安装mySQL 与 Qt中使用mySQL
- 深入学习NSUserDefaults/standardUserDefaults
- 数据库存储时间的时区问题
- oracle 的数据库、表空间、表是什么关系
- 使用_thread多线程模块ping主机代码
- 编程开源_5种最适合编程的开源字体
- 四、vue 项目使用高德地图画面(多边形)
- 如何分发大文件、大文件传输解决方案
- c语言数学作业及答案,2004年9月全国计算机等级考试二级C语言笔试试题及答案...
- 响应式设计中怎样布局?
- 【蓝桥杯真题】16天冲刺 Python
- 挑战UnityShader学习之八——用最简单的方法实现下雨天积水效果
- html5+++map+清除,HTML5+google map自我瞎学习
- 在Android Studio中添加mp3音频文件
- Unity预计算全局光照的学习(速度优化,LightProbe,LPPV)