Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,037

HOME > PHP > PHP Forum > set font แล้ว print ออกมา มันไม่เป็นตามที่ set font ไว้



 

set font แล้ว print ออกมา มันไม่เป็นตามที่ set font ไว้

 



Topic : 136795



โพสกระทู้ ( 108 )
บทความ ( 0 )



สถานะออฟไลน์




ตอน Set font
ปริ้น1

ตอนกด ปริ้น
ปริ้น2

Code (PHP)
<button onclick="print1('print2');"class='btn btn-primary btn-block'>Print</button>
<link rel="stylesheet"href="https://fonts.googleapis.com/css?family=Sarabun">
    <style>
  
    .container {font-size: 1.15em; /* มีค่าประมาณ 14px */}
    @media print {
     body {margin-top: 50mm; margin-bottom: 50mm; 
           margin-left: 50mm; margin-right: 50mm;
         } 
}
body{
    Font-family : 'Sarabun';
}

p {margin-bottom: 5px; font-size: 15px; }

table td, table th {
    padding: 5px 0px;
    padding-bottom: 10px;
}

    </style>
    <body onload="print1('print2');"> 
    <div class="container">
    <div class = "p-5" id="print2">
        <h4 align="center">แบบฟอร์มการให้บริการ IT แก้ปัญหา-แจ้งซ่อมอุปกรณ์คอมพิวเตอร์</h4>
        <table border="1" cellspacing="0" cellpadding="10" align="center" width="100%">
        <tbody><tr><td>
        <table border="0" cellspacing="0" cellpadding="1" align="center" width="100%">
            <tbody>
                
                <tr>
                    <td><p><br>รายละเอียดอุปกรณ์ที่ติดมาด้วย</p></td>
                </tr>
                <tr>
                    <td colspan = "2" valign="top"><p>1 ฟหกดดดเหกดเดหเกดเ้หกด้หกดเ้หกดเ้กหดเ้หกดเ้ก</p></td>
                    <td colspan = "2" valign="top"><p>2 ดเ้หกด้หกดเ้หกดเ้หกดดหฟกดฟหกดฟหกดฟเ้</p></td>
                </tr>
                <tr>
                    <td colspan = "2" valign="top"><p>3 เฟดเพดกเฟกดเฟกหดเฟหกเฟหกเฟหกเฟหกเฟห</p></td>
                    <td colspan = "2" valign="top"><p>4 กเฟห้ฏโ้ฟกเฟพะดเกด่ดเ่ดกเ่าเ้ากเ้ากเด้ากเ้าก้ดเาก</p></td>
                </tr>
            </tbody>
        </table>
        </br>
    </div>        
 <div>
   

</body>
<script type="text/javascript">
    function print1(print2)
    {
        var prtContent = document.getElementById("print2");
        var WinPrint = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0');
        WinPrint.document.write(prtContent.innerHTML);
        WinPrint.document.close();
        WinPrint.focus();
        WinPrint.print();
        WinPrint.close();
    }
 </script>


อยากจะให้มัน ปริ้นออกมา เป็น Font Sarabun ต้องทำยังไงครับ



Tag : PHP








ประวัติการแก้ไข
2022-08-29 08:00:36
Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2022-08-29 07:59:01 By : yutthanagorn View : 909 Reply : 6
 

 
ใส่ font-family ใน @media print

Code (CSS)
@media print {
	body {
		font-family: Sarabun;
	}
}


กำหนด document ของ new windows ให้ครอบคลุม header หรือ stylesheet

Code (JavaScript)
WinPrint.document.head.innerHTML = document.head.innerHTML;
WinPrint.document.body.innerHTML = '<body>' + prtContent.innerHTML + '</body>';


ผลลัพธ์
js print with font


แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2022-08-29 09:22:11 By : 009
 


 

No. 2



โพสกระทู้ ( 108 )
บทความ ( 0 )



สถานะออฟไลน์


ตอบความคิดเห็นที่ : 1 เขียนโดย : 009 เมื่อวันที่ 2022-08-29 09:22:11
รายละเอียดของการตอบ ::
ผมทำถูกไหมครับ

Code (PHP)
<button onclick="print1('print2');"class='btn btn-primary btn-block'>Print</button>
<link rel="stylesheet"href="https://fonts.googleapis.com/css?family=Sarabun">
    <style>
  
    .container {font-size: 1.15em; /* มีค่าประมาณ 14px */}
    @media print {
     body {margin-top: 50mm; margin-bottom: 50mm; 
           margin-left: 50mm; margin-right: 50mm;
           font-family: Sarabun;
         } 
}

body{
    Font-family : 'Sarabun';
}

p {margin-bottom: 5px; font-size: 15px; }

