วิธีรับ WYSIWYP (พิมพ์สิ่งที่คุณเห็น) ในเว็บเบราว์เซอร์

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

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

มีวิธีที่จะได้รับสิ่งที่ฉันต้องการ (นอกเหนือจากการจับภาพหน้าจอตัดและวางอย่างระมัดระวังด้วยกันและพิมพ์ภาพที่ได้)? มีวิธีบอกเว็บเบราว์เซอร์ที่ฉันใช้ (Firefox, Chrome, Safari, IE หรือ Opera): "พิมพ์หน้านี้ตามที่คุณต้องการให้แสดงบนหน้าต่างเบราว์เซอร์ที่มีกฎเกณฑ์สูง" หรือไม่?

(PS: ดูเพิ่มเติมที่: พิมพ์จากเบราว์เซอร์โดยใช้ CSS หน้าจอหรือไม่)

Chrome มีคุณลักษณะนี้อยู่ในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ แต่อยู่ในตำแหน่งที่ไม่ชัดเจน

• เปิดเครื่องมือสำหรับนักพัฒนา (Windows: F12หรือCtrl+ Shift+ I, Mac: Cmd+ Opt+ I)
• คลิกปุ่มกำหนดเองและควบคุม DevToolsแฮมเบอร์เกอร์เมนูและเลือกเครื่องมือเพิ่มเติม> การตั้งค่าการแสดงผล (หรือการแสดงผลในเวอร์ชันที่ใหม่กว่า)
• ตรวจสอบการเลียนแบบสื่อสิ่งพิมพ์ช่องทำเครื่องหมายที่แสดงผลแท็บและเลือกหน้าจอชนิดของสื่อ

ส่วนใหญ่อ้างจากคำตอบนี้ ดูความแตกต่างด้านล่าง

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

หมายเหตุ: แรงบันดาลใจสำหรับคำตอบนี้มาจากhttps://superuser.com/a/568847/176146 แต่ข้อความจริงของคำตอบนี้มาจากlmeurs ' คำตอบ มันเกือบจะเหมือนกัน แต่เราจะพยายามที่จะทำตรงข้ามแน่นอนของคำตอบของพวกเขาดังนั้นแทนที่จะตั้งค่าการลบล้างการพิมพ์มีการตั้งค่าหน้าจอ

ทำไมหน้าเว็บของฉันไม่พิมพ์สิ่งที่ฉันเห็นในเบราว์เซอร์ของฉัน?

เหตุผลที่บางส่วนของหน้าเว็บของคุณกำลังพิมพ์ที่แตกต่างกันเป็นเพราะพวกเขามีสไตล์ชีทพิมพ์

สไตล์ชีทการพิมพ์คืออะไร

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

เป็นที่น่าสังเกตว่ามีเว็บไซต์เพียงไม่กี่แห่งที่ใช้สไตล์การพิมพ์เป็น:

• สไตล์การพิมพ์ช่วยเพิ่มความสะดวกในการใช้งานโดยเฉพาะอย่างยิ่งสำหรับหน้าเว็บที่มีเนื้อหาจำนวนมาก (เช่นหน้านี้!)
• ติดตั้งง่ายและรวดเร็ว

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

ที่มาปิดการใช้งานสไตล์การพิมพ์ (CSS) เมื่อพิมพ์เว็บไซต์

ฉันจะปิดการใช้งานสไตล์ชีทการพิมพ์ได้อย่างไร

ฉันเพิ่งต้องการสแน็ปช็อตของเว็บไซต์ตรงตามที่ปรากฏบนหน้าจอของฉัน นั่นคือฉันต้องการสีพื้นหลังฉันต้องการโฆษณาฉันต้องการเลย์เอาต์เต็มรูปแบบ

ทางเลือกหนึ่งคือการจับภาพหน้าจอตามลำดับในขณะที่คุณเลื่อนหน้าลงมาจากนั้นนำกลับมารวมกันใน Photoshop ใช้เวลานานและทำให้คุณมีภาพความละเอียดต่ำ (72dpi)

อีกวิธีในการทำเช่นนี้คือการพิมพ์หน้าจากนั้น "บันทึกเป็น" PDF แทนการพิมพ์จริง วิธีนี้ใช้งานได้ดีสำหรับหน้ากระดาษที่ไม่ได้กำหนดเค้าโครงที่แตกต่างกันสำหรับการพิมพ์หน้ากับการดูหน้า

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

ฉันพบตัวเลือกเดียวที่ตอบสนองความต้องการของฉันอย่างแท้จริง: ส่วนเสริม "ผู้พัฒนาเว็บ" ที่พัฒนาโดย Chris Pederick

ด้วยปลั๊กอินนี้คุณสามารถปิดการใช้งานสไตล์ทั้งหมด, สไตล์เริ่มต้น, สไตล์อินไลน์, สไตล์แบบฝังได้อย่างง่ายดายและคุณเดาได้ว่าสไตล์การพิมพ์!

