Ekran stil sayfasına nasıl yazdırabilirim?

Kullandığım bazı web sitelerinin yazılı medya için gerçekten kötü stil sayfaları var, ancak ekran stil sayfaları oldukça iyi.

Tarayıcıma yazdırma stil sayfasını yoksaymasını ve yalnızca ekran stil sayfasını yazdırmasını söylememin bir yolu var mı?

Müşterilere ikisi arasındaki farkı göstermek istediğimde de bunu yapmak isterdim.

Chrome Geliştirici Araçları'nı ( Ctrl+ Shift+ I) kullanmak işe yaradığını bulduğum tek şey.

1. Tüm örnekleri arayın media="screen"ve bu niteliği silin.
2. Ardından media="print"tüm bağlantıyı bulun ve silin.
3. Sonra yazdırmayı deneyin.

Bu genellikle bana ekran stilli sayfalar veriyor.

Baskı stillerini gerçekten devre dışı bırakmak istiyorsanız, Web Geliştirici uzantısını yükleyebilirsiniz (Firefox ve Chrome için bir sürüm olduğunu düşünüyorum). Baskı stillerini devre dışı bırakmak için bir düğmeye sahiptir. Ancak, "ekran" stilini yazdırmak için genişletmez, bu nedenle çoğu zaman umduğunuz gibi çalışmaz.

James fikrinin ardından ancak jQuery kullanarak:

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

Sayfada jQuery yoksa, onu enjekte edin:

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

Geliştirici Araçları'ndaki medya emülasyonunu doğrudan seçmek için yeni bir yöntem var, bkz. Https://stackoverflow.com/questions/9540990/using-chromes-element-inspector-in-print-preview-mode/

Leo'nun orada iyi bir fikri vardı, ama James'in söylediklerini tam olarak yapmıyor : olmalı

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

İpucu: Kolay kullanım için aşağıdakileri yer imi olarak kaydedin:

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)

Bu, jQuery'yi önceden yükler ve bitmesi için 2 saniye bekler, ancak bu bekleme yeterli değilse, sadece tekrar çalıştırın, bu arada jQuery yüklü olmalıdır.

Chrome'da yapmanın kolay bir yolunu buldum .

Geliştirici Aracı> Oluşturma> CSS ortamını taklit et bölümünde 'ekran'ı seçin.

Şimdi yazdırmayı dene. CSS Yazdır yerine ekran CSS'yi seçecektir.

1. James'in söylediği her şeyi yapın ;)

   Çıktıyı Chrome Geliştirici Araçları ayarlarını (sağ alt köşede) açarak kontrol edebilir ve "CSS ortam baskısını taklit et" seçeneğini "Geçersiz Kılmalar" seçeneğini seçebilirsiniz. Bu seçeneği değiştirerek, baskı ve ekran görünümünü karşılaştırabilirsiniz. İyi eğlenceler!

2. Bu eklentiyi yükleyin: https://chrome.google.com/webstore/detail/print-background-colors/gjecpgdgnlanljjdacjdeadjkocnnamk

Şimdi arka plan görüntüleri ve renkler de basılıyor.

Hata: CSS sprite ile çalışmıyor.

EDIT: Chrome 2014 yılında baskı görüntüsünü değiştirdi. Artık bağlantılı eklentiyi kullanmanıza gerek olmadığını düşünüyorum.

Ben sadece bu sorunu tek bir CSS dosyası kullanan @media printve kullanarak @media screenayrı bir CSS dosyasını devre dışı bırakma çözümü benim için işe yaramadı. Sayfayı görüntülerken CSS'yi kesinlikle düzenleyebilir ve baskı bloğunu yorumlayabilsem de, bu değişiklikler baskı önizlemesinde gerçekleşmedi.

Bulduğum çözüm Firefox ve Chrome için Print Edit uzantısıydı . Sayfayı yazdırmadan hemen önce düzenlemenizi sağlar ve sayfa için Web Stilini ( @media screen) kullanmak için basit bir düğme içerir .

Tarayıcım kabaca 16: 9 iken yazdırma yüzeyi kabaca 17:22 olduğundan, yazdırdığım ölçeği biraz değiştirmek zorunda kaldım, bu yüzden sayfadaki sayfaların bir kısmı yatay olarak biraz kalabalıklaştı. Ayrıca arka plan renklerini ve görüntülerini ayrı ayrı yazdırmayı da sağlamak zorunda kaldım.

Bazen web siteleri , ekranda ve yazdırırken farklı stillerin kullanılması gerektiğini belirtmek için CSS'yi kullanır . Bu genellikle iyidir, fakat aynı zamanda kafa karıştırıcı ve problemli olabilir. Sayfanın kaynak kodunu inceleyin ve şöyle bir şey arayın:

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

Bu sorunun yaygın olmasının bir nedeni, popüler Bootstrap çerçevesini kullanan web sitelerinin , yukarıdaki CSS stilini içeren her yerde bootstrap.min.css dosyasını kullanmasıdır .

Aramak için anahtar şey @media print. Web siteleri genellikle karmaşık yapılara sahiptir ve sayfanın yerel olarak kaydedilmesine ve tekrarlayan bir metin arama aracıyla incelenmesine yardımcı olabilir.

Noktayı CSS kodunda bulduğunuzu düşünüyorsanız, geliştirici özelliklerini kullanarak sayfayı doğrudan tarayıcınızda değiştirebilirsiniz. (Chrome'da başlatmak için Ctrl+ Shift+ tuşlarına basın I.)

CSS kodunu arayın ve soruna neden olan satırları kaldırın ya da geçersiz kılın. İşlemin "Baskı önizleme" kullanılarak çalıştığını doğrulayın.

Greasemonkey addon'u yükleyin ve aşağıda verilen betiği kullanın.

Burada bulduğum bir betiği değiştirdim http://www.netsi.dk/wordpress/index.php/2011/07/07/printing-html-pages-make-screen-and-print-appear-the-same/

Sonunda "ekran" ı "yazdır" olarak değiştirdim (jQuery hakkında hiçbir fikrim yok, bu yüzden bana herhangi bir soru sorma), böylece aslında ekran sürümünü yazıcıya gönderir. Pdf'ye yazdırırken (Foxit veya Nitro Pdf yazıcıları kullanarak), yatay modda sayfa türünü Tabloid Extra olarak ayarlıyorum, böylece pdf boyutu ekran boyutuna daha fazla veya daha az uyuyor. Keyfini çıkarın! Unutma, programlama hakkında hiçbir şey bilmiyorum, böylece kredi asıl yazara gider.

// ==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)"Seçeneği etkinleştirmeyi deneyin Page Setupve nasıl göründüğünü kontrol edin Print Preview(FF içindir).

James'e benzer - Chrome Geliştirici araçlarında "Kaynaklar" sekmesini kullanın ve ile tüm örneklerini değiştirin . Bu yüzden, csbarları gizlemek için tüm css değişiklikleri yazdırma sırasında uygulanmayacak (ancak metinden konuşmaya kullanıldığında uygulanacak)media printmedia speech

Bu, yukarıdaki gibi JQuery ile yapılabilir.

Özelleştirme doğru dışarı böylece css CDN kullanıyorum gibi yararlıdır

Mac'te bunun için harika bir araç var.

Paparazzi'yi yükle => URL'yi Paparazzi'ye kopyala => Resmi farklı kaydet => PDF

(PDF ihracatında, Metin seçilebilir olsa bile, sadece bir "resim" değildir)

https://derailer.org/paparazzi/screenshots

keyfini çıkarın :-)