• October 22, 2022

    1.print PDF พื้นที่ส่วนที่กำหนด เช่น <div id=”PDF”> และอยู่ภายใน body

    มือถือไม่พิมพ์ ข้อความ และ เลือกขอบเขตไม่ได้

    <script src="https://cymiz.com/jquery.min.js"></script><!--menu.php,loadidng,nest,print--> <!--ยังมีบางวิธีการไม่ต้องใช้ .js แต่พิมพ์ข้อความใน form ไม่ได้-->
    <body>
    <div id="PDF">
    ...
    </div>
    </body>
    
    <button id="print" class="sxxx" onclick="printContent('PDF');" >กดดาวน์โหลด</button><label><br><br>
    
    <script>
    function printContent(el){
    var restorepage = $('body').html();
    var printcontent = $('#' + el).clone();
    var enteredtext = $('#text').val();/*เก็บค่าในช่อง หลังกดปุ่มดาวน์โหลด*/
    $('body').empty().html(printcontent);
    window.print();
    $('body').html(restorepage);
    $('#text').html(enteredtext); /*เก็บค่าในช่อง*/
    }
    </script>

    แบบนี้ไม่ต้องใช้ไฟล์เยอะ แต่พิมพ์ข้อความในฟอร์มไม่ได้
    https://stackoverflow.com/questions/468881/print-div-id-printarea-div-only

    <div id="printableArea">
          <h1>Print me</h1>
    </div>
    <input type="button" onclick="printDiv('printableArea')" value="print a div!" />
    <script>
    function printDiv(divName) {
         var printContents = document.getElementById(divName).innerHTML;
         var originalContents = document.body.innerHTML;
         document.body.innerHTML = printContents;
         window.print();
         document.body.innerHTML = originalContents;
    }
    </script>

    แบบนี้ เก็บค่าไว้ได้ radio ไม่ทำงาน / แต่มือถือใช้ไม่ได้เลย

    <form method="post" action="" id="myfrm">
        <fieldset>
            <legend>Personal information:</legend>
            First name:<br>
            <input type="text" name="firstname" id="first">
            <br> Last name:<br>
            <input type="text" name="lastname" id="last">
            <br><br>
            <input type="submit" value="Submit">
        </fieldset>
    </form>
    <p align="center"><input type="button" onclick="myPrint('myfrm')" value="print"></p>
    <script>
        function myPrint(myfrm) {
            var printdata = document.getElementById(myfrm);
            newwin = window.open("");
            newwin.document.write(printdata.outerHTML);
            newwin.document.getElementById("first").value = document.getElementById("first").value;
            newwin.document.getElementById("last").value = document.getElementById("last").value;
            newwin.print();
            newwin.close();
        }
    </script>

    2.ส่งค่าจาก ลิ้ง
    ส่งค่าจาก หน้าที่กดมา โดยใส่ค่าใน url หรือ จะพิมพ์ตรงก็ได้ ค่านี้จะส่งมายังช่องฟอร์มที่ต้องการทำไว้รับ
    เพื่อให้สะดวกผู้ใช้งาน จะรับค่าจากลิ้ง จากการเลือกแต่ละแผน ซึ่งจะมีเพียงบางค่าในฟอร์มที่ต่างกันเท่านั้น ผู้พัฒนาไม่ต้องสร้างฟอร์มใหม่หากจะให้ผู้ใช้สะดวก จะเหลือเพียงฟอร์มเดียว แล้วรับค่าที่แตกต่างกันนั้น

    ลิ้งส่งที่กดมา https://xxx.php?x2=4,000,000
    
    ฟอร์มปลายทางที่ เขียนไว้รับค่า
    ...
    <?php 
    if (empty($_GET)) {echo "(แสดงค่า default เดิม)";}else echo $_GET["x1"];
    if (empty($_GET)) {echo "(แสดงค่า default เดิม)";}else echo $_GET["x2"];
    ?>
    ...

    3. radio แสดงค่าคู่ กดแค่ครั้งเดียว

    <td style="color:darkblue;font-size:1em;font-family:fantasy;">
    
    <input id="id_1" type="radio" value="1" name="349">4,000,000<br>
    <input id="id_3" type="radio" value="3" name="351">6,000,000
    </td>
    
    <td style="color:darkblue;font-size:1em;font-family:fantasy;">
    <input id="id_2" type="radio" value="2" name="350">6,982.82<br>
    <input id="id_4" type="radio" value="4" name="352">10,313.73
    </td>
    
    <!--radio two check-->
    <script>
    $('document').ready(function(e) 
    	{
    		    $('#id_1').click( function()
    			{
    				$("#id_2").prop('checked', true);
    				$("#id_3").prop('checked', false);
    				$("#id_4").prop('checked', false);
    			});
    			$('#id_3').click( function()
    			{
    				$("#id_4").prop('checked', true);
    				$("#id_1").prop('checked', false);
    				$("#id_2").prop('checked', false);
    			});
        });
    </script>

    4. อัพโหลดภาพ พรีวิว (ไม่เก็บเข้า server แค่โชว์ในหน้าเว็บ)

    <input type="file" id="upload"><br>
    <img id="image" style="max-width:850px;"/>
    <script>
        upload.onchange = evt => {
            const[img] = upload.files;
            if(img) {
                image.src = URL.createObjectURL(img);
            }
        }
    </script><br>
    </div>
    
    สร้างอีกอัน
    <input type="file" id="upload2" style="width:90px;"><br>
    <img id="image2" style="max-width:180px;margin-top:-25px;"/>
    <script>
    upload2.onchange = evt => {
    const[img] = upload2.files;
    if(img) {
    image2.src = URL.createObjectURL(img);
    }
    }
    </script>
    </div>

    5.กดแล้วหายไป

    เพื่อแสดงให้ผู้ใช้อ่านก่อน ว่าจะให้ทำอะไร กดแล้วหาย ก็จะเห็นปุ่มเลือกไฟล์ และ เมื่ออัพไฟล์จะไปบังปุ่ม เลือกไฟล์

    <button id="btn">🩸อัพโหลดลายเซ็น</button>
    
    <script>
    const btn = document.getElementById('btn');
    btn.addEventListener('click', () => {
      btn.style.display = 'none';
      const box = document.getElementById('box');
      box.style.display = 'block';
    });
    </script>

    6. loading

    <!--loading-->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>  
    <style type="text/css">
    html,body {   
    padding: 0;   
    margin: 0;   
    width: 100%;   
    height: 100%;
        }   
        #overlay {   
    position: absolute;  
    top: 0px;   
    left: 0px;  
    background: #ccc;   
    width: 100%;   
    height: 100%;   
    opacity: .75;   
    filter: alpha(opacity=75);   
    -moz-opacity: .75;  
    z-index: 999;  
    background: #fff url(https://www.cymiz.com/images/loading/lava.svg) 50% 50% no-repeat;
        }   
        .main-contain{
    position: absolute;  
    top: 0px;   
    left: 0px;  
    width: 100%;   
    height: 100%;   
    overflow: hidden;
        }
    </style>
    </head>
    <!--loading-->
    <div id="overlay"></div>	
    <div class="main-contain">
    
    ....
    
    <!--loading-->
    </div>
    <script type="text/javascript">
    $(function(){
    	$("#overlay").fadeOut();
        $(".main-contain").removeClass("main-contain");
    });
    </script>

    7. กรอกข้อมูลฟอร์ม แสดง สองแห่ง <input>

    มือถือจะแสดงผลช้า ต้องพิมพ์อันที่สอง แล้วไปคลิ๊กอันแรก จึงจะทำงาน

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <input type="text" id="id1" name="" value="" />
      <input type="text" id="id2" name="" value="" />
    <script>
    var $id1 = $("#id1");var $unique = $("#id2");
    $id1.mousemove(function() {$unique.val($(this).val());});
    </script>

    8.เทคนิค class=”a”

    เนื่องจากในข้อ1 การ print input text form เป็น pdf มีปัญหาสำหรับมือถือ จึงทดสอบใช้ Generate a PDF with JavaScript แทน

    Print pdf เมื่อกดปุ่มมันจะดีดหน้า preview เหมือนตอนสั่งเครื่องพิมพ์ แล้วค่อยกด save
    Generate pdf เมื่อกดปุ่มจะ ให้ save ทันทีเลย ผลที่ได้ พิมพ์ text input แต่ รูปพรีวิว ไม่พิมพ์

    https://medium.com/coderbyte/generate-a-pdf-with-javascript-3e53ca7b47e
    ดูที่ full source code
    https://github.com/APITemplate-io/generate-pdf-with-javascript/blob/main/html2pdf.html
    more information https://github.com/eKoopmans/html2pdf.js

    แบบนี้ ขึ้นข้อความที่ต้องการแสดง และเรียงเป็นคอลัมแสดงผลหน้าปัจจุบัน
    https://github.com/APITemplate-io/generate-pdf-with-javascript/blob/main/pdf-lib.html

    ตัวนี้ ทำให้มือถือพิมพ์ได้

    <div class='printchatbox' id='printchatbox'></div>
    <input type='text' name='fname' class='chatinput' 
        onkeyUp="document.getElementById('printchatbox').innerHTML = this.value" />
    


เวอไนน์ไอคอร์ส




ประหยัดเวลากว่า 100 เท่า!



เวอไนน์เว็บไซต์⚡️
สร้างเว็บไซต์ ดูแลเว็บไซต์

Categories