优化
This commit is contained in:
@@ -7,114 +7,58 @@
|
||||
<meta charset="UTF-8" />
|
||||
<title>Print preview</title>
|
||||
<style>
|
||||
#app {
|
||||
padding: 30px;
|
||||
}
|
||||
.header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
.t1 {
|
||||
section {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.t2 {
|
||||
font-size: 18px;
|
||||
}
|
||||
.time {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.thead {
|
||||
display: flex;
|
||||
}
|
||||
.thead .item {
|
||||
flex: 1;
|
||||
font-weight: bold;
|
||||
}
|
||||
.tbody .tr {
|
||||
padding: 10px 0;
|
||||
display: flex;
|
||||
}
|
||||
.tbody .tr .item {
|
||||
flex: 1;
|
||||
}
|
||||
.html2cavas {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app">
|
||||
<div class="html2cavas">
|
||||
<div>---------------</div>
|
||||
<div>---------------</div>
|
||||
<div>---------------</div>
|
||||
<div>---------------</div>
|
||||
<div>---------------</div>
|
||||
<div>---------------</div>
|
||||
<ESC> "@"
|
||||
<ESC> "|cA" "Sample Text" <LF>
|
||||
<ESC> "|cA" "Price: $10.00" <LF>
|
||||
<ESC> "|cA" "Thank you!" <LF>
|
||||
<ESC> "d" "n" <LF>
|
||||
<pre style="text-align: center">{{data.shop_name || '结账单位'}}</pre>
|
||||
<div class="header">
|
||||
<div class="t2">结账单</div>
|
||||
</div>
|
||||
<div class="time">开始时间: 2024/3/7 09:56:23</div>
|
||||
<div class="time">结束时间: 2024/3/8 13:11:07</div>
|
||||
<div class="thead">品相 数量 单位 单价 小计 注</div>
|
||||
<div class="tbody">
|
||||
<div v-for="item in data.carts" :key="item.id" class="tr">
|
||||
{{item.name}} x{{item.number}} x{{item.number}} {{item.unitName}}
|
||||
{{item.salePrice}} {{item.salePrice}}
|
||||
</div>
|
||||
</div>
|
||||
<div>优惠信息</div>
|
||||
<div><br /></div>
|
||||
<div>赠送优惠:{{data.amount}}</div>
|
||||
<div><br /></div>
|
||||
<div>结算方式</div>
|
||||
<div>---------------</div>
|
||||
<div>---------------</div>
|
||||
<div>---------------</div>
|
||||
<div>---------------</div>
|
||||
<div>---------------</div>
|
||||
<div class="html2canvas" style="position: fixed;top: -1000%;">
|
||||
<section style="font-size: 22px;">#B1 B2</section>
|
||||
<section style="font-size: 22px;">喔喔奶茶 x12</section>
|
||||
<section style="font-size: 22px;">麻辣味</section></section></section>
|
||||
<section style="font-size: 22px;">03-08 16:32 ¥123.00</section>
|
||||
</div>
|
||||
<!-- <section>我是标签111</section>
|
||||
<section>我是标签222</section>
|
||||
<section>我是标签333</section>
|
||||
<section>我是标签444</section> -->
|
||||
</div>
|
||||
<script type="module">
|
||||
const { ipcRenderer } = require("electron");
|
||||
import {
|
||||
createApp,
|
||||
ref,
|
||||
onMounted,
|
||||
} from "../node_modules/vue/dist/vue.esm-browser.js";
|
||||
// import {
|
||||
// createApp,
|
||||
// ref,
|
||||
// onMounted,
|
||||
// } from "../node_modules/vue/dist/vue.esm-browser.js";
|
||||
|
||||
createApp({
|
||||
setup() {
|
||||
const data = ref({});
|
||||
import html2canvas from '../node_modules/html2canvas/dist/html2canvas.esm.js'
|
||||
|
||||
onMounted(() => {
|
||||
ipcRenderer.on("getParams", (event, arg) => {
|
||||
// console.log(arg);
|
||||
data.value = JSON.parse(arg);
|
||||
ipcRenderer.send("printStart");
|
||||
});
|
||||
});
|
||||
html2canvas(document.querySelector('.html2canvas')).then(canvas => {
|
||||
console.log(canvas)
|
||||
document.querySelector('#app').appendChild(canvas)
|
||||
}).catch(err=> {
|
||||
console.log(err);
|
||||
})
|
||||
|
||||
return {
|
||||
data,
|
||||
};
|
||||
},
|
||||
}).mount("#app");
|
||||
// createApp({
|
||||
// setup() {
|
||||
// const data = ref({});
|
||||
|
||||
// onMounted(() => {
|
||||
// ipcRenderer.on("getParams", (event, arg) => {
|
||||
// // console.log(arg);
|
||||
// data.value = JSON.parse(arg);
|
||||
|
||||
// setTimeout(() => {
|
||||
// ipcRenderer.send("printStart");
|
||||
// },500)
|
||||
// });
|
||||
// });
|
||||
|
||||
// return {
|
||||
// data,
|
||||
// };
|
||||
// },
|
||||
// }).mount("#app");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user