vue+element小票打印、58小票打印机

1、组件webview

<template><div class="page"><el-button @click="webviewMessage()">打印</el-button><!-- 打印视图 --><webview class="webview" src="/static/print_order.html" nodeintegration>   </webview><!-- 打印视图 --></div>
</template>export default {methods: {/*** 进入打印* @param {Object} printerData*/webviewMessage() {let that = this;let webview = document.querySelector('webview');// webview.openDevTools(); //这个方法可以打开print.html的控制台let printerData = {};printerData.print_tilte = '销售单'webview.send('ping', printerData);let handler = function() {if (webview.removeEventListener) {webview.removeEventListener("ipc-message", handler, false);} else {// ie8及以下，只支持事件冒泡webview.detachEvent("ipc-message", handler);}if (event.channel == 'print_order') {webview.print({silent: true,printBackground: true,dpiHorizontal: 200,dpiVertical: 200,deviceName: localStorage.getItem('defaultPrinter')},data => {if (data) {that.$message.success('已传输到打印设备，请确认是否打印!');} else {that.$message.error('打印失败!');}that._data.loading = false;console.log('webview success', data);});}}webview.addEventListener('ipc-message', handler);},}

2、静态打印页面

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><!-- <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> --><script src="vue.min.js"></script><script src="qrcode.min.js"></script><title>print</title><style>@page {margin: 0;background-color: #000000;}* {font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;padding: 0;margin: 0;color: #000000;}#app {float: left;width: 5.8cm;font-size: 13px;line-height: 20px;}.items {/* background-color: #EEEEEE; */float: left;/* font-weight: 500; *//* padding-left: 20px; */padding-right: 20px;color: #000000;font-weight: 500;}.items .item {float: left;width: 100%;}.items .title {text-align: center;}.goods_items {display: flex;}.goods_item {flex: 1;text-align: center;}.goods_items .frist_item {flex: 1.5;}.goods_items .left_item {text-align: left !important;}.goods_items .right_item {text-align: right !important;}</style></head><body><div id="app"><div class="items"><div class="left_item">品名/货号</div><div class="goods_items"><div class="goods_item frist_item left_item">规格</div><div class="goods_item">数量</div><div class="goods_item">单价</div><div class="goods_item right_item">金额</div></div></div></div></body><script>//引入ipcRenderer对象const {ipcRenderer} = require('electron')new Vue({el: "#app",data: {hasData: false,printerData: {print_tilte: "销售单",orders: {},}},mounted() {let that = this;ipcRenderer.on('ping', (e, data) => { //接收响应that._data.printerData = data;setTimeout(() => {ipcRenderer.sendToHost('print_order') //向webview所在页面的进程传达消息}, 1200)})},updated() {},methods: {}})</script></html>

vue+element小票打印、58小票打印机相关推荐

指定打印机打印、条码、小票打印 web端打印机控件 LODOP的使用
最近项目需要指定打印机进行前台后厨小票同时打印 1.首先安装LODOP插件点击下载 2 将LodopFuncs.js文件复制到自己项目注意:vue项目需要底部添加 export { getLodop ...
Java调用不同的打印机实现打印不同小票
Java调用不同的打印机实现打印不同小票前言,在餐馆中,为了满足商家的需要,当顾客下订单后,前台打印机需要打印出订单的信息给顾客,后台打印机需要打印出菜品分单给厨师.怎么样让一台计算机来控制多台打印 ...
android 蓝牙打印机（ESC/POS 热敏打印机），打印菜单小票和图片，对蓝牙配对和连接打印功能进行了封装，让你超快实现蓝牙打印功能
BluetoothPrint 项目地址:liuGuiRong18/BluetoothPrint 简介:android 蓝牙打印机(ESC/POS 热敏打印机),打印菜单小票和图片,对蓝牙配对和连接打 ...
Android打印机--小票打印格式及模板设置
小票打印就是向打印设备发送控制打印格式的指令集,而这些打印格式需要去查询对应打印机的API文档,这里我把常用的api给封装了一下文字对齐方式打印字体大小字体是否加粗打印二维码打印条形码切纸 ...
餐厅小票打印模板_高中学生与口袋打印机
1.口袋打印机的良好推荐(一) Julius koo:想买个错题打印机,大家有什么好的打印机推荐一下的嘛,质量要好一点的?www.zhihu.com 2.口袋打印机的良好推荐(二) 1.喵喵机主要是 ...
单据小票打印模板自定义设计，手机收银软件APP搭配蓝牙便携打印机，移动便携打印零售单单据小票
单据小票打印模板自定义设计,手机收银软件APP搭配蓝牙便携打印机,移动便携打印零售单单据小票,轻松实现仓库条码管理,扫码入库出库盘点_哔哩哔哩_bilibili单据小票打印模板自定义设计,手机收银软件 ...
pyqt5 listview 不默认选中_pyqt5 商店小票打印的实现模板
说明最近在用pyqt5做商店小票打印,用的是得力DL-581PW(NEW)热敏小票打印机. 商店小票打印,属于escpos打印. 在网上找了很多实现方法,看了很多相关文章,经历了很多困难,最后终于实 ...
java小票_Java编程打印购物小票实现代码
简单介绍运行环境: 语言:Java 工具:eclipse 系统:Windows7 (打印设备暂时没有,所以只能提供预览图) 最近,项目需要为商城做一个购物小票的打印功能,日常我们去超市买东西,结账的时 ...
USB小票打印解决办法
转载的:https://blog.csdn.net/ghs79/article/details/46543845 \?\USB#VID_8866&PID_0100#0001B0000000#{ ...
java打印小票的时间_Java编程打印购物小票实现代码
这篇文章主要介绍了Java编程打印购物小票实现代码,具有一定参考价值,需要的朋友可以了解下. 简单介绍运行环境: 语言:Java 工具:eclipse 系统:Windows7 (打印设备暂时没有,所以 ...

vue+element小票打印、58小票打印机

vue+element小票打印、58小票打印机相关推荐

最新文章

热门文章