php lodop 实例,Vue使用lodop实现打印小结
一. Lodop與C-Lodop的區(qū)別
Lodop打印控件是瀏覽器插件，與瀏覽器緊密結(jié)合來(lái)實(shí)現(xiàn)本地打印，是一種內(nèi)嵌到瀏覽器里交互方式。(適用瀏覽器：ie系列、火狐51版及歷史版本、谷歌44版及歷史版本。(新版火狐及谷歌不再支持np插件，也不能使用lodop))
C-Lodop打印服務(wù)是以提供服務(wù)方式解決web打印，擺脫了對(duì)瀏覽器的依賴，解決了新版谷歌(45版及后續(xù)版本)、64位火狐、edge等瀏覽器不再支持Lodop插件方式的情況，C-Lodop打印服務(wù)支持所有瀏覽器。
既然C-Lodop可以替代Lodop并且支持所有瀏覽器，實(shí)際開(kāi)發(fā)過(guò)程中可以直接使用C-Lodop進(jìn)行完成打印需求
二.vue中使用Lodop
1 把官方提供的LodopFuncs.js文件保存到某個(gè)目錄下，如myProject\src\assets\LodopFuncs.js
2 修改LodopFuncs.js文件, 在文件最底部添加一行代碼 export { getLodop }; //導(dǎo)出getLodop
3 在打印事件處理函數(shù)所在文件里 import 該 module 在打印事件函數(shù)中調(diào)用getLodop獲取LODOP對(duì)象變量，按照官方教程書(shū)寫(xiě)自己的打印函數(shù)，通過(guò) PRINT、PREVIEW、PRINT_DESIGN進(jìn)行輸出。
三.實(shí)例代碼
1. LodopFuncs.js由于選擇了C-Lodop打印服務(wù)，也就不再需要進(jìn)行對(duì)各瀏覽器進(jìn)行判斷了，也不再需要各種提示下載哪個(gè)版本的控件了
改寫(xiě)后的lodopFuncs.js如下圖所示，項(xiàng)目需求中引入了element的組件，提醒用戶點(diǎn)擊確認(rèn)后下載打印控件 (win32NT.exe既支持32位也支持64位的系統(tǒng)，也就不用對(duì)用戶操作系統(tǒng)進(jìn)行判斷了直接下載安裝后刷新頁(yè)面使用就好)
2. template模板代碼
小提示： 注意id放置位置，引用的是documnet.getElmentById('tableId').innerHTML
示例： 進(jìn)行g(shù)etLodop的引用 import getLodop from '你的LodopFuncs.js 的路徑'
打印報(bào)表的方法進(jìn)行代碼編寫(xiě)，主要程序就三行代碼 let LODOP = getLodop()//調(diào)用getLodop獲取LODOP對(duì)象
LODOP.PRINT_INIT("")
LODOP.ADD_PRINT_TEXT(50, 231, 260, 39, "打印內(nèi)容")
LODOP.PREVIEW()
但實(shí)際項(xiàng)目需求中，需要對(duì)用戶進(jìn)行判斷，判斷用戶是否已安裝打印服務(wù)，如果沒(méi)有安裝要提示用戶下載安裝，已安裝好可以提示直接安裝
打印的樣式根據(jù)項(xiàng)目的需求也會(huì)有不同，有的是打印表格，有的是文本 有的是圖片，用戶根據(jù)官方文檔操作寫(xiě)樣式，字體大小，橫豎版設(shè)置等等
四.附源碼
import { MessageBox } from 'element-ui'
// ====頁(yè)面動(dòng)態(tài)加載C-Lodop云打印必須的文件CLodopfuncs.js====
var head = document.head || document.getElementsByTagName('head')[0] || document.documentElement
var oscript = document.createElement('script')
// 讓本機(jī)的瀏覽器打印(更優(yōu)先一點(diǎn))：
oscript = document.createElement('script')
oscript.src = 'http://localhost:8000/CLodopfuncs.js?priority=2'
head.insertBefore(oscript, head.firstChild)
// 加載雙端口(8000和18000)避免其中某個(gè)端口被占用：
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對(duì)象的主過(guò)程：====
function getLodop() {
var LODOP
try {
LODOP = getCLodop()
if (!LODOP && document.readyState !== 'complete') {
MessageBox.alert('C-Lodop打印控件還沒(méi)準(zhǔn)備好，請(qǐng)稍后再試！')
return
}
return LODOP
} catch (err) {
MessageBox({
title: '溫馨提示',
type: 'warning',
showCancelButton: true,
message: '您還未安裝打印控件，點(diǎn)擊確定下載打印控件，安裝成功后刷新頁(yè)面即可進(jìn)行打印',
callback: res => {
if (res === 'confirm') {
loadLodop()
}
}
})
}
}
export default getLodop
{{ tabName }}導(dǎo)出報(bào)表
打印報(bào)表
{{ item.value }}
{{ td.value }}import { tableHead, tableResolve } from '../excelTem/reportOne.js'
import getLodop from '@/api/lodop'
export default {
data() {
return {
tabId: '',
tabName: '',
tableHead: tableHead,
tableBody: []
}
},
mounted() {
},
methods: {
// 打印報(bào)表
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 += '' //設(shè)置打印樣式
var strFormHtml = strBodyStyle + '
' + document.getElementById('tableId').innerHTML + '' //獲取打印內(nèi)容LODOP.PRINT_INIT('') //初始化
LODOP.SET_PRINT_PAGESIZE(2, 0, 0, 'A4') //設(shè)置橫向
LODOP.ADD_PRINT_HTM('1%', '1%', '98%', '98%', strFormHtml) //設(shè)置打印內(nèi)容
LODOP.SET_PREVIEW_WINDOW(2, 0, 0, 800, 600, '') //設(shè)置預(yù)覽窗口模式和大小
LODOP.PREVIEW()
}
}
}
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持。
總結(jié)
以上是生活随笔為你收集整理的php lodop 实例,Vue使用lodop实现打印小结的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： php reset input,PHP
- 下一篇： php dlt645,DLMS - DL