php lodop 实例,Vue使用lodop实现打印小结
一. Lodop與C-Lodop的區(qū)別
Lodop打印控件是瀏覽器插件，與瀏覽器緊密結合來實現本地打印，是一種內嵌到瀏覽器里交互方式。(適用瀏覽器：ie系列、火狐51版及歷史版本、谷歌44版及歷史版本。(新版火狐及谷歌不再支持np插件，也不能使用lodop))
C-Lodop打印服務是以提供服務方式解決web打印，擺脫了對瀏覽器的依賴，解決了新版谷歌(45版及后續(xù)版本)、64位火狐、edge等瀏覽器不再支持Lodop插件方式的情況，C-Lodop打印服務支持所有瀏覽器。
既然C-Lodop可以替代Lodop并且支持所有瀏覽器，實際開發(fā)過程中可以直接使用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'
// ====頁面動態(tài)加載C-Lodop云打印必須的文件CLodopfuncs.js====
var head = document.head || document.getElementsByTagName('head')[0] || document.documentElement
var oscript = document.createElement('script')
// 讓本機的瀏覽器打印(更優(yōu)先一點)：
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
{{ tabName }}導出報表
打印報表
{{ 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: {
// 打印報表
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实现打印小结的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： php reset input,PHP
- 下一篇： php dlt645,DLMS - DL