Bir web tarayıcısında WYSIWYP (gördüğünüzü yazdırın) nasıl elde edilir?

70

Tarayıcımdan bir web sayfası yazdırdığımda, tam olarak tarayıcıda gördüğüm içeriği kağıda almayı bekliyorum. Kesin olarak: Tarayıcının, sonsuz yüksekliğe sahip bir tuval dışında, aynı sayfa içeriğini aynı şekilde oluşturmasını ve ardından sonuçların kağıdın fiziksel sayfalarına nasıl dağıtılacağına baskıya özgü bir şekilde karar vermesini bekliyorum.

Ancak, pek çok web sitesinde neler olduğu hiç de önemli değil. Tamamen farklı bir şey yazdırabilirler. Tarayıcılardan bunu yapmasını hiç istemedim ve bunun olmasını istemiyorum.

İstediklerimi elde etmenin bir yolu var mı (ekran görüntüsü almak, dikkatlice kesip yapıştırmak ve elde edilen görüntüleri basmak dışında)? Kullandığım bir web tarayıcısını söylemenin bir yolu var mı (Firefox, Chrome, Safari, IE veya Opera): "bu sayfayı istediğiniz kadar tarayıcı penceresine yazdırdığınız gibi yazdırın"?

(PS: ayrıca bkz: Ekran CSS Kullanarak Tarayıcıdan Yazdırılsın mı?)

browser printing

— reinierpost
kaynak

1

Ekran CSS Kullanarak Tarayıcıdan Yazdırın

— Ƭᴇcʜιᴇ007

"Nimbus Screen Capture App" adlı Chrome uzantısı, web sayfasının tamamını ekranda gösterildiği gibi görüntüleyebilir (kaydırma yapmadan göremediğiniz kısım dahil). Yani, bir dizi ekran görüntüsü almış ve bunları bir araya getirmiş gibisiniz, ancak bu sadece bir tuşa basmak.

— AE

1

Stil sayfalarını yazdırmak temel olarak yararlıdır. Örneğin bu sayfayı yazdırdığımda, soru ve cevapları mı istiyorum yoksa başlık, ilgili soru ve altbilgiyi mi istiyorum? Tüm yorumların göründüğünü de takdir ediyorum. Web siteleri etkileşimlidir, kağıt parçaları değildir (çoğu zaman) ve bu stil sayfaları içeriğe odaklanmanıza yardımcı olarak mürekkep ve kağıt tasarrufu sağlar.

— SBoss

1

@SBoss: Bir sayfa basan herkes aynı şeylerle ilgilenmez. Baskı dostu bir sayfanın, kullanıcının nelerin yazdırılacağını seçmesine izin vermesini ve baskı versiyonunun ekran versiyonuyla eşleşmesini (tipik olarak - neyin basılacağını gösteren kontroller için) içermesini öneririm. bunları çıktılarda etkinleştirin ve devre dışı bırakın, ancak bunlar genellikle yine de ekranda görünmelidir).

— supercat

1

Yinelenen bir soruya gelince: Yazdırmadan önce yazdırma stil sayfasını çıkarmayı denedim ve işe yaramadı, bu yüzden sorunun yinelenen olduğunu düşünmüyorum.

— reinierpost

37

Chrome'un bu özelliği Geliştirici Araçlarında yerleşiktir, ancak çok açık olmayan bir konumdadır.

Geliştirici Araçları'nı açın (Windows: F12veya Ctrl+ Shift+ I, Mac: Cmd+ Opt+ I)

Click özelleştirme ve kontrol DevTools hamburger menü düğmesi ve tercih ayarları Rendering Diğer araçlar> (veya Rendering yeni sürümlerinde).

Kontrol Taklit yazılı basın kısmındaki onay Oluşturma sekmesini seçin Ekran ortam türünü.

Çoğunlukla bu cevaptan alıntı . Fark için aşağıya bakın.

Şimdi yazdırdığınızda, çıktı tam olarak gördüğünüz gibi olacaktır. Geliştirici araçlarını yazdırana kadar açık tuttuğunuzdan emin olun. Geliştirici araçlarını kapattıktan sonra Rendering ayarı normale döndürülür.

