checkPrint.vue
<template>
<div>
<a-card title="支票内容明细" :headStyle="tStyle" style="height:700px;">
<p style="color: red;">如若打印控件未安装!点击这里 <vxe-button status="danger" @click="clickEvent10">下载打印驱动</vxe-button>执行安装,安装后请刷新页面或重新进入。</p>
<vxe-form :data="form" @submit="findList" :rules="rules">
<vxe-form-item title="收款人" field="payee" :item-render="{}" span="13">
<template #default="{ data }">
<vxe-input v-model="data.payee" placeholder="请输入收款人名称" ></vxe-input>
</template>
</vxe-form-item>
<vxe-form-item title="金额" field="amount" :item-render="{}" span="13">
<template #default="{ data }">
<vxe-input v-model="data.amount" placeholder="请输入金额"></vxe-input>
</template>
</vxe-form-item>
<vxe-form-item title="用途" field="purpose" :item-render="{}" span="13">
<template #default="{ data }">
<vxe-input v-model="data.purpose" placeholder="请输入用途"></vxe-input>
</template>
</vxe-form-item>
<vxe-form-item title="出票日期" field="draftData" :item-render="{}" span="13">
<template #default="{ data }">
<vxe-input v-model="data.draftData" type="date" placeholder="请输入出票日期" clearable ></vxe-input>
</template>
</vxe-form-item>
<vxe-form-item span="13">
<template #default>
<vxe-button type="submit" status="primary">确定并浏览打印内容</vxe-button>
<vxe-button type="reset">重置</vxe-button>
</template>
</vxe-form-item>
</vxe-form>
</a-card>
</div>
</template>
<script>
import { getLodop } from '@/utils/lodop/lodop.js'
import imgsrc from '@/assets/支票底版.jpg'
import VXETable from 'vxe-table'
export default {
data() {
return {
imgsrc,
tStyle:{"font-weight": "bold"},
data: {
payee: '', // 收款人
amount: '',// 金额
bigAmount:'',//人民币大写
purpose:'',// 用途
draftData:'',// 出票日期大写
money:'',// 左下角的金额
date:[],// 出票日期
str2:[], // 框框里的金额数组
},
form: {
payee: '', // 收款人
amount: '',// 金额
purpose:'',// 用途
draftData:'',// 出票日期
},
rules: {
payee: [
{ required: true, message: '请输入收款人' },
],
amount: [
{ required: true, message: '请输入金额' }
],
purpose: [
{ required: true, message: '请输入用途' }
],
draftData: [
{ required: true, message: '请输入出票日期' }
]
}
}
},
created() {
},
methods: {
clickEvent10 () {
window.open(encodeURI(window._CONFIG['domianURL'] + '/sys/common/download/' + 'files/20230406/lodop_1680752809992.zip'));
},
printPdf(data) {
let LODOP = getLodop()
if (LODOP===undefined) {
VXETable.modal.alert({ content: '还未安装打印驱动,请下载打印驱动', status: 'warning' })
return
}
LODOP.PRINT_INITA(0,0,908,336,"");
LODOP.SET_PRINT_MODE("PRINT_NOCOLLATE",1);
LODOP.ADD_PRINT_SETUP_BKIMG(`"<img border='0' src=${this.imgsrc}>"`);//背景图
LODOP.SET_SHOW_MODE("BKIMG_LEFT",0);
LODOP.SET_SHOW_MODE("BKIMG_TOP",0);
LODOP.SET_SHOW_MODE("BKIMG_WIDTH","236.27mm");//设置纸张长度
LODOP.SET_SHOW_MODE("BKIMG_HEIGHT","79.9mm");//设置纸张高度
LODOP.SET_SHOW_MODE("BKIMG_IN_PREVIEW",true); // 预览的时候带背景
LODOP.ADD_PRINT_TEXT(114,645,13,20,data.str2[10]);//亿
LODOP.SET_PRINT_STYLEA(0,"Bold",1);
LODOP.ADD_PRINT_TEXT(114,659,13,20,data.str2[9]);//千万
LODOP.SET_PRINT_STYLEA(0,"Bold",1);
LODOP.ADD_PRINT_TEXT(114,675,13,20,data.str2[8]);// 百万
LODOP.SET_PRINT_STYLEA(0,"Bold",1);
LODOP.ADD_PRINT_TEXT(114,691,13,20,data.str2[7]);// 十万
LODOP.SET_PRINT_STYLEA(0,"Bold",1);
LODOP.ADD_PRINT_TEXT(114,705,13,20,data.str2[6]);// 万
LODOP.SET_PRINT_STYLEA(0,"Bold",1);
LODOP.ADD_PRINT_TEXT(114,720,13,20,data.str2[5]);// 千
LODOP.SET_PRINT_STYLEA(0,"Bold",1);
LODOP.ADD_PRINT_TEXT(114,736,13,20,data.str2[4]);// 百
LODOP.SET_PRINT_STYLEA(0,"Bold",1);
LODOP.ADD_PRINT_TEXT(114,752,13,20,data.str2[3]);// 十
LODOP.SET_PRINT_STYLEA(0,"Bold",1);
LODOP.ADD_PRINT_TEXT(114,767,13,20,data.str2[2]);// 元
LODOP.SET_PRINT_STYLEA(0,"Bold",1);
LODOP.ADD_PRINT_TEXT(114,782,13,20,data.str2[1]);// 角
LODOP.SET_PRINT_STYLEA(0,"Bold",1);
LODOP.ADD_PRINT_TEXT(114,797,13,20,data.str2[0]);// 分
LODOP.SET_PRINT_STYLEA(0,"Bold",1);
LODOP.ADD_PRINT_TEXT(166,72,33,16,data.date[0]); //日期年
LODOP.SET_PRINT_STYLEA(0,"FontSize",8);
LODOP.ADD_PRINT_TEXT(166,112,22,14,data.date[1]);// 日期月
LODOP.SET_PRINT_STYLEA(0,"FontSize",8);
LODOP.ADD_PRINT_TEXT(165,138,27,13,data.date[2]);// 日期日
LODOP.SET_PRINT_STYLEA(0,"FontSize",8);
LODOP.ADD_PRINT_TEXT(191,65,115,20,data.payee);// 付款人
LODOP.SET_PRINT_STYLEA(0,"FontSize",8);
LODOP.ADD_PRINT_TEXT(228,75,114,16,data.money);// 左下角金额
LODOP.SET_PRINT_STYLEA(0,"FontSize",8);
LODOP.ADD_PRINT_TEXT(246,70,120,24,data.purpose);// 用途
LODOP.SET_PRINT_STYLEA(0,"FontSize",8);
LODOP.ADD_PRINT_TEXT(60,356,55,17,data.draftData.year);// 日期大写年
LODOP.SET_PRINT_STYLEA(0,"FontSize",8);
LODOP.ADD_PRINT_TEXT(59,435,36,17,data.draftData.month);// 日期大写月
LODOP.SET_PRINT_STYLEA(0,"FontSize",8);
LODOP.ADD_PRINT_TEXT(58,491,46,20,data.draftData.day);// 日期大写日
LODOP.SET_PRINT_STYLEA(0,"FontSize",8);
LODOP.ADD_PRINT_TEXT(107,302,338,25,data.bigAmount);// 金额大写
LODOP.SET_PRINT_STYLEA(0,"FontSize",11);
LODOP.ADD_PRINT_TEXT(144,295,256,20,data.purpose);//用途
LODOP.SET_PRINT_STYLEA(0,"FontSize",8);
// LODOP.SET_PRINT_STYLEA(0,"LetterSpacing",9);
LODOP.ADD_PRINT_TEXT(206,21,145,20,"");
LODOP.SET_PRINT_STYLEA(0,"FontSize",8);
LODOP.ADD_PRINT_TEXT(79,302,279,20,data.payee);// 左下角付款人
LODOP.SET_PRINT_PAGESIZE(2)
//LODOP.PREVIEW()// 打印预览
LODOP.PRINT_SETUP() // 手动维护
},
// 金额数字转大写
digitUppercase(price) {
const fraction = ['角', '分']
const digit = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖']
const unit = [
['元', '万', '亿'],
['', '拾', '佰', '仟']
]
let num = Math.abs(price)
let s = ''
fraction.forEach((item, index) => {
s += (digit[Math.floor(num * 10 * (10 ** index)) % 10] + item).replace(/零./, '')
})
s = s || '整'
num = Math.floor(num)
for (let i = 0; i < unit[0].length && num > 0; i += 1) {
let p = ''
for (let j = 0; j < unit[1].length && num > 0; j += 1) {
p = digit[num % 10] + unit[1][j] + p
num = Math.floor(num / 10)
}
s = p.replace(/(零.)*零$/, '').replace(/^$/, '零') + unit[0][i] + s
}
return s.replace(/(零.)*零元/, '元').replace(/(零.)+/g, '零').replace(/^整$/, '零元整')
},
// 点击确定触发的事件
findList(){
this.data={
payee:this.form.payee,
amount:+this.form.amount,
purpose:this.form.purpose,
draftData:this.convertChineseDate(this.form.draftData),
payingBank:this.form.payingBank,
issuerAccount:this.form.issuerAccount,
lineNum:this.form.lineNum,
}
this.data.amount=this.data.amount.toFixed(2)
this.data.money='¥'+this.numFormat(this.data.amount)
this.str(this.data.amount)
this.data.date=this.form.draftData.split('-')
this.data.bigAmount=this.digitUppercase(this.data.amount)
this.printPdf(this.data) //启动打印
},
// 支票日期时间转换为中文大写
convertChineseDate(dateStr) {
let date = new Date(dateStr);
let chinese = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'];
let y = date.getFullYear().toString();
let m = (date.getMonth() + 1).toString();
let d = date.getDate().toString();
let result = {
year:'',
month:'',
day:''
};
//年
for (let i = 0; i < y.length; i++) {
result.year += chinese[y.charAt(i)];
}
// result += '年';
//月
if (m.length == 2) {
let temp = '拾';
if (m.charAt(1) != '0') {
temp += chinese[m.charAt(1)];
}
result.month += temp;
} else {
let i='零'
i+=chinese[m]
result.month +=i;
}
// result += '月';
//日
if (d.length == 2) {
let temp = '';
if (d.charAt(0) != '1') {
temp += chinese[d.charAt(0)];
}
temp += '拾';
if (d.charAt(1) != '0') {
temp += chinese[d.charAt(1)];
}
result.day += temp;
} else {
let i='零'
i+=chinese[d]
result.day += i;
}
// result += '日';
return result;
},
// 分割字符串
str(str1){
if (str1.length<12) {
str1='¥'+str1
}
str1=str1.replace('.','')
this.data.str2=str1.split('')
this.data.str2=this.data.str2.reverse()
},
// 将带小数的数字转为千分位
numFormat(num){
num=num.toString().split("."); // 分隔小数点
var arr=num[0].split("").reverse(); // 转换成字符数组并且倒序排列
var res=[];
for(var i=0,len=arr.length;i<len;i++){
if(i%3===0&&i!==0){
res.push(","); // 添加分隔符
}
res.push(arr[i]);
}
res.reverse(); // 再次倒序成为正确的顺序
if(num[1]){ // 如果有小数的话添加小数部分
res=res.join("").concat("."+num[1]);
}else{
res=res.join("");
}
return res;
}
}
}
</script>
<style lang="scss" scoped></style>
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] >= 42 || 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] >= 42) return true
}
}
return false
} catch (err) {
return true
}
}
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)
oscript = document.createElement('script')
oscript.src = 'http://localhost:18000/CLodopfuncs.js?priority=0'
head.insertBefore(oscript, head.firstChild)
}
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.c-lodop.com/download/CLodop_Setup_for_Win32NT_https_3.008Extend.zip' target='_self'>执行安装</a>,安装后请刷新页面。</font>"
var strCLodopUpdate =
"<br><font color='#FF00FF'>CLodop云打印服务需升级!点击这里<a href='CLodop_Setup_for_Win32NT.exe' target='_self'>执行升级</a>,升级后请刷新页面。</font>"
var LODOP
try {
var isIE =
navigator.userAgent.indexOf('MSIE') >= 0 ||
navigator.userAgent.indexOf('Trident') >= 0
if (needCLodop()) {
try {
LODOP = getCLodop()
} catch (err) {}
if (!LODOP && document.readyState !== 'complete') {
return
}
if (!LODOP) {
} else {
if (CLODOP.CVERSION < '3.0.0.2') {
if (isIE) document.write(strCLodopUpdate)
else
document.documentElement.innerHTML =
strCLodopUpdate + document.documentElement.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
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:absoluteleft:0pxtop:-100pxwidth:0pxheight: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
if (LODOP == null || typeof LODOP.VERSION == 'undefined') {
if (navigator.userAgent.indexOf('Chrome') >= 0)
document.documentElement.innerHTML =
strHtmChrome + document.documentElement.innerHTML
if (navigator.userAgent.indexOf('Firefox') >= 0)
document.documentElement.innerHTML =
strHtmFireFox + document.documentElement.innerHTML
if (is64IE) document.write(strHtm64_Install)
else if (isIE) document.write(strHtmInstall)
else
document.documentElement.innerHTML =
strHtmInstall + document.documentElement.innerHTML
return LODOP
}
}
if (LODOP.VERSION < '6.0') {
if (!needCLodop()) {
if (is64IE) document.write(strHtm64_Update)
else if (isIE) document.write(strHtmUpdate)
else
document.documentElement.innerHTML =
strHtmUpdate + document.documentElement.innerHTML
}
return LODOP
}
return LODOP
} catch (err) {
}
}