วิธีนำรูปโลโก้มาใส่เป็นพื้นหลังบนเอกสาร


เราสามารถนำรูปภาพโลโก้มาวางเป็นพื้นหลังของเอกสาร e-Tax Invoice/e-Receipt และเอกสารในระบบของ Leceipt ดังรูปตัวอย่าง

ซึ่งมีขั้นตอนต่าง ๆ ดังต่อไปนี้




1. เข้าสู้หน้า “รูปแบบเอกสาร

ที่เมนูด้านซ้ายมือ จะสังเกตเห็นหัวข้อ ตั้งค่า แล้วคลิกเข้าไปที่ รูปแบบเอกสาร



เมื่อเข้ามาแล้วจะเข้าลักษณะของหน้าดังรูป



แล้วให้ทำการเลือกเอกสาร e-Tax Invoice/e-Receipt ที่ต้องการสร้างก่อน โดยจากตัวอย่างงจะเลือกเป็น ใบเสร็จรับเงิน/ใบกำกับภาษี ดังรูปตัวอย่าง



2. ไปที่ส่วนของ HTML code ที่ tag “style”

ส่วนที่เราจะทำการทำรูปภาพโลโก้บนพื้นหลังบนเอกสารนั้นจะไปแก้ไขที่ส่วน HTML code ซึ่งจะเป็นส่วนของ “style” ดังรูป



ส่วนแรกที่ต้องแก้ไข ให้เข้าไปที่ page {…} แล้วนำ code ด้านล่าง

background-image:url(”);
background-repeat: no-repeat;
background-position: center;

ไปวางใน page { } ให้ได้ดังรูปตัวอย่าง



ส่วนที่สอง ให้เข้าไปที่ @media print { body, page {…. }} แล้วนำ code ด้านล่าง

background-image:url(”);
background-repeat: no-repeat;
background-position: center;
-webkit-print-color-adjust: exact !important;

ไปวางให้ได้ดังรูปตัวอย่าง



พักส่วนนี้ไว้ก่อน



3. การแปลงรูปภาพโลโก้ให้เป็น Base64

จากข้อ 2 เราจะต้องแปลงรูปโลโก้ไปเป็น Base64 ก่อน เพื่อไปใช้กับ background-image:url(”);

เว็บไซต์ที่แนะนำสำหรับการแปลงรูปโลโก้นั้น เข้าไปที่ https://elmah.io/tools/base64-image-encoder



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



ให้กด copy บริเวณ code ส่วน CSS usage ดังรูป เพื่อนำไปใส่ใน code ของข้อ 2.



4. การนำ code มาใช้งาน

จากข้อ 3 นำ code ที่ได้มาวางแทนที่ background-image:url('');

ส่วนแรกที่ page {…} ดังรูป



ส่วนที่สอง ณ บริเวณ @media print { body, page {…. }} ดังรูป



ถือว่าขั้นตอนที่ 4 ทุกอย่างเสร็จเรียบร้อย



5. ตัวอย่างเอกสารที่สร้างเสร็จแล้วและการบันทึกเพื่อนำไปใช้งาน

เลื่อนขึ้นด้านบนของเอกสารจะว่ามีรูปโลโก้ปรากฏบนรูปแบบเอกสาร ให้ทำการคลิกที่ ดูตัวอย่างเอกสาร ดังรูป



จะปรากฏตัวอย่างเอกสาร e-Tax Invoice/e-Receipt ที่มีโลโก้เป็นพื้นหลัง ให้ทำการคลิกที่ บันทึก



เมื่อมีการขึ้นเตือนเป็นแถบพื้นหลังสีเขียวดังรูป นั่นหมายความว่าสามารถเอาไปใช้กับเอกสารจริงได้แล้ว



6. การนำไปใช้

จากข้อ 1 ได้เลือกชนิดเอกสารเป็น ใบเสร็จรับเงิน/ใบกำกับภาษี ดังนั้นเมื่อสร้างเอกสารก็ทำการเลือก ใบเสร็จรับเงิน/ใบกำกับภาษี



หลังจากสร้างเอกสารเสร็จแล้วจะพบรูปพื้นหลังปรากฏที่หน้ายืนยัน



เอกสาร “ใบเสร็จรับเงิน/ใบกำกับภาษี” ที่สร้างเสร็จแล้ว เมื่อทำการเปิดไฟล์เอกสารจะแสดงโลโก้พื้นหลัง



และเอกสาร “ใบเสร็จรับเงิน/ใบกำกับภาษี” ที่ดาวน์โหลดมาเป็นไฟล์ PDF ก็ยังมีโลโก้พื้นหลังอีกด้วย



หมายเหตุ : การต้องการสร้างรูปพื้นหลังเป็นเอกสาร e-Tax Invoice/e-Receipt ชนิดใด อย่าลืมว่าต้องเลือกชนิดของเอกสารที่ต้องการสร้างก่อนเสมอ