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

1、组件webview<template><div class="page"><webview class="webview" src="/static/print_order.html" nodeintegration></webview></div></

玄木郞

2801人浏览 · 2021-10-09 16:16:43

玄木郞 · 2021-10-09 16:16:43 发布

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

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^