ปัจจุบันมีให้บริการสำหรับ Firefox และ Chrome ฉันหวังว่าส่วนขยาย Safari จะมาสักวันหนึ่งเนื่องจากฉันใช้ Safari เป็นหลัก ตัวเลือกเดียวที่ฉันได้พบสำหรับ Safari คือการปิดใช้งานลักษณะทั้งหมด - คุณลักษณะที่มาพร้อมกับเบราว์เซอร์เวอร์ชันใหม่ล่าสุด (5.0.3) สิ่งนี้มีประโยชน์ในระหว่างการพัฒนาเพื่อดูว่าเว็บไซต์ของคุณจะดูอย่างไรในเบราว์เซอร์แบบข้อความเท่านั้น แต่ไม่มีความสามารถในการเลือกรูปแบบที่คุณปิดใช้งานซึ่งมียูทิลิตี้ที่ จำกัด

นี่คือตัวอย่างของการปิดการใช้งานรูปแบบการพิมพ์ด้วยส่วนขยายด้านบนใน Firefox:

สไตล์ชีทพิมพ์ต้นฉบับ- คำแนะนำที่ชัดเจน

วิธีแก้ปัญหาปลั๊กอินสำหรับ Firefox: เปิดเครื่องมือสำหรับนักพัฒนาเว็บในเครื่องมือสำหรับนักพัฒนาเริ่มต้น (ไอคอนรูปเฟือง) ทำเครื่องหมาย "ถ่ายภาพหน้าจอของหน้าทั้งหมด" คุณจะต้องทำส่วนนี้เพียงครั้งเดียว

จากนั้นในเครื่องมือสำหรับนักพัฒนาคลิกไอคอนกล้อง หน้าทั้งหมดจะถูกบันทึกเป็น. png จากตรงนี้คุณสามารถพิมพ์, แปลงเป็น pdf, ฯลฯ

ฉันใช้ส่วนขยายของ Chrome: ภาพหน้าจอหน้าเว็บ ด้วยการคลิกสองครั้งหน้าเว็บที่สมบูรณ์จะถูกแปลงเป็น jpg หรือ pdf ไม่จำเป็นต้องติดภาพหน้าจอด้วยกันอีกต่อไป หน้านี้มีลักษณะดังนี้:

ฉันกำลังเผชิญกับปัญหาที่คล้ายกัน ปัจจุบันผมใช้ พิมพ์ที่เป็นมิตรและ PDF extenstion สำหรับ Chrome

คุณลักษณะที่ดีที่สุดคือฉันเองสามารถลบรายการที่ฉันไม่ต้องการในการพิมพ์ของฉัน / PDF

นี่เป็นอีกคนหนึ่งที่เรียกว่าOpenScreenShoot ฉันชอบมากเพราะเป็นโอเพ่นซอร์สมีให้ที่ GitHub และมันใช้งานได้สำหรับเว็บเพจที่ยาวมาก ๆ ซึ่งทางเลือกอื่นเช่นWebpageScreenShotล้มเหลว

(ด้วยความเสี่ยงที่จะทำให้สิ่งนี้กลายเป็นชุดคำตอบของSoftware Recommendationsแต่จนถึงตอนนี้การติดตั้งและใช้ส่วนขยายของเบราว์เซอร์ Xดูเหมือนจะเป็นคำตอบเดียวที่ใช้งานได้จริง :)

เมื่อเร็ว ๆ นี้ฉันใช้ส่วนขยายOpen Screenshot Chrome สำหรับจุดประสงค์นี้และฉันมีความสุขมาก มันมีปัญหาใด ๆ กับหน้า Quora ยาว

ปรับปรุง (พฤศจิกายน 2017): นี่คือไม่เลือกที่ดีที่สุด: Firefox และ Chrome ในขณะนี้สนับสนุนการหน้าจอแบบเต็มหน้าของพวกเขาในเครื่องมือสำหรับนักพัฒนา

วันนี้สามารถทำได้ใน Firefox (ฉันใช้ 65.0.2 ตอนนี้) ดังนี้:

1. กด F12 บานหน้าต่างเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์จะปรากฏขึ้น
2. ใกล้กับมุมบนขวามีไอคอนกล้อง หากต้องการจับภาพหน้าจอของทั้งหน้าให้คลิกที่ภาพ

ในการตั้งค่า (เพื่อเข้าถึงคลิกจุดสามจุดทางด้านขวาของไอคอนกล้อง) คุณสามารถปรับแต่งการทำงานของมันเล็กน้อย โดยค่าเริ่มต้นมันจะบันทึกภาพหน้าจอไปยังโฟลเดอร์ดาวน์โหลด Firefox ของคุณ

หากไอคอนกล้องจะหายไปคุณต้องเปิดการใช้งานในการตั้งค่า