Not: Bu cevap için ilham kaynağı https://superuser.com/a/568847/176146 adresinden geldi . Ama bu cevabın gerçek metin dan lmeurs ' cevabı . Neredeyse tamamen aynı, ama biz onların cevabın tam tersini yapmak için çalışıyor, bu yüzden yerine geçersiz kılmayı ayarlarken Print o ayarlandığında Ekran .

— Bünyamin
kaynak

Firefox da bu özelliği geçen yıl da elde etti. Bu açık bir şekilde daha üstün, fakat bu nedenle eski bir cevabı kabul etmem gerekir mi?

— reinierpost

@reinierpost elbette size kalmış. Ancak aşağıdakiler kararınızda yardımcı olabilir - meta.stackexchange.com/q/93969/226780

— Benjamin

Teşekkürler; bu cevaplar değişmem gerektiğini söylüyor, bu yüzden daha önce kabul edilen cevap yazıldığı sırada mümkün olan en yararlı cevap gibi görünse de yapacağım.

— reinierpost

Şu anda bunu Chrome'da denediğimde, yalnızca mobil görünüm modunda seçeneği görüyorum; Sayfanın normal masaüstü görünümü için bulamıyorum.

— reinierpost

Firefox da bu yeteneğe sahiptir, ancak farklı bir şekilde. Sanırım bunu cevaplamak için ayrı bir cevap gerekiyor. Diğer tarayıcılardan emin değilim.

— reinierpost

22

Web sayfalarım neden tarayıcımda gördüklerimi yazdırmıyor?

Bazı web sayfalarınızın farklı şekilde yazdırılmasının nedeni, yazdırma stil sayfalarına sahip olmalarıdır .

Yazdırma Stil Sayfası nedir?

Baskı stil sayfası bir web sayfasını biçimlendirir, böylece yazdırıldığında otomatik olarak kullanıcı dostu bir biçimde yazdırılır. Baskı stil sayfaları birkaç yıldan beri var ve birçok şey hakkında yazılmışlar. Ancak çok az sayıda web sitesi bunları uygular, bu da sinir bozucu bir şekilde kağıda düzgün şekilde basmayan web sayfalarına bırakıldığımız anlamına gelir.

Çok az web sitesinin baskı stil sayfalarını aşağıdaki gibi kullanması dikkat çekicidir:

Stil sayfalarını yazdırın, özellikle çok fazla içeriğe sahip sayfalar için (örneğin!), Kullanılabilirliği büyük ölçüde artırın

Olağanüstü hızlı ve kurulumu kolay

Bazı web siteleri sayfanın baskı dostu bir sürümüne bir bağlantı sunar, ancak elbette bu ayarlanması ve bakımı gerekir. Ayrıca, kullanıcıların bu bağlantıyı ekranda fark etmelerini ve daha sonra sayfaları düzenli olarak yazdırmasını (örneğin, ekranın üstündeki yazdır düğmesini seçerek) kullanmalarını gerektirir. Ancak baskı dostu sürümler, birkaç web sayfasına yayılan bir makale gibi aynı anda birkaç web sayfasını yazdırırken kullanışlıdır.

Bir Web Sitesini Yazdırırken Kaynak Stil Sayfalarını (CSS) Devre Dışı Bırak

Yazdırma Stil Sayfasını Nasıl Devre Dışı Bırakırım?

Geçenlerde bir web sitesinin anlık görüntüsünü tam olarak ekranımda göründüğü gibi almam gerekiyordu. Yani, arkaplan rengini istedim, reklamları istedim, tüm düzeni istedim.

Bir seçenek, sayfayı aşağı kaydırırken sıralı ekran görüntüleri almak ve ardından Photoshop'ta yeniden bir araya getirmek. Bu zaman alıcıdır ve düşük çözünürlüklü (72dpi) görüntü sağlar.

Bunu yapmanın başka bir yolu Sayfayı yazdırmak, sonra da yazdırmak yerine PDF olarak "kaydet" şeklindedir. Bu, sayfanın görüntülenmesine karşı bir sayfanın yazdırılması için farklı bir düzen tanımlamayan sayfalar için oldukça işe yarar.

Ne yazık ki benim için, bir kullanıcı web sitesini yazdırmaya çalıştığında yeni sayfa stillerini tanımlayan bir web sitesine "baskı" stil sayfası eklemek giderek daha popüler hale geldi. Bu başlıkta tanımlanır ve şuna benzer:

