vue 实现静默打印、打印预览

近日遇到需求，需要实现静默打印，经过多方百度，发现了露肚皮（Lodop）这个第三方，官网demo。
我们新建一个print文件将他做成组件引入
print.js

//==本JS是加载Lodop插件及CLodop服务的综合示例，可直接使用，建议看懂后融进自己页面程序==var CreatedOKLodopObject, CLodopIsLocal, CLodopJsState//==判断是否需要CLodop(那些不支持插件的浏览器):==
export function needCLodop() {try {var 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 truevar verTrident = ua.match(/Trident\D?\d+/i)var verIE = ua.match(/MSIE\D?\d+/i)var verOPR = ua.match(/OPR\D?\d+/i)var verFF = ua.match(/Firefox\D?\d+/i)var 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) {var 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时用双端口(http是8000/18000,而https是8443/8444)以防其中某端口被占,
//主JS文件“CLodopfuncs.js”是固定文件名，其内容是动态的，与当前打印环境有关:
export function loadCLodop() {if (CLodopJsState == 'loading' || CLodopJsState == 'complete') returnCLodopJsState = 'loading'var head = document.head || document.getElementsByTagName('head')[0] || document.documentElementvar JS1 = document.createElement('script')var JS2 = document.createElement('script')if (window.location.protocol == 'https:') {JS1.src = 'https://localhost.lodop.net:8443/CLodopfuncs.js'JS2.src = 'https://localhost.lodop.net:8444/CLodopfuncs.js'} else {JS1.src = 'http://localhost:8000/CLodopfuncs.js'JS2.src = 'http://localhost:18000/CLodopfuncs.js'}JS1.onload = JS2.onload = function () {CLodopJsState = 'complete'}JS1.onerror = JS2.onerror = function (evt) {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对象主过程,判断是否安装、需否升级:==
export function getLodop(oOBJECT, oEMBED) {var strHtmInstall ="<br><font color='#FF00FF'>打印控件未安装!点击这里<a href='install_lodop32.exe' target='_self'>执行安装</a>,安装后请刷新页面或重新进入。</font>"var strHtmUpdate ="<br><font color='#FF00FF'>打印控件需要升级!点击这里<a href='install_lodop32.exe' target='_self'>执行升级</a>,升级后请重新进入。</font>"var strHtm64_Install ="<br><font color='#FF00FF'>打印控件未安装!点击这里<a href='install_lodop64.exe' target='_self'>执行安装</a>,安装后请刷新页面或重新进入。</font>"var strHtm64_Update ="<br><font color='#FF00FF'>打印控件需要升级!点击这里<a href='install_lodop64.exe' target='_self'>执行升级</a>,升级后请重新进入。</font>"var strHtmFireFox ="<br><br><font color='#FF00FF'>（注意：如曾安装过Lodop旧版附件npActiveXPLugin,请在【工具】->【附加组件】->【扩展】中先卸它）</font>"var strHtmChrome ="<br><br><font color='#FF00FF'>(如果此前正常，仅因浏览器升级或重安装而出问题，需重新执行以上安装）</font>"var strCLodopInstall_1 ="<br><font color='#FF00FF'>Web打印服务CLodop未安装启动，点击这里<a href='CLodop_Setup_for_Win32NT.exe' target='_self'>下载执行安装</a>"var strCLodopInstall_2 ="<br>（若此前已安装过，可<a href='CLodop.protocol:setup' target='_self'>点这里直接再次启动</a>）"var strCLodopInstall_3 = '，成功后请刷新或重启浏览器。</font>'var strCLodopUpdate ="<br><font color='#FF00FF'>Web打印服务CLodop需升级!点击这里<a href='CLodop_Setup_for_Win32NT.exe' target='_self'>执行升级</a>,升级后请刷新或重启浏览器。</font>"var LODOPtry {var ua = navigator.userAgentvar isIE = !!ua.match(/MSIE/i) || !!ua.match(/Trident/i)if (needCLodop()) {try {LODOP = getCLodop()} catch (err) {}if (!LODOP && CLodopJsState !== 'complete') {if (CLodopJsState == 'loading') alert('网页还没下载完毕，请稍等一下再操作.')else alert('没有加载CLodop的主js，请先调用loadCLodop过程.')return}if (!LODOP) {document.body.innerHTML =strCLodopInstall_1 + (CLodopIsLocal ? strCLodopInstall_2 : '') + strCLodopInstall_3 + document.body.innerHTMLreturn} else {if (CLODOP.CVERSION < '4.1.4.5') {document.body.innerHTML = strCLodopUpdate + document.body.innerHTML}if (oEMBED && oEMBED.parentNode) oEMBED.parentNode.removeChild(oEMBED) //清理旧版无效元素if (oOBJECT && oOBJECT.parentNode) oOBJECT.parentNode.removeChild(oOBJECT)}} else {var 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.innerHTMLif (ua.indexOf('Firefox') >= 0) document.body.innerHTML = strHtmFireFox + document.body.innerHTMLdocument.body.innerHTML = (is64IE ? strHtm64_Install : strHtmInstall) + document.body.innerHTMLreturn LODOP}}if (LODOP.VERSION < '6.2.2.6') {if (!needCLodop()) document.body.innerHTML = (is64IE ? strHtm64_Update : strHtmUpdate) + document.body.innerHTML}//===如下空白位置适合调用统一功能(如注册语句、语言选择等):==//=======================================================return LODOP} catch (err) {alert('getLodop出错:' + err)}
}

然后根据需求开始画（可以传入base64），我这里是自己画的。（上面这一段可以直接无脑复制，下面需要根据自己的需求来）

import { getLodop } from './print'
const print = (data, type) => {let LODOP = getLodop()LODOP.PRINT_INIT('')LODOP.ADD_PRINT_RECT(0, 0, '10cm', '10cm', 0, 1) //(Top, Left, Width, Height,intLineStyle, intLineWidth)LODOP.ADD_PRINT_RECT(0, 0, '10cm', '3.5cm', 0, 1)LODOP.ADD_PRINT_RECT('3.5cm', 0, '10cm', '3cm', 0, 1)LODOP.ADD_PRINT_RECT('6.5cm', 0, '10cm', '2.5cm', 0, 1)LODOP.SET_PRINT_STYLE('FontSize', 12)LODOP.SET_PRINT_STYLE('Bold', 1)//SET_PRINT_STYLE:设置纯文本打印项风格,格式：SET_PRINT_STYLE(strStyleName,varStyleValue)。//strStyleName：打印风格名，设定纯文本风格名称及其含义如下：|varStyleValue：打印风格值，相关值如下：//“FontName”： 字体名称。|值： 字符型，与操作系统字体名一致，缺省是“宋体”。//“FontSize”： 字体大小。|值：数值型，单位是pt，缺省值是9，可以含小数，如13.5。//“FontColor”： 字体颜色。|值：整数或字符型，如同CSS的color。//“Bold”： 是否粗体。|值：数字型，1代表粗体，0代表非粗体，缺省值是0。//“Italic”： 是否斜体。|值：数字型，1代表斜体，0代表非斜体，缺省值是0。//“Underline”： 是否下滑线。|值：数字型，1代表有下划线，0代表无下划线，缺省值是0。//“Alignment”： 内容左右靠齐方式。|值：数字型，1--左靠齐 2--居中 3--右靠齐，缺省值是1。//“Angle”： 旋转角度。|值：数字型，逆时针旋转角度数，单位是度，0度表示不旋转// LODOP.PREVIEW() //打印预览LODOP.PRINT()// LODOP.PRINT_SETUP();//打印维护
}
export default print

我这里直接挂载全局调用即可，具体方法大家根据自己的需求去封装，这里详细参数可以自行查阅。
（可以通过打印维护去调整样式，设置好默认打印机就可以实现静默打印）
不知道为什么，这里的引入会报错，虽然并不影响，但看着很难受，如果大家有时间深入研究欢迎交流~

 if (window.location.protocol == 'https:') {JS1.src = 'https://localhost.lodop.net:8443/CLodopfuncs.js'JS2.src = 'https://localhost.lodop.net:8444/CLodopfuncs.js'} else {JS1.src = 'http://localhost:8000/CLodopfuncs.js'JS2.src = 'http://localhost:18000/CLodopfuncs.js'}

vue 实现静默打印、打印预览相关推荐

vue 项目中实现pdf预览 pdf打印 pdf下载
在Vue项目中实现PDF预览.打印和下载可以通过以下步骤来实现: 安装pdf.js pdf.js是一个JavaScript库,可以用于在Web上渲染PDF文件. 可以使用npm安装pdf.js,命令如 ...
ABAP 如何判断调用smartforms时是进行打印还是预览
原文地址:ABAP 如何判断调用smartforms时是进行打印还是预览作者:Lemon SAP在调用smartforms 时,在打印时有直接打印和预览两个选择,有时候需要区别用户的操作是打印还是预览 ...
PrintDocument打印、预览、打印机设置和打印属性的方法（较完整）
C# 中打印.预览.打印机设置和打印属性的方法http://www.veryhuo.com 2011-10-08 烈火学院投递稿件我有话说private void Form1_Load(objec ...
winform打印和预览
winform打印和预览调用代码源码此文章转载自上善卍若水[winform打印和预览](https://blog.csdn.net/mixiu888/article/details/809161 ...
delphi 获取打印机默认纸张_在DELPHI中实现打印的预览
在DELPHI中实现打印的预览 PCPOP.COM 2005年10月18日类型:转载作者:<电脑报> 编辑:王琛 ----------------------------------- ...
JavaScript 页面打印，预览，设置，分页
在HTML页中加载打印对象 <object id="WebBrowser" width="0" height="0" classid= ...
JavaScript打印和预览等
JavaScript打印和预览等 1.JavaScript局部打印 <input id="btnPrint" type="button" value=&q ...
vue本地上传并预览php,vue.js 实现图片本地预览裁剪压缩上传功能
以下代码涉及 Vue 2.0 及 ES6 语法. 目标纯 javascrpit 实现,兼容ie9及以上浏览器,在本地做好文件格式.长宽.大小的检测,减少浏览器交互. 现实是残酷的,为了兼容Ie9 还 ...
vue移动端实现图片预览
接着上文的文件上传.下载.删除继续往下说,我们先说移动端的图片格式预览上文说到了vue引用了vant插件,是一个很好用的移动端开发组件,它自带了上传文件的方法,当然也带了图片预览的方法图片预览其实 ...
Vue前端JavaScript实现PDF预览与图片预览
Vue前端JavaScript实现PDF预览与图片预览说明 PDF.JS 代码实现预览测试 embed与iframe标签 `<embed>` `<iframe>` 浏览器预 ...

vue 实现静默打印、打印预览

vue 实现静默打印、打印预览相关推荐

最新文章

热门文章