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

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

มีวิธีบอกเบราว์เซอร์ของฉันที่จะละเว้นสไตล์การพิมพ์และเพียงพิมพ์ด้วยสไตล์หน้าจอ?

ฉันต้องการทำเช่นนี้เมื่อฉันต้องการแสดงความแตกต่างระหว่างลูกค้าทั้งสองด้วย

การใช้เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome ( Ctrl+ Shift+ I) เป็นสิ่งเดียวที่ฉันได้พบว่าใช้งานได้

1. ค้นหาอินสแตนซ์ทั้งหมดmedia="screen"และลบแอตทริบิวต์นั้น
2. จากนั้นค้นหาmedia="print"และลบลิงก์ทั้งหมด
3. จากนั้นลองพิมพ์

โดยทั่วไปจะให้หน้ากับการจัดแต่งหน้าจอ

หากคุณต้องการปิดการใช้งานรูปแบบการพิมพ์จริงๆคุณสามารถติดตั้งส่วนขยาย Web Developer (ฉันคิดว่ามีรุ่นสำหรับ Firefox และ Chrome) มันมีปุ่มเพื่อปิดการใช้งานรูปแบบการพิมพ์ อย่างไรก็ตามมันไม่ได้ขยายรูปแบบ "หน้าจอ" ในการพิมพ์ดังนั้นส่วนใหญ่แล้วมันจะไม่ทำงานอย่างที่คุณคาดหวัง

ติดตามแนวคิดของ Jamesแต่ใช้ jQuery:

$('*[media="screen"],*[media="print"]').attr('media', '')

หากหน้าไม่มี jQuery ให้ฉีด:

var el = document.createElement('script'); el.type = "text/javascript"; el.src = "http://code.jquery.com/jquery-latest.pack.js"; document.body.appendChild(el);

มีวิธีการใหม่ในการเลือกการจำลองสื่อโดยตรงในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ดูhttps://stackoverflow.com/questions/9540990/using-chromes-element-inspector-in-print-preview-mode/

เลโอมีความคิดที่ดีแต่ก็ไม่ได้ทำในสิ่งที่เจมส์พูด : มันควรจะเป็น

$('*[media="screen"]').attr('media', '');$('*[media="print"]').remove();

คำแนะนำ: บันทึกสิ่งต่อไปนี้เป็น bookmarklet เพื่อให้ใช้งานง่าย:

javascript:var%20el=document.createElement('script');el.type="text/javascript";el.src="http://code.jquery.com/jquery-latest.pack.js";document.body.appendChild(el);setTimeout(function(){$('*[media="screen"]').attr('media','');$('*[media="print"]').remove();},%202000)

โหลดล่วงหน้า jQuery และรอ 2 วินาทีเพื่อให้เสร็จ แต่ถ้าการรอนี้ยังไม่เพียงพอให้เรียกใช้อีกครั้ง jQuery ควรโหลดในเวลาเดียวกัน

ผมพบวิธีที่ง่ายที่จะทำในChrome

เปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์> การแสดงผล> เลือก 'หน้าจอ' ใน Emulate CSS media

ตอนนี้พยายามพิมพ์ มันจะเลือก CSS หน้าจอแทน Print CSS

1. ทำสิ่งที่เจมส์พูด ;)

   คุณสามารถตรวจสอบผลลัพธ์ที่เปิดการตั้งค่าเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome (มุมล่างขวา) และเลือกใน "แทนที่" ตัวเลือก "Emulate CSS media print" - ดู ด้วยการสลับตัวเลือกนี้คุณสามารถเปรียบเทียบมุมมองการพิมพ์และหน้าจอ มีความสุข!

2. ติดตั้งส่วนเสริมนี้: https://chrome.google.com/webstore/detail/print-background-colors/gjecpgdgnlanljjdacjdeadjkocnnamk

ตอนนี้ภาพพื้นหลังและสีจะถูกพิมพ์เช่นกัน

ข้อผิดพลาด: ไม่ทำงานกับสไปรต์ CSS

แก้ไข: Chrome เปลี่ยนมุมมองการพิมพ์ในปี 2014 ฉันคิดว่าคุณไม่จำเป็นต้องใช้ addon ที่เชื่อมโยงอีกต่อไป

ฉันเพิ่งพบปัญหานี้กับเว็บไซต์ที่มีไฟล์ CSS เดียวที่ใช้@media printและ@media screenดังนั้นวิธีการปิดการใช้งานไฟล์ CSS พิมพ์แยกต่างหากไม่ได้ผลสำหรับฉัน ในขณะที่ฉันสามารถแก้ไข CSS และแสดงความคิดเห็นในบล็อกการพิมพ์ในขณะที่ดูหน้าการเปลี่ยนแปลงเหล่านั้นไม่ได้นำไปสู่ตัวอย่างก่อนพิมพ์

วิธีการแก้ปัญหาที่ผมพบคือส่วนขยายพิมพ์แก้ไขสำหรับFirefoxและChrome ช่วยให้คุณแก้ไขหน้าได้ทันทีก่อนพิมพ์และมีปุ่มง่าย ๆ สำหรับใช้สไตล์เว็บ ( @media screen) สำหรับหน้า