Gereksinimlerimi gerçekten karşılayan tek bir seçenek buldum: Chris Pederick tarafından geliştirilen "Web Geliştirici" eklentisi / uzantısı.

Bu eklenti ile TÜM stilleri, Varsayılan stilleri, satır içi stillerini, gömülü stilleri çok kolay bir şekilde devre dışı bırakabilirsiniz ve tahmin ettiğiniz gibi baskı stillerini!

Firefox ve Chrome için şu anda kullanılabilir. Gerçekten Safari kullandığım için bir Safari eklentisinin bir gün geleceğini umuyorum. Safari için bulduğum tek seçenek, varsayılan olarak tarayıcının en yeni sürümüyle (5.0.3) gelen bir özellik olan TÜM stilleri devre dışı bırakmak. Bu, geliştirme sırasında sitenizin salt metin tarayıcıda nasıl görüntüleneceğini görmek için kullanışlıdır, ancak devre dışı bırakacağınız stilleri seçme olanağı olmadan sınırlı bir yararı vardır.

İşte Firefox’ta yukarıdaki uzantıyla yazdırma stillerini devre dışı bırakmanın bir örneği:

Kaynak Yazdırma stil sayfası - tanımlayıcı kılavuz

— DavidPostill
kaynak

2

Teşekkürler, ancak bu denediğim web sitesi için yardımcı olmuyor (trelloprinter.com). Bu insanların "sinir bozucu, bu yüzden pek çok web sitesi bunları uygulamaz" diye yazmaya cesaret ettikleri, çözmeye çalıştıkları soruna temelde kırılmış bir yaklaşım olduklarında şaşırdım. Yazdırma için ayrı stil sayfalarına sahip olmak, kullanıcı arayüzü tasarımını (101) başarısız olduğunuz veya hiçbir zaman ilk etapta almadığınız anlamına gelir.

— reinierpost

1

Belki ScreenshotCaptor , kaydırma bölgelerini yakalayacağı diğer şeylerin yanı sıra, başarmak için ihtiyacınız olanı yapacak ... ama Google Haritalar ile pek iyi oynamadığını hatırlıyorum.

— DavidPostill

1

Bu pek yardımcı olmaz. IE kullanıyorsanız (biliyorum ki kayalarınızı daha sonra kaydedin), IE sayfasını kaydırma ve ekran görüntüsünü alma seçeneği olan Greenshot'u ( getgreenshot.org ) kullanabilirsiniz . Tüm sayfayı 1 ekran görüntüsüne birleştirir. Daha sonra kalbinizin isteğine göre düzenleyebilirsiniz.

— Ismael Miguel

18

@reinierpost "Yazdırma için ayrı stil sayfalarına sahip olmak, kullanıcı arayüzü tasarımını başarısızlıkla sonuçladığın anlamına gelir 101" - Orada çizdiğiniz çok geniş bir fırça. Bana bu sayfayı yazdırırsanız, Hot Network Sorularını yan tarafta mı yoksa sohbet odaları hakkında mı bilgi almak istediğinizi söylüyorsunuz? Sayfanın bazı bölümleri yalnızca etkileşimli bağlamda kullanışlıdır - neden boşa alan ve mürekkep onları yazdırıyor?

— Chris Hayes

4

@ reinierpost Ne saçma bir ifade. Bir sitenin aydınlık bir ön plana sahip koyu bir arka plan olduğunu varsayalım. Sizin için konuşmayacağım, ancak şahsen tarayıcının kendi baskı stillerinin yanı sıra pek çok sitenin bulunduğu için mutluyum, böylece yazdırırken tüm mürekkebimi boşa harcamam. İçeriği yazdırmak istemenin bir ekran görüntüsü değil, birçok nedeni var.

— Brad

9

Firefox için eklenti çözümü yok: Web Geliştirici Araçları'nı açın, Varsayılan Geliştirici Araçları'nda (dişli simgesi) "Tüm sayfanın ekran görüntüsünü al" seçeneğini işaretleyin. Bu kısmı sadece bir kez yapmanız yeterli.

Ardından, Geliştirici Araçları'nda kamera simgesini tıklayın. Tüm sayfa bir .png olarak kaydedilecektir. Buradan yazdırabilir, pdf formatına dönüştürebilirsiniz.

— Russ
kaynak

Vay ... tam olarak aradığım şey buydu. Teşekkür ederim!