table td, table th {
    padding: 5px 0px;
    padding-bottom: 10px;
}

    </style>
    <body onload="print1('print2');"> 
    <div class="container">
    <div class = "p-5" id="print2">
        <h4 align="center">แบบฟอร์มการให้บริการ IT แก้ปัญหา-แจ้งซ่อมอุปกรณ์คอมพิวเตอร์</h4>
        <table border="1" cellspacing="0" cellpadding="10" align="center" width="100%">
        <tbody><tr><td>
        <table border="0" cellspacing="0" cellpadding="1" align="center" width="100%">
            <tbody>
                
                <tr>
                    <td><p><br>รายละเอียดอุปกรณ์ที่ติดมาด้วย</p></td>
                </tr>
                <tr>
                    <td colspan = "2" valign="top"><p>1 ฟหกดดดเหกดเดหเกดเ้หกด้หกดเ้หกดเ้กหดเ้หกดเ้ก</p></td>
                    <td colspan = "2" valign="top"><p>2 ดเ้หกด้หกดเ้หกดเ้หกดดหฟกดฟหกดฟหกดฟเ้</p></td>
                </tr>
                <tr>
                    <td colspan = "2" valign="top"><p>3 เฟดเพดกเฟกดเฟกหดเฟหกเฟหกเฟหกเฟหกเฟห</p></td>
                    <td colspan = "2" valign="top"><p>4 กเฟห้ฏโ้ฟกเฟพะดเกด่ดเ่ดกเ่าเ้ากเ้ากเด้ากเ้าก้ดเาก</p></td>
                </tr>
            </tbody>
        </table>
        </br>
    </div>        
 <div>
   

</body>
<script type="text/javascript">
    function print1(print2)
    {
        var prtContent = document.getElementById("print2");
        var WinPrint = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0');
        WinPrint.document.head.innerHTML = document.head.innerHTML;
        WinPrint.document.body.innerHTML = '<body>' + prtContent.innerHTML + '</body>';
        WinPrint.document.write(prtContent.innerHTML);
        WinPrint.document.close();
        WinPrint.focus();
        WinPrint.print();
        WinPrint.close();
        
    }
 </script>


ยังเป็นแบบนี้อยู่ครับ
ปริ้น3
ผมทำอะไรผิดหรือปล่าว
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2022-08-29 09:43:19 By : yutthanagorn
 

 
ย้าย tag <link>, <style> ไปไว้ใน <head>
เพราะใน js เราดึง header มาจาก document.head.innerHTML
ไม่งั้นก็ต้องพิมพ์ string เองทั้งหมด
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2022-08-29 09:50:02 By : 009
 


 

No. 4



โพสกระทู้ ( 108 )
บทความ ( 0 )



สถานะออฟไลน์


ตอบความคิดเห็นที่ : 3 เขียนโดย : 009 เมื่อวันที่ 2022-08-29 09:50:02
รายละเอียดของการตอบ ::
Code (PHP)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet"href="https://fonts.googleapis.com/css?family=Sarabun">
    <style>
        .container {font-size: 1.15em; /* มีค่าประมาณ 14px */}
        @media print {
            body {margin-top: 50mm; margin-bottom: 50mm; 
                margin-left: 50mm; margin-right: 50mm;
                font-family: Sarabun;
                } 
            }

            body{
                Font-family : 'Sarabun';
            }

            p {margin-bottom: 5px; font-size: 15px; }

            table td, table th {
                padding: 5px 0px;
                padding-bottom: 10px;
            }
    </style>
</head>
<body>
<button onclick="print1('print2');"class='btn btn-primary btn-block'>Print</button>

    <body onload="print1('print2');"> 
    <div class="container">
    <div class = "p-5" id="print2">
        <h4 align="center">แบบฟอร์มการให้บริการ IT แก้ปัญหา-แจ้งซ่อมอุปกรณ์คอมพิวเตอร์</h4>
        <table border="1" cellspacing="0" cellpadding="10" align="center" width="100%">
        <tbody><tr><td>
        <table border="0" cellspacing="0" cellpadding="1" align="center" width="100%">
            <tbody>
                
                <tr>
                    <td><p><br>รายละเอียดอุปกรณ์ที่ติดมาด้วย</p></td>
                </tr>
                <tr>
                    <td colspan = "2" valign="top"><p>1 ฟหกดดดเหกดเดหเกดเ้หกด้หกดเ้หกดเ้กหดเ้หกดเ้ก</p></td>
                    <td colspan = "2" valign="top"><p>2 ดเ้หกด้หกดเ้หกดเ้หกดดหฟกดฟหกดฟหกดฟเ้</p></td>
                </tr>
                <tr>
                    <td colspan = "2" valign="top"><p>3 เฟดเพดกเฟกดเฟกหดเฟหกเฟหกเฟหกเฟหกเฟห</p></td>
                    <td colspan = "2" valign="top"><p>4 กเฟห้ฏโ้ฟกเฟพะดเกด่ดเ่ดกเ่าเ้ากเ้ากเด้ากเ้าก้ดเาก</p></td>
                </tr>
            </tbody>
        </table>
        </br>
    </div>        
 <div>
   