ฉันต้องเปลี่ยนขนาดที่ฉันพิมพ์เล็กน้อยเนื่องจากพื้นผิวการพิมพ์มีอัตราส่วนประมาณ 17:22 ขณะที่เบราว์เซอร์ของฉันประมาณ 16: 9 ดังนั้นบางสิ่งในหน้ากระดาษจึงค่อนข้างแออัดในแนวนอน ฉันยังต้องเปิดใช้งานการพิมพ์สีพื้นหลังและภาพแยกต่างหาก

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

@media print {
  *:after {
    color: #000 !important;
    background: transparent !important;
  }

สาเหตุหนึ่งที่ทำให้เกิดปัญหานี้คือเว็บไซต์ที่ใช้เฟรมเวิร์ก Bootstrap ที่ได้รับความนิยมใช้ไฟล์ubiquitous bootstrap.min.cssซึ่งมีสไตล์ CSS ด้านบน

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

เมื่อคุณคิดว่าพบจุดในโค้ด CSS คุณสามารถแก้ไขเพจในเบราว์เซอร์ของคุณโดยตรงโดยใช้คุณสมบัตินักพัฒนาซอฟต์แวร์ (ใน Chrome คุณกดCtrl+ Shift+ Iเพื่อเปิดใช้งาน)

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

ติดตั้ง Greasemonkey addon และใช้สคริปต์ที่ระบุด้านล่าง

ฉันแก้ไขสคริปต์ที่พบที่นี่http://www.netsi.dk/wordpress/index.php/2011/07/07/printing-html-pages-make-screen-and-print-appear-the-same/

ฉันเปลี่ยน "หน้าจอ" เป็น "พิมพ์" ในตอนท้าย (ฉันไม่มีความรู้เกี่ยวกับ jQuery ดังนั้นอย่าถามคำถามใด ๆ กับฉัน) เพื่อที่จะส่งเวอร์ชันหน้าจอไปยังเครื่องพิมพ์ เมื่อพิมพ์เป็น pdf (โดยใช้เครื่องพิมพ์ Foxit หรือ Nitro Pdf) ฉันตั้งประเภทหน้าเว็บเป็น Tabloid Extra ในโหมดแนวนอนดังนั้นขนาด PDF ตรงกับขนาดหน้าจอมากหรือน้อย สนุก! จำไว้ว่าฉันไม่รู้อะไรเกี่ยวกับการเขียนโปรแกรมดังนั้นเครดิตจึงไปถึงผู้เขียนต้นฉบับ

// ==UserScript==
// @name         Show print version (A Cross Browser Example) (showPrintVersion.user.js)
// @namespace    netsi
// @match http://*/*
// @author       Sten Hougaard
// @description  Simply add #print to the URL. As descriped in my blog post (goo.gl/MEizV) this will activate any media=print stylesheets so that you can see the print version without printing
// ==/UserScript==

// a function that loads jQuery and calls a callback function when jQuery has finished loading
function addJQuery(callback) {
  var script = document.createElement("script");
  script.setAttribute("src", "http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js");
  script.addEventListener('load', function () {
    var script = document.createElement("script");
    script.textContent = "(" + callback.toString() + ")();";
    document.body.appendChild(script);
  }, false);
  document.body.appendChild(script);
}

// the guts of this userscript
function main() {
  var bPrint = (window.location.toString().indexOf('#print')!=-1);  
  if (bPrint) {
    // The user wants to print this page
    jQuery('link[media*="screen"]').attr('media', 'all'); // Enable the screen styling for all media types, including screen.
    jQuery('link[media*="print"]').remove(); // remove any styling related to print
  }
}

// load jQuery and execute the main function
addJQuery(main);

ลองเปิดใช้งาน"Print background (colors & images)"ตัวเลือกPage Setupและตรวจสอบว่ามีลักษณะอย่างไรPrint Preview(สำหรับ FF)

คล้ายกับเจมส์ - ใช้ "แหล่งที่มา" แท็บในเครื่องมือสำหรับนักพัฒนา Chrome และเปลี่ยนทุกกรณีด้วยmedia print media speechดังนั้นการเปลี่ยนแปลง css ทั้งหมดเพื่อซ่อน navbars เป็นต้นจะไม่ถูกนำมาใช้เมื่อทำการพิมพ์ (แต่จะถูกนำไปใช้เมื่อใช้การอ่านออกเสียงข้อความ)

สิ่งนี้อาจทำได้ด้วย JQuery ดังที่กล่าวมา

สิ่งนี้มีประโยชน์ในขณะที่ฉันกำลังใช้ CDN ของ css เพื่อปรับแต่งเอง

มีเครื่องมือที่ยอดเยี่ยมสำหรับสิ่งนั้นบน Mac

ติดตั้ง Paparazzi => คัดลอก URL ไปยัง Paparazzi => บันทึกภาพเป็น => PDF

(ในการส่งออก PDF แม้กระทั่ง Text ist สามารถเลือกได้ไม่ใช่เพียง "รูปภาพ")

https://derailer.org/paparazzi/screenshots

สนุก :-)