高端定制网站开发建站教程详解,小程序开发模板源码,不怕封号的直播间,天津搜索引擎seo一、找到对应厂商打印机的驱动并在windows上面安装。查看是否安装完成可以在#xff1a;控制面板-查看设备和打印机#xff0c;找到对应打印机驱动是否安装完成 二、打印机USB连接电脑
三、运行代码调用浏览器打印#xff0c;主要使用的是window.print()功能。下面使用…一、找到对应厂商打印机的驱动并在windows上面安装。查看是否安装完成可以在控制面板-查看设备和打印机找到对应打印机驱动是否安装完成 二、打印机USB连接电脑
三、运行代码调用浏览器打印主要使用的是window.print()功能。下面使用的是基于ifream的这样可以控制到具体打印范围全屏打印可以考虑不用。原理应该就是打印机打印PDF
四、打印样式不全或者其他可以考虑设置打印格式 或者 代码样式调整 五、demo 代码
(1) 核心代码 (2) 完整代码
templatediv classmainContent clickemits(close)div classprintContentiframe stylewidth: 100%;height: 100% :srcticketUrl refticketIframe loadonIframeLoad/iframediv classbtnPrint clickprintReceipt打印/div/div/div
/templatescript setup
import {forDate} from /utlis/uni_api;
import {ref, onMounted, getCurrentInstance, toRefs} from vue;let {proxy} getCurrentInstance();
let emits defineEmits([print, close])
let props defineProps([data])
const ticketIframe ref(null);
const ticketUrl ../static/print.html;
let {data} toRefs(props)
let merOrderList {}
let originalPrice
let sendTxt
let goodsDetails // 确保iframe加载完成
onMounted(async () {await proxy.$nextTick();ticketIframe.value.contentWindow.focus();merOrderList data.value.merOrderListlet proList data.value.goodListfor (let i 0; i proList.length; i) {let goodsName proList[i].goodsNamelet goodsNum proList[i].goodsNumlet realPrice proList[i].realPricelet spec proList[i].goodsSpecification//商品信息goodsDetails goodsName [ spec ] nbsp;Xnbsp; goodsNum nbsp;nbsp;nbsp;nbsp; realPrice /br}//原价originalPrice merOrderList.price merOrderList.discountsPrice//配送时间sendTxt data.value.isIm ? 立即配送 : data.value.predictTime
});function onIframeLoad() {console.log(data , data.value)let printerName uni.getStorageSync(printerName)let iframe ticketIframe.valuelet iframeDocument iframe.contentWindow ? iframe.contentWindow.document : iframe.contentDocument;// 对于跨域限制不适用的情况可以直接操作DOMif (iframeDocument) {if (printerName XP58C || printerName POS58) {iframeDocument.body.innerHTML ticketXP58C()}}
}function ticketXP58C() {return img stylewidth: 160px;height: 70px;margin: 0 0 30px 20px; src../static/image/public/print_logo.pngdiv stylefont-size: 20px;font-weight: bold;margin-bottom: 20px;#${data.value.dayNum}nbsp;nbsp;nbsp;*外卖狮配送*/divdiv stylefont-size: 10px;margin-bottom: 4px;-----------------------------------------------/divdiv styledisplay: flex;justify-content: space-between;font-size: 11px;margin-bottom: 4px;div送达时间:/divdiv${sendTxt}/div/divdiv styledisplay: flex;justify-content: space-between;font-size: 11px;margin-bottom: 4px;span下单时间/spanspan${forDate(merOrderList.createTime)}/span/divdiv styledisplay: flex;justify-content: space-between;font-size: 11px;margin-bottom: 4px;div订单编号:/divdiv${merOrderList.orderSn}/div/divdiv stylefont-size: 10px;margin-bottom: 4px;-----------------------------------------------/divdiv styledisplay: flex;font-size: 18px;font-weight:bold;margin-bottom: 4px;span备注/spanspan${data.value.remark ? data.value.remark : 无}/span/divdiv stylefont-size: 12px;margin-bottom: 4px;*************************************/divdiv stylefont-size: 11px;margin-bottom: 4px;---------------------餐品------------------/divdiv stylefont-size: 11px;margin-bottom: 4px;${goodsDetails}/divdiv stylefont-size: 11px;margin-bottom: 4px;---------------------其他------------------/divdiv styledisplay: flex;justify-content: space-between;font-size: 11px;margin-bottom: 4px;span打包费/spanspan${merOrderList.packPrice}/span/divdiv styledisplay: flex;justify-content: space-between;font-size: 11px;margin-bottom: 4px;span配送费/spanspan${merOrderList.distributionPrice}/span/divdiv styledisplay: flex;justify-content: space-between;font-size: 11px;margin-bottom: 4px;span优惠价格/spanspan-${merOrderList.discountsPrice}/span/divdiv stylefont-size: 12px;margin-bottom: 4px;*************************************/divdiv styledisplay: flex;justify-content: space-between;font-size: 11px;margin-bottom: 4px;${merOrderList.payType alipay ? 支付宝支付 : 微信支付}/divdiv styledisplay: flex;justify-content: space-between;font-size: 11px;margin-bottom: 4px;原价${originalPrice}/divdiv styledisplay: flex;justify-content: right;font-size: 18px;font-weight: bold;margin-bottom: 4px;实付${merOrderList.price}/divdiv stylefont-size: 10px;margin-bottom: 30px;------------------------------------------------/divdiv styledisplay: flex;font-size: 18px;font-weight: bold;margin-bottom: 20px;${data.value.name} ${data.value.phone.substr(0, 3) **** data.value.phone.substr(data.value.phone.length - 4, data.value.phone.length)}/divdiv stylefont-size: 12px;margin-bottom: 60px;*************************************/divdiv stylefont-size: 1px;-/div//地址// div style display: flex;font-size: 18px;font-weight: bold;margin-bottom: 15px; // ${merOrderList.address}// /div
}function printReceipt() {emits(close)ticketIframe.value.contentWindow.print(); // 调用iframe内部的window.print()proxy.$refs.ticketIframe.contentWindow.location.reload(true);
}
/scriptstyle scoped
.mainContent {position: fixed;top: 0;left: 0;width: 100%;height: 100%;min-height: 100vh;background-color: rgba(0, 0, 0, 0.5);z-index: 999999;display: flex;align-items: center;justify-content: center;
}.printContent {width: 70%;height: 50vh;background-color: #FFFFFF;box-sizing: border-box;display: flex;flex-direction: column;align-items: center;border-radius: 10rpx;padding: 20rpx;
}.btnPrint {width: 50%;margin: 80rpx auto 20rpx;font-size: 26rpx;color: #FFFFFF;background-color: #FF0000;text-align: center;padding: 10rpx 0;border-radius: 10rpx;
}iframe {border: none;
}
/style