</body>
</html>
<script type="text/javascript">
    function print1(print2)
    {
        var prtContent = document.getElementById("print2");
        var WinPrint = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0');
        WinPrint.document.head.innerHTML = document.head.innerHTML;
        WinPrint.document.body.innerHTML = '<body>' + prtContent.innerHTML + '</body>';
        WinPrint.document.write(prtContent.innerHTML);
        WinPrint.document.close();
        WinPrint.focus();
        WinPrint.print();
        WinPrint.close();
        
    }
 </script>



แก้ออกมาแล้วเป็นแบบนี้ครับ .. ผลลัพธ์ยังไม่่ได้เช่นเดิมครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2022-08-29 10:17:06 By : yutthanagorn
 


 
content ไม่ต้องเขียนซ้ำครับ
เอาบรรทัดนี้ออก

Code (JavaScript)
WinPrint.document.write(prtContent.innerHTML);

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2022-08-29 10:21:16 By : 009
 


 

No. 6



โพสกระทู้ ( 108 )
บทความ ( 0 )



สถานะออฟไลน์


ตอบความคิดเห็นที่ : 5 เขียนโดย : 009 เมื่อวันที่ 2022-08-29 10:21:16
รายละเอียดของการตอบ ::
OK ครับได้แล้วครับ เป็นแบบนี้

Code (PHP)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet"href="https://fonts.googleapis.com/css?family=Sarabun">
    <style>
        .container {font-size: 1.15em; /* มีค่าประมาณ 14px */}
        @media print {
            body {
                font-family: Sarabun;
                } 
            }

            body{
                Font-family : 'Sarabun';
            }

            p {margin-bottom: 5px; font-size: 15px; }

            table td, table th {
                padding: 5px 0px;
                padding-bottom: 10px;
            }
    </style>
</head>
<body>
<button onclick="print1('print2');"class='btn btn-primary btn-block'>Print</button>

    <body onload="print1('print2');"> 
    <div class="container">
    <div class = "p-5" id="print2">
        <h4 align="center">แบบฟอร์มการให้บริการ IT แก้ปัญหา-แจ้งซ่อมอุปกรณ์คอมพิวเตอร์</h4>
        <table border="1" cellspacing="0" cellpadding="10" align="center" width="100%">
        <tbody><tr><td>
        <table border="0" cellspacing="0" cellpadding="1" align="center" width="100%">
            <tbody>
                
                <tr>
                    <td><p><br>รายละเอียดอุปกรณ์ที่ติดมาด้วย</p></td>
                </tr>
                <tr>
                    <td colspan = "2" valign="top"><p>1 ฟหกดดดเหกดเดหเกดเ้หกด้หกดเ้หกดเ้กหดเ้หกดเ้ก</p></td>
                    <td colspan = "2" valign="top"><p>2 ดเ้หกด้หกดเ้หกดเ้หกดดหฟกดฟหกดฟหกดฟเ้</p></td>
                </tr>
                <tr>
                    <td colspan = "2" valign="top"><p>3 เฟดเพดกเฟกดเฟกหดเฟหกเฟหกเฟหกเฟหกเฟห</p></td>
                    <td colspan = "2" valign="top"><p>4 กเฟห้ฏโ้ฟกเฟพะดเกด่ดเ่ดกเ่าเ้ากเ้ากเด้ากเ้าก้ดเาก</p></td>
                </tr>
            </tbody>
        </table>
        </br>
    </div>        
 <div>
 </body>
 </html>  
<script type="text/javascript">
    function print1(print2)
    {
        var prtContent = document.getElementById("print2");
        var WinPrint = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0');
        WinPrint.document.head.innerHTML = document.head.innerHTML;
        WinPrint.document.body.innerHTML = '<body>' + prtContent.innerHTML + '</body>';
        WinPrint.document.close();
        WinPrint.focus();
        WinPrint.print();
        WinPrint.close();
        
    }
 </script>


ขอบพระคุณสำหรับคำแนะนำครับ กราบบบบบบบบบบบบ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2022-08-29 10:32:39 By : yutthanagorn
 

   

ค้นหาข้อมูล
   
 

แสดงความคิดเห็น
Re : set font แล้ว print ออกมา มันไม่เป็นตามที่ set font ไว้
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
 Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







Exchange: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ

Load balance : Server 00
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่