זקוק לעזרה בבניית קוד HTML קצר להדפסה.

אבי 203

זקוק בדחיפות לעזרה.
יש לי אובייקט עם פרטים של רוכשים, ואני רוצה להדפיס את כל הרוכשים עם ברקוד 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>

אבי 203

@אבי-203 תודה גדולה!! @zvizvi
על
page-break-after: always

תחומים - פורום חרדי מקצועי

זקוק לעזרה בבניית קוד HTML קצר להדפסה.