— reinierpost

4

Bu özellik artık Geliştirici Araçları gerektirmiyor! Adres çubuğunun sağ tarafındaki üç noktayı seçin, "Ekran görüntüsü al" ı tıklayın ve ardından "Tam sayfayı kaydet" i seçin.

— numbermaniac

Bu harika, teşekkür ederim!

— kodlamajeremy

8

Chrome uzantısını kullanıyorum: Web sayfası ekran görüntüsü . İki tıklama ile tüm web sayfası jpg veya pdf formatına dönüştürülür. Ekran görüntülerini artık kendiniz birbirine yapıştırmanıza gerek yok. Bu sayfa şuna benziyor: Web sayfası ekran görüntüsü demosu

— ruut
kaynak

1

Bu da işe yarıyor. PDF'nin bana ölçeklenebilir grafikler vereceğini umuyordum, ancak bu sadece bir bitmap.

— reinierpost

1

Cevabınızı kanıtlamak için ne harika bir yol! :) Bunu Cevap olarak kabul ederdim ..

— Vijay Chavda

İnanılmaz uzatma! Manzara modunda pdf oluşturuyor gibi görünüyor. Portre modunda pdf oluşturmak mümkün müdür? @reinierpost

— user674669

3

Ben de aynı problemle karşı karşıyaydım. Şu anda Chrome için Print Friendly ve PDF Extenstion kullanıyorum .

En iyi özelliği, Yazdır / PDF'mde istemediğim öğeleri el ile silebilmemdir.

— Nikhil
kaynak

İlginç ... Firefox’ta PrintWhatYouLike bookmarklet’i bu amaç için kullanıyorum. İyi çalışıyor, ancak "sonsuz" kaydırma işlemiyle baş etmiyor (eq Quora) - bu uzantı da değil.

— reinierpost

Güzel ipucu - teşekkürler! Varsayılan olarak metni metin olarak tutar, bağlantılar olarak bağlar ve görüntüleri tam boyutta gösterir. Birkaç büyük resimli 6 sayfalık bir seyahat makalesi artık 500kb'de kusursuz bir PDF.

— Mike Honey,

1

İşte OpenScreenShoot adlı bir tane daha . GitHub'da bulunan Açık kaynak olduğundan ve WebpageScreenShot gibi diğer alternatiflerin başarısız olduğu çok uzun bir web sayfası için çalıştı .

— Vijay Chavda
kaynak

Sanırım "Aç Ekran Görüntüsü" yerine "1 tıklamayla web sayfası ekran görüntüsü" demek istedin. Sağ?

— user674669

1

(Bunu bir dizi Yazılım Önerisi yanıtı haline getirme riski altında , ancak şimdiye kadar, X tarayıcı uzantısını yükleyip kullanmak gerçekten işe yarayan tek tür cevap gibi görünüyor :)

Son zamanlarda Ekran görüntüsü Açma uzantısını bu amaç için kullanıyorum ve bundan çok mutluyum. Uzun bir Quora sayfasıyla hiçbir sorunu yoktu .

Güncelleme (Kasım, 2017): Bu artık en iyi seçenek değil: Firefox ve Chrome artık Geliştirici Araçlarında tam sayfa ekran görüntüleri almayı destekliyor .

— reinierpost
kaynak

Sanırım "Aç Ekran Görüntüsü" yerine "1 tıklamayla web sayfası ekran görüntüsü" demek istedin. Sağ?

— user674669

Hayır. Görünüşe göre kendilerini yeniden adlandırdılar. Bu cevapla ne yapacağımdan emin değilim.

— reinierpost 6'18'de

1

Bugün, bu Firefox'ta yapılabilir (şu anda 65.0.2'yi kullanıyorum):

F12'ye basın. Geliştirici Araçları bölmesi görünecektir.
Sağ üst köşenin yakınında bir kamera simgesi var. Tüm sayfanın ekran görüntüsünü almak için üzerine tıklayın.

In Ayarlar , biraz davranışını özelleştirebilirsiniz (erişmek için onları kamera simgesinin sağ tarafında üç noktayı tıklayın); varsayılan olarak, ekran görüntüsünü Firefox downloads klasörüne kaydeder.

Kamera simgesi eksikse, önce Ayarlar'da etkinleştirmeniz gerekir .

— reinierpost
kaynak