VUE使用lodop实现前端打印页面指定内容
最近做项目，遇到一个需要页面无需下载在线打印Word的功能，最初尝试直接打印页面，会导致将整个页面都打印出来，不符合要求。后期客户要求要使用lodop，这样打印与页面展示Word两个方面都是未知的东西，那就查资料设计实现方式吧，这里重点记录打印的实现，总的来说有三步。1.去lodop的下载地址下载安装适合自己电脑的插件，传送门：http://www.c-lodop.com/download.htm
·
最近做项目，遇到一个需要页面无需下载在线打印Word的功能，最初尝试直接打印页面，会导致将整个页面都打印出来，不符合要求。后期客户要求要使用lodop，这样打印与页面展示Word两个方面都是未知的东西，那就查资料设计实现方式吧，这里重点记录打印的实现，总的来说有三步。
1.去lodop的下载地址下载安装适合自己电脑的插件，传送门：http://www.c-lodop.com/download.html
注意！这里我认为该官网下载有个不友好的地方
打印组件，即一些样例，需要在win32版的这个这个发行包中下载，也就是解压出来的这些东西
但是插件的运行程序却需要使用win64版的，这让我一开始绕了一圈，不知道是操作不对还是确实这样，有大神可以指导一下。下载后点击安转这个执行程序即可成功安装插件。
2.将js引入我们的前端项目，我这里引入了两个，直接上图上代码：
lodop.js:
var CreatedOKLodop7766 = null
export function needCLodop() {
try {
var ua = navigator.userAgent
if (ua.match(/Windows\sPhone/i) != null) return true
if (ua.match(/iPhone|iPod/i) != null) return true
if (ua.match(/Android/i) != null) return true
if (ua.match(/Edge\D?\d+/i) != null) return true
var 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 == null && verIE == null && x64 !== null) return true
else if (verFF !== null) {
verFF = verFF[0].match(/\d+/)
if (verFF[0] >= 41 || x64 !== null) return true
} else if (verOPR !== null) {
verOPR = verOPR[0].match(/\d+/)
if (verOPR[0] >= 32) return true
} else if (verTrident == null && verIE == null) {
var verChrome = ua.match(/Chrome\D?\d+/i)
if (verChrome !== null) {
verChrome = verChrome[0].match(/\d+/)
if (verChrome[0] >= 41) return true
}
}
return false
} catch (err) {
return true
}
}
// ====页面引用CLodop云打印必须的JS文件：====
if (needCLodop()) {
var head =
document.head ||
document.getElementsByTagName('head')[0] ||
document.documentElement
var oscript = document.createElement('script')
oscript.src = 'http://localhost:8000/CLodopfuncs.js?priority=1'
head.insertBefore(oscript, head.firstChild)
// 引用双端口(8000和18000）避免其中某个被占用：
oscript = document.createElement('script')
oscript.src = 'http://localhost:18000/CLodopfuncs.js?priority=0'
head.insertBefore(oscript, head.firstChild)
}
// ====获取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 =
"<br><font color='#FF00FF'>CLodop云打印服务(localhost本地)未安装启动!点击这里<a href='http://www.lodop.net/download/CLodop_Setup_for_Win32NT_https_3.046Extend.zip' download target='_self'>执行安装</a>,安装后请刷新页面。</font>"
const strCLodopUpdate =
"<br><font color='#FF00FF'>CLodop云打印服务需升级!点击这里<a href='http://www.lodop.net/download/CLodop_Setup_for_Win32NT_https_3.046Extend.zip' download target='_self'>执行升级</a>,升级后请刷新页面。</font>"
let LODOP
try {
const isIE =
navigator.userAgent.indexOf('MSIE') >= 0 ||
navigator.userAgent.indexOf('Trident') >= 0
if (needCLodop()) {
try {
// eslint-disable-next-line no-undef
LODOP = getCLodop()
// eslint-disable-next-line no-empty
} catch (err) {}
if (!LODOP && document.readyState !== 'complete') {
alert('C-Lodop没准备好，请稍后再试！')
return
}
if (!LODOP) {
if (isIE) document.write(strCLodopInstall)
else {
document.body.innerHTML =
strCLodopInstall + document.body.innerHTML
}
return
} else {
// eslint-disable-next-line no-undef
if (CLODOP.CVERSION < '3.0.4.3') {
if (isIE) document.write(strCLodopUpdate)
else {
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 && navigator.userAgent.indexOf('x64') >= 0
// =====如果页面有Lodop就直接使用，没有则新建:==========
// eslint-disable-next-line eqeqeq
if (oOBJECT != undefined || oEMBED != undefined) {
if (isIE) LODOP = oOBJECT
else LODOP = oEMBED
} else if (CreatedOKLodop7766 == null) {
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)
CreatedOKLodop7766 = LODOP
} else LODOP = CreatedOKLodop7766
// =====Lodop插件未安装时提示下载地址:==========
if (LODOP == null || typeof LODOP.VERSION === 'undefined') {
if (navigator.userAgent.indexOf('Chrome') >= 0) {
document.body.innerHTML =
strHtmChrome + document.body.innerHTML
}
if (navigator.userAgent.indexOf('Firefox') >= 0) {
document.body.innerHTML =
strHtmFireFox + document.body.innerHTML
}
if (is64IE) document.write(strHtm64_Install)
else if (isIE) document.write(strHtmInstall)
else {
document.body.innerHTML =
strHtmInstall + document.body.innerHTML
}
return LODOP
}
}
if (LODOP.VERSION < '6.2.2.3') {
if (!needCLodop()) {
if (is64IE) document.write(strHtm64_Update)
else if (isIE) document.write(strHtmUpdate)
else {
document.body.innerHTML =
strHtmUpdate + document.body.innerHTML
}
}
return LODOP
}
// ===如下空白位置适合调用统一功能(如注册语句、语言选择等):===
// ===========================================================
return LODOP
} catch (err) {
alert('getLodop出错:' + err)
}
}
doPrint.js:
import { getLodop } from '@t/lodop' // 这块就是引用的上面一大坨暴露出来的方法喽
const PrintAccount = (qrTitle, codetype, url, code) => {
const qrAccount = `${url}/#/?type=${codetype}&code=${code}`
// 调用打印对象
let LODOP
// eslint-disable-next-line prefer-const
LODOP = getLodop()
// 打印页面配置
LODOP.SET_PRINT_MODE('PRINT_NOCOLLATE', 1)
LODOP.SET_PRINT_PAGESIZE(3, '5.7cm', '2cm', 2)
// 条码内容
LODOP.ADD_PRINT_TEXT(3, 32, 127, 20, qrTitle)
LODOP.SET_PRINT_STYLEA(0, 'FontSize', 15)
LODOP.ADD_PRINT_BARCODE(26, 15, 170, 147, 'QRCode', qrAccount)
// LODOP.ADD_PRINT_TEXT(159, 11, 163, 42, qrAccount)
// LODOP.SET_PRINT_STYLEA(0, 'FontSize', 11)
}
export { PrintAccount }
3.代码引用：
页面不用下载实现打印Word，这里我采用的方法是页面画出Word架构，动态替换关键字，然后打印该页面。
画好页面模板后，引用刚才新建的js方法，给出一个打印按钮，给按钮赋值一个click操作即可。
直接上预览打印与最终实现打印的vue页面代码：
画要被打印的Word框架：
引用打印js方法：
打印按钮的click方法与实现：
整篇原始代码：
<template>
<div class="app-container">
<el-button id='yulan' type="info"@click="printPdf" :tbId="tbId" v-print="'#printMe'">打印</el-button>
<!--startprint-->
<div id="printMe">
<div class="text general"><p class="MsoNormal" style="text-align: center;"><strong><span
style="font-size: 12.0pt; font-family: 宋体;">民事起诉状<span lang="EN-US"></span></span></strong></p>
<p class="MsoNormal" style="text-align: center;"><strong><span style="font-size: 12.0pt; font-family: 宋体;"
lang="EN-US"> </span></strong></p>
<p class="MsoNormal" style="text-indent: 24.0pt; mso-char-indent-count: 2.0; line-height: 150%;"><span
style="font-size: 12.0pt; line-height: 150%; font-family: 宋体;">原告<span lang="EN-US">XXX</span>，女，<span
lang="EN-US">XXXX</span>年<span lang="EN-US">X</span>月<span lang="EN-US">X</span>日出生，身份证号码<span lang="EN-US">XXXXXXXXXXXX</span>，<span
lang="EN-US">X</span>族，住<span lang="EN-US">XX</span>省<span lang="EN-US">XX</span>市<span
lang="EN-US">XX</span>区<span
lang="EN-US">XX</span>路<span lang="EN-US">XX</span>号。电话：<span lang="EN-US">XXXXXX</span>。<span
lang="EN-US"></span></span></p>
<p class="MsoNormal" style="text-indent: 24.0pt; mso-char-indent-count: 2.0; line-height: 150%;"><span
style="font-size: 12.0pt; line-height: 150%; font-family: 宋体;">被告<span lang="EN-US">XXX</span>，男，<span
lang="EN-US">XXXX</span>年<span lang="EN-US">X</span>月<span lang="EN-US">X</span>日出生，身份证号码<span lang="EN-US">XXXXXXXXXXXX</span>，<span
lang="EN-US">X</span>族，户籍地：<span lang="EN-US">XX</span>省<span lang="EN-US">XX</span>市<span
lang="EN-US">XX</span>区<span lang="EN-US">XX</span>路<span lang="EN-US">XX</span>号，现住<span
lang="EN-US">XX</span>省<span lang="EN-US">XX</span>市<span lang="EN-US">XX</span>区<span
lang="EN-US">XX</span>路<span
lang="EN-US">XX</span>号。电话：<span lang="EN-US">XXXXXX</span>。<span lang="EN-US"></span></span></p>
<p class="MsoNormal" style="line-height: 150%;"><strong><span
style="font-size: 12.0pt; line-height: 150%; font-family: 宋体;">诉讼请求：<span
lang="EN-US"></span></span></strong>
</p>
<p class="MsoNormal" style="text-indent: 24.0pt; mso-char-indent-count: 2.0; line-height: 150%;"><span
style="font-size: 12.0pt; line-height: 150%; font-family: 宋体;" lang="EN-US">1</span><span
style="font-size: 12.0pt; line-height: 150%; font-family: 宋体;">、请求判令被告归还借款人民币<span lang="EN-US">XXXX</span>元及银行同期存款利息<span
lang="EN-US">XXX</span>元。<span lang="EN-US"></span></span></p>
<p class="MsoNormal" style="text-indent: 24.0pt; mso-char-indent-count: 2.0; line-height: 150%;"><span
style="font-size: 12.0pt; line-height: 150%; font-family: 宋体;" lang="EN-US">2</span><span
style="font-size: 12.0pt; line-height: 150%; font-family: 宋体;">、判被告承担本案的诉讼费用。<span
lang="EN-US"></span></span>
</p>
<p class="MsoNormal" style="line-height: 150%;"><strong><span
style="font-size: 12.0pt; line-height: 150%; font-family: 宋体;">事实与理由：<span
lang="EN-US"></span></span></strong></p>
<p class="MsoNormal" style="text-indent: 24.0pt; mso-char-indent-count: 2.0; line-height: 150%;"><span
style="font-size: 12.0pt; line-height: 150%; font-family: 宋体;">原、被告系朋友关系，<span lang="EN-US">XX</span>年<span
lang="EN-US">X</span>月<span lang="EN-US">X</span>日被告以资金紧缺为由向原告借款<span lang="EN-US">XXXX</span>元，有被告出具的借条为凭。原告于<span
lang="EN-US">X</span>年<span lang="EN-US">X</span>月间多次向被告催讨借款，被告均以各种理由推拖，至今尚欠原告借款<span
lang="EN-US">XXXX</span>元。为了维护自身的合法权益，根据《民事诉讼法》第<span
lang="EN-US">108</span>条向贵院提起诉讼，请求法院依法判决。<span lang="EN-US"></span></span></p>
<p class="MsoSalutation" style="line-height: 150%;"><span
style="font-size: 12.0pt; line-height: 150%; font-family: 宋体;" lang="EN-US"> </span><span
style="font-size: 12.0pt; line-height: 150%; font-family: 宋体;">此致<span lang="EN-US"></span></span></p>
<p class="MsoNormal" style="line-height: 150%;"><span
style="font-size: 12.0pt; line-height: 150%; font-family: 宋体;" lang="EN-US">XXX</span><span
style="font-size: 12.0pt; line-height: 150%; font-family: 宋体;">人民法院<span lang="EN-US"></span></span></p>
<p class="MsoNormal" style="line-height: 150%;"><span
style="font-size: 12.0pt; line-height: 150%; font-family: 宋体;" lang="EN-US"> </span></p>
<p class="MsoNormal" style="line-height: 150%;"><span
style="font-size: 12.0pt; line-height: 150%; font-family: 宋体;" lang="EN-US"> </span></p>
<p class="MsoNormal" style="line-height: 150%;"><span
style="font-size: 12.0pt; line-height: 150%; font-family: 宋体;" lang="EN-US"> </span></p>
<p class="MsoNormal" style="line-height: 150%;"><span
style="font-size: 12.0pt; line-height: 150%; font-family: 宋体;" lang="EN-US"> </span></p>
<p class="MsoNormal" style="line-height: 150%;"><span
style="font-size: 12.0pt; line-height: 150%; font-family: 宋体;" lang="EN-US"> </span></p>
<p class="MsoNormal" style="line-height: 150%;"><span
style="font-size: 12.0pt; line-height: 150%; font-family: 宋体;" lang="EN-US"> </span></p>
<p class="MsoNormal" style="text-indent: 28.5pt; line-height: 150%;"><span
style="font-size: 12.0pt; line-height: 150%; font-family: 宋体;" lang="EN-US"> </span><span
style="font-size: 12.0pt; line-height: 150%; font-family: 宋体;">具状人：<span lang="EN-US">XXX(</span>签名<span
lang="EN-US">)</span></span></p>
<p class="MsoNormal" style="text-indent: 28.5pt; line-height: 150%;"><span
style="font-size: 12.0pt; line-height: 150%; font-family: 宋体;" lang="EN-US"> X</span><span
style="font-size: 12.0pt; line-height: 150%; font-family: 宋体;">年<span lang="EN-US">X</span>月<span
lang="EN-US">X</span>日<span lang="EN-US"></span></span></p>
<p><span
style="font-size: 10.5pt; mso-bidi-font-size: 12.0pt; font-family: "Times New Roman"; mso-fareast-font-family: 宋体; mso-font-kerning: 1.0pt; mso-ansi-language: EN-US; mso-fareast-language: ZH-CN; mso-bidi-language: AR-SA;"
lang="EN-US"><br style="mso-special-character: line-break; page-break-before: always;"></span></p></div>
</div>
<!--endprint-->
</div>
</template>
<style scoped>
</style>
<script>
import { getLodop } from '@/utils/lodop'
export default {
name: 'Register',
components: {
},
data() {
return {
}
},
created() {
},
methods: {
// 查询数据
printPdf() {
let LODOP = getLodop();
LODOP.PRINT_INIT("起诉书");
LODOP.SET_PRINT_STYLE("FontSize", 18);
LODOP.SET_PRINT_STYLE("Bold", 1);
LODOP.ADD_PRINT_TEXT(50, 231, 260, 39, "打印页面部分内容");
LODOP.ADD_PRINT_HTM(88, 200, 350, 600,
document.getElementById("printMe").innerHTML);
// LODOP.PRINT();
LODOP.PREVIEW();
},
}
}
</script>
页面效果：
点击打印，执行js方法后启动插件：
至此，电脑连接打印机后，便可完成前端打印操作。工作之余，匆匆记录，如有不对请多指教。
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献3条内容
所有评论(0)