互联网官方网站,软件开发项目计划,淘宝内部优惠券网站怎么建设,深圳小程序app开发前言#xff1a;临时性需求没怎么接触过前端#xff0c;代码实现有问题及优化点希望大佬可以留言告知一下
开发工具#xff1a;VS CODE
界面开发#xff1a;Vue3TypeScriptElementPlus
打印组件#xff1a;Print-JS
前端打印入口图#xff1a; 标签页面#xff1a; …前言临时性需求没怎么接触过前端代码实现有问题及优化点希望大佬可以留言告知一下
开发工具VS CODE
界面开发Vue3TypeScriptElementPlus
打印组件Print-JS
前端打印入口图 标签页面 打印界面 实现功能前端点击打印标签弹出打印界面进行打印作业
实现过程主界面点击打印标签调用el-dialog弹窗(预览和直接打印都居于弹窗实现) 标签模板代码
templatediv classLabelPrint-Listel-dialog v-modelstate.isShowDialog draggable :close-on-click-modalfalse width50% template #headerdiv stylecolor: #fffel-icon size16 stylemargin-right: 3px; display: inline; vertical-align: middle ele-Edit/ /el-iconspan标签打印界面/span/div/templateel-row :gutter10el-col :xs24 :sm24 :md24 :lg24 :xl24 classmb10div v-foritem in state.Datasel-card classbox-card stylewidth:100mm; height: 90mm;display: block; div :iditem.id?.toString()!-- print-js --div classlabelHeadBodydiv classlabelHeadBodyLeftHeadimg classlabelHeadBodyLeftHeadimage src/image/点金log.png fitfill //divdiv classlabelHeadBodyRightHeadtable classtableHeadtrtd classlabelHeadBodyRightHeadTd某某有限公司/td/trtrtd classlabelHeadBodyRightHeadTd物料标识卡/td/tr/table/div/divdiv classlabelBodytabletbodytrtd classlableBodytdleftP/N/tdtd classlableBodytdright{{ item.produceNo }}/td/trtrtd classlableBodytdleft数量/tdtd classlableBodytdright{{ item.quantity }}/td/trtrtd classlableBodytdleft规格/tdtd classlableBodytdright lableBodytdrightfont{{ item.platingSpecs }}/td/trtrtd classlableBodytdleft供应商/tdtd classlableBodytdright东莞点金/td/trtrtd classlableBodytdleft生产日期/tdtd classlableBodytdright{{moment(String(item.createTime)).format(YYYY/MM/DD)}}/td/trtrtd classlableBodytdleft批次单号/tdtd classlableBodytdright{{ item.lot }}/td/trtrtd classlableBodytdleft单重/tdtd classlableBodytdright{{ item.singleWeight }}/td/trtrtd classlableBodytdleft总重/tdtd classlableBodytdright{{ item.sumWeight }}/td/trtrtd classlableBodytdleft标识人/tdtd classlableBodytdright/td/tr/tbody/table/div/div/el-card/div/el-col/el-rowtemplate #footerspan classdialog-footerel-button clickcancel取 消/el-buttonel-button stylebackground-color:red;color:white clickprint打 印/el-button/span/template /el-dialog/div
/template
Typescript代码
printrow 方法中使用nextTick是当el-dialog弹窗DOM加载完成后在调用PrintJS获取需要打印的区域这个直接打印过程其实会先弹窗然后DOM加载完成后直接调用浏览器打印界面后面把弹出关闭如果不加载el-dialog可以通过动态加载html内容来实现直接打印我这里图方便就用该方法实现了。
printJS({printable:区域id,type:打印类型(pdf\image\html等),style:打印内容的CSS样式})
注意style参数值按打印区域的HTMLCSS样式构建调用printJS设置scanStyles:false不会自动加载HTML的CSS样式需要重新给Style参数赋值所以增加了一个printStyle函数scanStyles默认值是true(会导致打印界面的内容奇奇怪怪还没去了解详细原因哈哈哈哈)
script langts setup
import { ref,reactive,nextTick } from vue;
import { TbProduceOrderNoInfo } from //api-services;
import printJS from print-js;
import moment from moment;
const propsdefineProps({title:String
})const statereactive({isShowDialog:false,Datas:[] as ArrayTbProduceOrderNoInfo,
})const emits defineEmits([handleQuery]);
const closeDialog(){emits(handleQuery);state.isShowDialogfalse;
}const cancel(){state.isShowDialogfalse;closeDialog();
}//预览打印
const openDialogasync(row:any){state.DatasJSON.parse(JSON.stringify(row));state.isShowDialogtrue;
}const print(){for(var i0;istate.Datas.length;i){printJS({printable:${state.Datas[i].id},type:html,style:printStyle(),scanStyles:false})}
}//直接打印不预览
const printrowasync(row:any){state.DatasJSON.parse(JSON.stringify(row));state.isShowDialogtrue;//主界面form DOM加载完成nextTick((){//弹窗加载完成nextTick((){printJS({printable:${state.Datas[0].id},type:html,style:printStyle(),scanStyles:false})state.isShowDialogfalse;})})
}//打印界面的CSS样式
const printStyle(){return
.labelHeadBody{display: flex;justify-content:space-between;margin: 0; font-size: 16px;width: 100%; height:45px
}
.labelHeadBodyLeftHead{width: 30px;
}
.labelHeadBodyRightHead{width: 250px; height: 70px;display: flex;justify-content: center;
}
.lableBodytdrightfont{font-size:10px
}
.labelHeadBodyRightHeadTd{padding: 0;font-size: 14px;font-weight: bold;text-align: center;vertical-align: middle;
}
.labelBody{margin-left: 5px;margin-right: 5px;
}
.lableBodytdleft{width: 30%;font-weight: bold;vertical-align: bottom;}.lableBodytdright{width: 70%; border-bottom: 1px solid;
}
.labelHeadBodyLeftHeadimage{width: 70px; height: 40px
}
.tableHead{height: 20px;
};
}//预览、直接打印
defineExpose({openDialog,printrow})
/script
标签前端样式代码
style
.labelHeadBody{display: flex;justify-content:space-between;margin: 0; font-size: 16px;width: 100%;
}
.labelHeadBodyLeftHead{width: 30px;
}
.labelHeadBodyRightHead{width: 250px; height: 70px;display: flex;justify-content: center;
}.labelHeadBodyRightHeadTd{padding: 0;font-size: 14px;font-weight: bold;text-align: center;vertical-align: middle;
}
.labelBody{margin-top: 10px;margin-left: 5px;margin-right: 5px;
}
.lableBodytdleft{width: 30%;font-weight: bold;vertical-align: bottom;}
.lableBodytdright{width: 75%; border-bottom: 1px solid;
}
.labelHeadBodyLeftHeadimage{width: 80px; height: 55px
}
.tableHead{height: 20px;
}
/style
最后如果需要带二维码的同学可以添加qrcode组件以下是简单的实现el-image、img标签中图片不显示的问题还没解决迂回操作直接把生成的二维码图片设置成控件背景来处理囧.........
template #defaultscopediv :stylecreateQrcode(scope.row.eqNo) /div!-- el-image :scrcreateQrcode1(scope.row.eqNo) stylewidth: 60px;height: 60px;/el-image --
/templateimport QRCode from qrcode//将生成的二维码设置成div的Style不知道为嘛el-image绑定base64image图片不显示
const createQrcode(text:string){if(text||textundefined||textnull) return ;let url1:any;url1; QRCode.toDataURL(text,(err,url){if(err){console.error(err);}else{url1url;}})return background-image: url(${url1});background-position: center center;background-size: contain;background-repeat: no-repeat;;width:100%;height:60px;
}
