本来c-lodop是可以打印pdf的,但是后端返回一个pdf链接,所以前端需要将pdf先加载出来,然后再去打印他,不然打印出来的就是空白。
c-lodop的准备工作
这段我也是网上找的,直接拿过来就能用,很酷!
import { message } from 'ant-design-vue'
// ==本JS是加载Lodop插件及CLodop服务的综合示例,可直接使用,建议看懂后融进自己页面程序==
const install_lodop32 = 'install_lodop32.exe'
const install_lodop64 = 'install_lodop64.exe'
const CLodop_Setup_for_Win32NT = 'CLodop_Setup_for_Win32NT.exe'
// eslint-disable-next-line no-unused-vars
let CreatedOKLodopObject, CLodopIsLocal, CLodopJsState
// ==判断是否需要CLodop(那些不支持插件的浏览器):==
function needCLodop() {
try {
const ua = navigator.userAgent
if (ua.match(/Windows\sPhone/i)) return true
if (ua.match(/iPhone|iPod|iPad/i)) return true
if (ua.match(/Android/i)) return true
if (ua.match(/Edge\D?\d+/i)) return true
const verTrident = ua.match(/Trident\D?\d+/i)
const verIE = ua.match(/MSIE\D?\d+/i)
let verOPR = ua.match(/OPR\D?\d+/i)
let verFF = ua.match(/Firefox\D?\d+/i)
const x64 = ua.match(/x64/i)
if (!verTrident && !verIE && x64) return true
else if (verFF) {
verFF = verFF[0].match(/\d+/)
if (verFF[0] >= 41 || x64) return true
} else if (verOPR) {
verOPR = verOPR[0].match(/\d+/)
if (verOPR[0] >= 32) return true
} else if (!verTrident && !verIE) {
let verChrome = ua.match(/Chrome\D?\d+/i)
if (verChrome) {
verChrome = verChrome[0].match(/\d+/)
if (verChrome[0] >= 41) return true
}
}
return false
} catch (err) {
return true
}
}
// ==加载引用CLodop的主JS,用双端口8000和18000(以防其中一个被占):==
function loadCLodop() {
if (CLodopJsState === 'loading' || CLodopJsState === 'complete') return
CLodopJsState = 'loading'
const head = document.head || document.getElementsByTagName('head')[0] || document.documentElement
const JS1 = document.createElement('script')
const JS2 = document.createElement('script')
JS1.src = 'http://localhost:8000/CLodopfuncs.js?priority=1'
JS2.src = 'http://localhost:18000/CLodopfuncs.js'
JS1.onload = JS2.onload = function() {
CLodopJsState = 'complete'
}
JS1.onerror = JS2.onerror = function() {
CLodopJsState = 'complete'
}
head.insertBefore(JS1, head.firstChild)
head.insertBefore(JS2, head.firstChild)
CLodopIsLocal = !!(JS1.src + JS2.src).match(/\/\/localho|\/\/127.0.0./i)
}
if (needCLodop()) {
loadCLodop()
} // 加载
// ==获取LODOP对象主过程,判断是否安装、需否升级:==
function getLodop(oOBJECT, oEMBED) {
const strHtmInstall = `<br><font color='#FF00FF'>打印控件未安装!点击这里<a href='${install_lodop32}' target='_self'>执行安装</a>,安装后请刷新页面或重新进入。</font>`
const strHtm64_Install = `<br><font color='#FF00FF'>打印控件未安装!点击这里<a href='${install_lodop64}' target='_self'>执行安装</a>,安装后请刷新页面或重新进入。</font>`
const strHtmFireFox = `<br><br><font color='#FF00FF'>(注意:如曾安装过Lodop旧版附件npActiveXPLugin,请在【工具】->【附加组件】->【扩展】中先卸它)</font>`
const strHtmChrome = `<br><br><font color='#FF00FF'>(如果此前正常,仅因浏览器升级或重安装而出问题,需重新执行以上安装)</font>`
const strCLodopUpdate = `<br><font color='#FF00FF'>Web打印服务CLodop需升级!点击这里<a href='${CLodop_Setup_for_Win32NT}' target='_self'>执行升级</a>,升级后请刷新页面。</font>`
let LODOP
try {
const ua = navigator.userAgent
const isIE = !!ua.match(/MSIE/i) || !!ua.match(/Trident/i)
if (needCLodop()) {
try {
LODOP = window.getCLodop()
} catch (err) {
console.log()
}
if (!LODOP && CLodopJsState !== 'complete') {
if (CLodopJsState === 'loading') message.info('网页还没下载完毕,请稍等一下再操作.')
else message.info('没有加载CLodop的主js,请先调用loadCLodop过程.')
return
}
if (!LODOP) {
// document.body.innerHTML =
// strCLodopInstall_1 +
// (CLodopIsLocal ? strCLodopInstall_2 : '') +
// strCLodopInstall_3 +
// document.body.innerHTML;
// message.error('打印控件未安装,请于下载专区安装');
return
} else {
if (window.CLODOP.CVERSION < '4.0.9.6') {
document.body.innerHTML = strCLodopUpdate + document.body.innerHTML
}
if (oEMBED && oEMBED.parentNode) oEMBED.parentNode.removeChild(oEMBED)
if (oOBJECT && oOBJECT.parentNode) oOBJECT.parentNode.removeChild(oOBJECT)
}
} else {
const is64IE = isIE && !!ua.match(/x64/i)
// ==如果页面有Lodop就直接使用,否则新建:==
if (oOBJECT || oEMBED) {
if (isIE) LODOP = oOBJECT
else LODOP = oEMBED
} else if (!CreatedOKLodopObject) {
LODOP = document.createElement('object')
LODOP.setAttribute('width', 0)
LODOP.setAttribute('height', 0)
LODOP.setAttribute('style', 'position:absolute;left:0px;top:-100px;width:0px;height:0px;')
if (isIE) LODOP.setAttribute('classid', 'clsid:2105C259-1E0C-4534-8141-A753534CB4CA')
else LODOP.setAttribute('type', 'application/x-print-lodop')
document.documentElement.appendChild(LODOP)
CreatedOKLodopObject = LODOP
} else LODOP = CreatedOKLodopObject
// ==Lodop插件未安装时提示下载地址:==
if (!LODOP || !LODOP.VERSION) {
if (ua.indexOf('Chrome') >= 0) { document.body.innerHTML = strHtmChrome + document.body.innerHTML }
if (ua.indexOf('Firefox') >= 0) { document.body.innerHTML = strHtmFireFox + document.body.innerHTML }
document.body.innerHTML =
(is64IE ? strHtm64_Install : strHtmInstall) + document.body.innerHTML
return LODOP
}
}
if (LODOP.VERSION < '6.2.2.6') {
if (!needCLodop()) return
// document.body.innerHTML =
// (is64IE ? strHtm64_Update : strHtmUpdate) + document.body.innerHTML;
// message.error('打印服务需升级,请于下载专区升级')
}
// ===如下空白位置适合调用统一功能(如注册语句、语言选择等):==
// =======================================================
return LODOP
} catch (err) {
message.error('getLodop出错:' + err)
}
}
export { getLodop }
打印pdf
import { getLodop } from './lodopFuncs'
let lodop = null
const initLodop = () => {
if (!getLodop()) {
Message.error('打印控件未安装,请于下载专区安装')
return
}
lodop = getLodop()
if (lodop.VERSION < '6.2.2.6') {
Message.error('打印服务需升级,请于下载专区升级')
return
}
lodop.PRINT_INIT('qsyy') // 打印初始化 PRINT_INIT(打印任务名)
lodop.SET_LICENSES('', '4AA5CA8E56EDABDCD8F007D7B4FB9152922', '', '') // 设置软件产品注册信息
return lodop
}
/**
* 加载pdf 并转为base64
* @param {string} pdfUrl[pdf的链接]
*/
const getFileBase64 = async pdfUrl => {
let fileData = null
try {
fileData = await axios({
method: 'get',
url: pdfUrl, // 请求地址
responseType: 'blob' // 指明服务器返回的数据类型
})
} catch {
fileData = null
}
return new Promise((resolve, reject) => {
if (fileData && fileData.data) {
const file = new Blob([fileData.data], { type: 'application/pdf' })
const reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = () => resolve(reader.result)
reader.onerror = error => reject(error)
} else {
reject('文件读取错误')
}
})
}
/**
* 打印pdf
* @param {string} pdfUrl[pdf的链接]
*/
const lodopFdfBase64 = (pdfUrl) => {
const lodop = initLodop()
if (!lodop) return
getFileBase64(pdfUrl).then(res => {
lodop.SET_PRINT_PAGESIZE(2, 0, 0, 'A5') // 设置纸张大小
lodop.ADD_PRINT_PDF(0, 0, '100%', '100%', res?.split('data:application/pdf;base64,')[1])
const printName = sessionStorage.getItem('printName') // 获取默认打印机
if (lodop.SET_PRINTER_INDEX(printName)) {
lodop.PRINTA() // 静默打印
} else {
lodop.PREVIEW() // 预览
}
})
}
export { lodopFdfBase64 }