การออกแบบหน้าสำหรับการพิมพ์

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

แน่นอนว่าวิธีที่ดีที่สุดคือการสร้างไฟล์รูปภาพตามหน้านี้ โดยผู้ใช้ดาวน์โหลดรูปภาพแล้วพิมพ์ออกมา

แต่หากด้วยเหตุผลบางประการ เพื่อเพิ่มความเร็วหรือประหยัดค่าใช้จ่าย คุณไม่บันทึกหน้าเป็นไฟล์รูปภาพ คุณก็พิมพ์ได้เฉพาะหน้า HTML โดยตรงเท่านั้น ซึ่งต้องมีข้อกำหนดเพิ่มเติมบางประการในการออกแบบหน้า ที่นี่สอง สิ่งที่ต้องสังเกต:

1. ตั้งค่าคุณสมบัติของแท็กสไตล์:

<ประเภทสไตล์=”ข้อความ/css” สื่อ=”พิมพ์”>

ซึ่งหมายความว่าแอตทริบิวต์สไตล์ที่แนะนำหรือกำหนดไว้ในสไตล์นี้จะใช้เฉพาะเมื่อพิมพ์เท่านั้น โปรดทราบว่าหากไม่ได้ตั้งค่าแอตทริบิวต์สื่อ สไตล์ที่กำหนดจะมีผลทั้งในเบราว์เซอร์และการพิมพ์ ดังนั้นจึงขอแนะนำให้ใช้ สไตล์แบบนี้ วางตามสไตล์ปกติทั้งหมด ตัวอย่างเช่น เราหวังว่าจะมีบรรทัด "Print and Yahoo Word of Mouth Network" บนหน้าที่พิมพ์ แต่สิ่งนี้ไม่สมจริงในเบราว์เซอร์:

<p class="printTitle">การพิมพ์และเครือข่ายการบอกต่อของ Yahoo</p>

จากนั้นเราสามารถตั้งค่า .printTitle{display:none;} ในรูปแบบรวม และตั้งค่าเป็น .printTitle{display:block;} ในรูปแบบต่อมาที่สื่อเป็น "พิมพ์" สไตล์การพิมพ์ที่กำหนดไว้ไม่มีลำดับความสำคัญสูงกว่าสไตล์ที่กำหนดไว้เป็นประจำเมื่อทำการพิมพ์ ดังนั้นจึงขอแนะนำให้วางสไตล์การพิมพ์ไว้หลังสไตล์ปกติทั้งหมดอีกครั้ง

2. เมื่อพิมพ์หน้าการตั้งค่าเบราว์เซอร์จะส่งผลต่อเอฟเฟกต์การพิมพ์ ใน IE จะมี "สีพื้นหลังและรูปภาพการพิมพ์" ใน "เครื่องมือ" - "ตัวเลือกอินเทอร์เน็ต" - "ขั้นสูง" ซึ่งคล้ายกับใน Firefox ใน "ไฟล์" - "ตั้งค่าหน้ากระดาษ" จะมี "พิมพ์สีพื้นหลังและรูปภาพ" เมื่อเลือกตัวเลือกนี้ สีพื้นหลังและรูปภาพในหน้านั้นสามารถพิมพ์ออกมาได้ (ดูเหมือนว่าเบราว์เซอร์เคอร์เนล IE ที่ไม่ได้มาตรฐานบางตัวจะมี ปัญหาบางอย่าง สามารถพิมพ์สีพื้นหลังได้ แต่รูปภาพพื้นหลังไม่สามารถพิมพ์ได้) หากไม่ได้เลือก ไม่สามารถพิมพ์สีพื้นหลังหรือรูปภาพได้ ดังนั้นเพื่อป้องกันผู้ใช้จากเบราว์เซอร์และการตั้งค่าเบราว์เซอร์ที่แตกต่างกัน ฉันขอแนะนำสองรายการ จุดแรกคือการใช้พื้นที่ที่เต็มไปด้วยสีพื้นหลังถูกใช้เป็นขอบเขตและเพิ่มเส้นขอบ 1px สีจะเหมือนกับสีพื้นหลังดังนั้นจึงไม่สามารถมองเห็นการเปลี่ยนแปลงในเบราว์เซอร์ แม้ว่าการตั้งค่าของผู้ใช้จะป้องกันไม่ให้พิมพ์สีพื้นหลัง แต่ก็ยังสามารถใช้เส้นขอบเป็นส่วนได้ และเค้าโครงหน้าจะยังคงอยู่ในเลเยอร์ที่ใหญ่ที่สุด ประการที่สองคือการใช้แท็ก <img/> สำหรับรูปภาพที่จำเป็นทั้งหมด เพื่อให้สามารถพิมพ์รูปภาพเหล่านี้ได้ไม่ว่าเบราว์เซอร์ของผู้ใช้จะตั้งค่าอย่างไร ซึ่งอาจเหมือนกับปกติบางหน้าจะได้รับการออกแบบในรูปแบบที่แตกต่างกัน แต่เพื่อที่จะรวมเอฟเฟกต์การพิมพ์เข้าด้วยกัน เราก็ต้องยอมเท่านั้น

ฉันเพิ่งหยิบยกปัญหาบางอย่างที่พบในการใช้งานจริง หากคุณมีคำถามหรือแนวคิดใหม่ คุณสามารถหยิบยกประเด็นเหล่านั้นมาอภิปรายร่วมกันก่อน

ข้อความต้นฉบับ: http://ued.koubei.com/?p=918