זקוק בדחיפות לעזרה.
יש לי אובייקט עם פרטים של רוכשים, ואני רוצה להדפיס את כל הרוכשים עם ברקוד QR שלהם, בדפים A4 כל אחד בנפרד, יש לי את הקוד הזה, שחבר בנה לי, אני יושב על זה כבר כמה ימים, ועדין לא מצליח לכוון ולדייק אותו, לפעמים בורח לי מעמוד לעמוד, לפעמים מוסיף דף לבן, הרבה משחק עם השוליים ולא מצליח להגיע למבנה יציב שיעבוד טוב במחשב ובטאבלט.
אשמח לעזרה לייצב את זה בצורה שיחה ואחידה לכל הפלטפורמות, או אפילו בדרך אחרת.
תודה רבה.
אשמח לשלם.
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcode-generator/1.4.4/qrcode.min.js"
integrity="sha512-ZDSPMa/JM1D+7kdg2x3BsruQ6T/JpJo3jWDWkCZsP+5yVyp1KfESqLI+7RqB5k24F7p2cV7i2YHh/890y6P6Sw=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
@media print {
@page {
size: 210mm 297mm;
/* margin:0mm;
margin-top: 15mm
margin-right: 80mm
margin-left: 80mm */
}
}
body {
font-size: 14px;
text-align: center;
font-family: system-ui;
/* margin-right:50mm
margin-left:50mm */
}
.idcard {
background-color: #80808026;
width: 70%;
/* margin: 2mm;*/
}
section {
display: flex;
align-items: center;
justify-content: center;
}
.semmale {
font-weight: 400;
}
.ms2 {
font-weight: 800;
font-size: 15px;
}
.item.qr {
height: 150px;
width: 150px;
}
.ms {
font-weight: 800;
font-size: 15px;
}
.sem {
font-weight: 800;
font-size: 13px;
}
.pagesize {
/*width:35mm;*/
height: 276mm;
/* margin: 0mm;
border: 1px solid black;*/
}
.barcode-img, .username {
padding: 3px;
margin: 3px;
}
</style>
</head>
<body>
<div id="example-1">
<div class="pagesize" v-for="item in data_computed" :key="item.message">
<!--img src="item.imeg"-->
<div v-if="item.type_item == 'card'">
<!--div class="barcode">{{ item.ms }}</div>
<div class="idcard">{{ item.ms }}</div-->
<!--svg id="Barcode + item.idtorem + 'ms' + item.ms"></svg-->
<!-- <canvas class="canvas" v-bind:id="item.semmale" onload="buildQR(item.semmale, this)"></canvas> -->
<section>
<div class="barcode-img" v-if="item.sug !== 'בונוס'">
<qrcode :data="item.qr"></qrcode>
<div class="ms">{{ item.ms2 }} :מס' כרטיס </div>
</div>
<div class="barcode-img" v-else-if="item.sug === 'בונוס'">
<img src="https://static.wixstatic.com/media/ae269d_963087a777ae49a7b33910c4be03ffc3~mv2.jpg"
alt="בונוס" style="width:130px;height:130;">
<div class="ms">{{ item.ms2 }} :מס' כרטיס </div>
</div>
<div class="username">
<div class="ms2">{{ item.sug }}</div>
<div class="semmale">{{ item.semmale }}</div>
<div class="pone">{{ item.pone }}</div>
<div class="pone">{{ item.ctovet }}</div>
</div>
</section>
</div>
</div>
</div>
<script>
function delay(time) {
return new Promise(resolve => setTimeout(resolve, time));
}
async function printpage() {
await delay(1000);
window.print();
window.location.reload();
}
Vue.component('qrcode', {
template: '<div></div>',
props: ['data'],
mounted: function () {
const typeNumber = 5;
const errorCorrectionLevel = 'M';
const qr = qrcode(typeNumber, errorCorrectionLevel);
qr.addData(this.data);
qr.make();
// createSvgTag
this.$el.innerHTML = qr.createImgTag(4);
// JsBarcode(this.$el, this.data, {
// height: 30, width: 1.5,
// });
}
});
function buildQR(semmale, canvas) {
QRCode.toCanvas(canvas, semmale, function (error) {
if (error) console.error(error)
console.log('success!');
})
}
var myList = [];
//console.log(example1= )
window.onmessage = async function (event) {
if (event.data) {
//console.log(example1= undefined);
myList = event.data;
await delay(1000);
// const canvases = document.querySelectorAll('canvas.canvas');
// canvases.forEach(canvas => {
// })
example1.items = myList
// console.log(myList)
printpage();
}
else {
myList = [];
}
};
var example1 = new Vue({
el: '#example-1',
data: {
items: []
},
computed: {
datafull: function () {
return (this.items.length !== 0)
},
data_computed: function () {
//var objone = true;
// var idtorem_item_old;
var obj_new_data = [];
//var end_cust = false;
//console.log(this.items)
this.items.forEach(
element => {
// if (!(idtorem_item_old)) idtorem_item_old = element.idtorem
let new_item = {};
new_item.sug = element.sug;
new_item.qr = element.qr;
new_item.idtorem = element.idtorem;
new_item.sug = element.sug;
new_item.ms2 = element.ms2;
new_item.semmale = element.semmale;
new_item.ctovet = element.ctovet;
new_item.ms = element.ms;
new_item.pone = element.pone;
new_item.type_item = 'card';
obj_new_data.push(new_item);
// console.log(new_item)
// new_item = {};
}
);
// console.log(obj_new_data);
return obj_new_data;
}
},
watch: {
datafull(val) {
}
}
})
</script>
</body>
</html>
