用c-lodop打印远端pdf

本来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.userAgentif (ua.match(/Windows\sPhone/i)) return trueif (ua.match(/iPhone|iPod|iPad/i)) return trueif (ua.match(/Android/i)) return trueif (ua.match(/Edge\D?\d+/i)) return trueconst 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 trueelse 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') returnCLodopJsState = 'loading'const head = document.head || document.getElementsByTagName('head')[0] || document.documentElementconst 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 LODOPtry {const ua = navigator.userAgentconst 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 = oOBJECTelse 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.innerHTMLreturn 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 = nullconst 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 = nulltry {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) returngetFileBase64(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 }

用c-lodop打印远端pdf相关推荐

Lodop打印控件在平台中的应用
一.什么是lodop lodop取意自"load or print",是一款优秀的Web打印控件. 在B/S系统中,传统打印控件总是"页面看到什么才能打印什么" ...
如何在OS X中打印到PDF文件
如何在OS X中打印文件到PDF文件? 其实不需要安装任何其他软件,OS X本身支持打印到PDF文件这个功能. 具体操作详见下面文章: Want to save a document or web p ...
LODOP打印table表格宽度固定-超宽隐藏
之前有博文介绍关于超出div隐藏内容的:LODOP打印超过后隐藏内容样式里面提到了overflow:hidden;控制超出后隐藏,但是前面那篇用的是div,如果是在table中,由于table默认 ...
lodop打印html内容,Lodop打印控件在页面如何使用
Lodop打印控件部署到web服务器简单,在页面的使用方法也简单,是非常容易和方便使用的打印控件. 客户端本地打印角色(即用户访问网站后用自己链接的打印机进行客户端本地打印),步骤很少,部署简单: ...
【JS新手教程】LODOP打印复选框选中的任务或页数
之前的博文:[JS新手教程]LODOP打印复选框选中的内容关于任务:Lodop打印语句最基本结构介绍(什么是一个任务) 关于本文用到的JS的eval方法:JS-JAVASCRIPT的eval()方法 ...
关于Lodop打印控件
Vue项目中开发Lodop打印控件操作笔记. 1.进入官网下载控件,然后安装. 1 http://www.lodop.net/ 2.安装包里面有LodopFuncs.js,推荐使用官方js,网上也有很 ...
c++ byte转cbitmap_关于 C++ 打印 PDF 打印及 PDF 转图片、合并
关于 C++ 打印 PDF 打印及 PDF 转图片.合并原文: http://www.aqcoder.com/post/42 pdf(Portable Document Format 的简称,意为& ...
LODOP打印当前日期时间的方法
JS方法直接获取. 之前有个详细介绍的博文:LODOP打印用JS获取的当前日期本文也再演示一下,详细介绍见上面链接的博文,该方法此文不做详细介绍. 本文有三段:1.JS获取日期,2,.LODOP的F ...
vue base64导出（pdfexcel ）打印（pdf）
vue base64导出(pdf和excel ) 打印(pdf) 使用场景 1.在src/utils下创建filePrintAndDownload.js文件 2.在页面中使用 3.可用于测试的best ...

用c-lodop打印远端pdf

c-lodop的准备工作

打印pdf

用c-lodop打印远端pdf相关推荐

最新文章

热门文章