Як отримати WYSIWYP (роздрукувати те, що ви бачите) у веб-браузері?


48

Коли я друкую веб-сторінку з мого браузера, я розраховую отримати на папері саме той вміст, який я бачу в браузері. Якщо бути точним, я сподіваюся, що веб-переглядач відображатиме той самий вміст сторінки так само, як і на полотні з нескінченною висотою, а потім вирішуватиме певним способом розподілу результатів на фізичних сторінках паперу.

Однак це зовсім не те, що відбувається на багатьох сайтах. Вони можуть надрукувати щось зовсім інше. Я ніколи не просив браузерів робити це, і я цього не хочу.

Чи є спосіб отримати те, що я хочу (окрім знімання скріншотів, ретельної обробки та вставлення їх разом, а також друку отриманих зображень)? Чи є спосіб повідомити веб-переглядачу, який я використовую (Firefox, Chrome, Safari, IE або Opera): "роздрукувати цю сторінку, як ви б її відобразили у довільному вікні браузера"?

(PS: див. Також: Друк з браузера за допомогою екрану CSS ?)



Розширення Chrome "Nimbus Screen Capture App" може мати зображення всієї веб-сторінки, як показано на екрані (включаючи частину, яку ви не бачите без прокрутки). Тобто. це так, ніби ви зробили серію скріншотів і зшили їх разом, але це лише один клік.
A E

1
Друк стилів є принципово корисними. Коли я, наприклад, роздруковую цю сторінку, я хочу запитати і відповідати, або я також хочу назву, відповідне питання і колонтитул? Я також розумію, що всі коментарі є видимими. Веб-сайти є інтерактивними, шматки паперу не є (більшість часу), і ці таблиці стилів можуть допомогти зосередитися на вмісті, заощаджуючи чорнило і папір.
SBoss

1
@SBoss: Не всі, хто друкує сторінку, будуть зацікавлені в тих самих речах. Я хотів би запропонувати, щоб друкована сторінка мала б дозволити користувачеві вибрати, які речі треба друкувати, а версія для друку відповідала б екранній версії, за винятком - зазвичай - для елементів керування, які показують, що буде надруковано (має бути можливість увімкнути та вимкнути їх у роздруківках, але вони взагалі повинні з'являтися на екрані).
supercat

1
Щодо питання, що є дублікатом: I спробував видаляти таблицю стилів друку перед друком, і вона не працює, тому я не думаю, що це дублікат.
reinierpost

Відповіді:


20

Chrome має цю функцію, вбудовану в Інструменти розробника, але в дуже невизначеному місці.

  • Відкрийте вікно Інструменти розробника (Windows: F12 або Ctrl + Shift + I , Мак: Cmd + Опт + I )
  • Натисніть кнопку Налаштування та керування DevTools кнопка меню гамбургера і вибрати Інші інструменти & gt; Налаштування візуалізації (або Візуалізація у новій   версії).
  • Перевірте Емулюйте друковані носії прапорець біля Візуалізація і виберіть Екран тип носія.

Цитуються в основному з цього відповідь . Дивіться нижче про різницю.

Тепер, коли ви друкуєте, друк буде саме тим, що ви бачите. Переконайтеся, що інструменти розробника залишаються відкритими до друку. Після закриття інструментів розробника налаштування візуалізації буде відновлено до нормального.

Примітка: Натхнення для цієї відповіді прийшло https://superuser.com/a/568847/176146 . Але фактичний текст цієї відповіді з lmeurs ' відповідь . Це майже точно так само, але ми намагаємося зробити прямо протилежну їм відповідь, тому замість того, щоб перевизначити Друк вона встановлена ​​на Екран .


Firefox отримав цю функцію і в минулому році. Це, очевидно, перевершує, але чи варто з цього приводу відмовитися від старої відповіді?
reinierpost

@reinierpost це, звичайно, до вас. Але наступне може бути корисним у вашому рішенні - meta.stackexchange.com/q/93969/226780
Benjamin

Дякую; ці відповіді говорять, що я повинен змінитися, так що я хочу, хоча раніше прийняті відповіді, здається, були найбільш корисним відповідь можливий на момент написання.
reinierpost

19

Чому мої веб-сторінки не друкують те, що я бачу в своєму веб-переглядачі?

Причина, по якій деякі веб-сторінки друкують по-різному, полягає в тому, що вони мають друк таблиці стилів .


Що таке таблиця стилів друку?

Таблиця стилів друку форматує веб-сторінку таким чином, коли вона друкується   автоматично друкує у зручному для користувача форматі. Стилі друку мають   були навколо протягом декількох років і були написані про багато.   Проте їх реалізують незначні веб-сайти, тобто ми залишаємося на веб-сторінках   що розчаровує не правильно друкувати на папері.

Примітно, що так мало веб-сайтів використовують таблиці стилів як:

  • Друк таблиць стилів надзвичайно покращує зручність користування, особливо для сторінок з великим вмістом (наприклад, цей!)
  • Вони феноменально швидкі та легкі для налаштування

Деякі веб-сайти пропонують посилання на друковану версію сторінки,   але це, звичайно, необхідно створити і підтримувати. Це також вимагає   що користувачі помічають це посилання на екрані, а потім використовують його попереду   звичайним способом друкують сторінки (наприклад, за допомогою кнопки друку   у верхній частині екрана). Версії, дружні до друку, однак корисні   при друці декількох веб-сторінок одночасно, наприклад,   статтю, яка охоплює декілька веб-сторінок.

Джерело Вимкнути друк таблиць стилів (CSS) під час друку веб-сайту


Як вимкнути таблицю стилів друку?

Нещодавно мені потрібно було отримати знімок веб-сайту саме так, як він є   на екрані. Тобто, я хотів колір фону, я хотів   оголошення, я хотів повний макет.

Один із варіантів полягає в тому, щоб взяти послідовні скріншоти під час прокручування вниз   сторінки, потім зібрати їх разом у Photoshop. Це час   споживає та залишає зображення з низькою роздільною здатністю (72dpi).

Інший спосіб зробити це - Друкувати сторінку, а потім "зберегти як" PDF   замість того, щоб фактично друкувати. Це дуже добре працює на сторінках, які роблять   не визначає іншу версію для друку сторінки у порівнянні з переглядом   стор.

На жаль для мене, це стає все більш популярним включити   "друкувати" таблицю стилів на веб-сайті, яка визначає нові стилі сторінок, коли a   користувач намагається надрукувати веб-сайт. Це визначається в заголовку і   виглядає приблизно так:

Я знайшов лише один варіант, який дійсно відповідає моїм потребам: Веб   Розробник "доповнення / розширення розроблений Chris Pederick.

За допомогою цього плагіна ви можете дуже легко відключити всі стилі, за замовчуванням   стилі, вбудовані стилі, вбудовані стилі, і, як ви вже здогадалися, друк   стилі!

Наразі вона доступна для Firefox і Chrome. Я щиро сподіваюся   Розширення Safari прийде колись, оскільки я використовую Safari. The   Єдиний варіант, який я знайшов для Safari, - це вимкнути всі стилі - a   функція, яка поставляється за замовчуванням з новою версією (5.0.3)   браузера. Це корисно під час розробки, щоб побачити, як ваш сайт буде   переглядати на текстовому браузері, але без можливості вибору   які стилі ви вимикаєте, це обмежена корисність.

Ось приклад вимкнення стилів друку з розширенням у Firefox:

enter image description here

Джерело Друкувати таблицю стилів - остаточне керівництво


2
Дякуємо, але це не допомагає для веб-сайту, який я спробував (trelloprinter.com). Я дивуюся, як ці люди мають сміливості писати, що "розчаровує, тому багато веб-сайтів не реалізують їх", коли вони є принципово порушеним підходом до проблеми, яку вони намагаються вирішити. Наявність окремих таблиць стилів для друку означає, що ви не вдалося розробити інтерфейс користувача 101 або ніколи не брали його в першу чергу.
reinierpost

1
Можливо ScreenshotCaptor буде робити те, що вам потрібно для досягнення ... серед інших речей, які він захопить регіони прокрутки ... але я, здається, пам'ятаю, що не грає дуже добре з Google Maps.
DavidPostill

1
Це не допоможе. Якщо ви використовуєте IE (я знаю, зберігайте ваші скелі для пізніше), ви можете використовувати Greenshot ( getgreenshot.org ), яка має опцію прокручування сторінки IE і виведення її на екран. Він буде збирати всю сторінку в 1 скріншот. Після цього ви можете редагувати його за бажанням вашого серця.
Ismael Miguel

18
@reinierpost "Робота з окремими таблицями стилів для друку означає, що ви не змогли виконати дизайн інтерфейсу користувача 101". Ви говорите мені, що якщо ви надрукували цю сторінку, ви хотіли б мати Гарячі питання мережі на стороні, або інформацію про чати? Деякі частини сторінки корисні лише в інтерактивному контексті - чому відпрацьовують простору і чорнила?
Chris Hayes

4
@reinierpost Яке смішне твердження. Припустимо, сайт має темний фон з легким переднім планом. Я не буду говорити за вас, але особисто я радий, що браузер має власний стиль друку, а також багато сайтів, так що я не витрачаю всі свої чорнила, коли друкую. Є багато причин, чому ви хочете надрукувати сам вміст, а не скріншот.
Brad

7

Я використовую розширення Chrome: Скріншот веб-сторінки . За допомогою двох кліків повна веб-сторінка перетворюється на jpg або pdf. Не потрібно більше склеювати скріншоти. Ця сторінка виглядає так: Webpage screenshot demo


1
Це теж працює. Я сподівався, що PDF дасть мені масштабовану графіку, але це просто растрове зображення.
reinierpost

1
Який дивовижний спосіб довести свою відповідь! :) Я б прийняв це як відповідь ..
Vijay Chavda

Дивовижне розширення! Здається, створювати PDF у ландшафтному режимі. Чи можна створювати PDF в портретному режимі? @reinierpost
user674669

6

Немає рішення для плагінів для Firefox: відкрийте Інструменти веб-розробника, у засобах розробника за умовчанням (значок шестерні) поставте галочку "Зробити знімок екрана всієї сторінки". Вам потрібно лише зробити цю частину один раз.

Потім у Інструментах розробника натисніть значок камери. Вся сторінка буде збережена як .png. Тут ви можете роздрукувати його, перетворити в pdf і т.д.


Wow .. це точно що я шукав. Дякую!
reinierpost

Ця функція більше не вимагає інструментів для розробників! У правій частині адресного рядка виберіть три крапки, натисніть "Зробити знімок екрана", потім виберіть "Зберегти повну сторінку".
numbermaniac

2

Я також зіткнувся з подібною проблемою. В даний час я використовую Друк друкованих форм і PDF Extenstion для Chrome .

Кращою особливістю є те, що я можу вручну видалити елементи, які я не хочу в моєму Print / PDF.


Цікаво ... у Firefox, я використовую вікно PrintWhatYouLike Для цієї мети. Вона добре працює, але вона не обробляє "нескінченну" прокрутку (e.q. Quora) - і це розширення не виконує.
reinierpost

Гарний рада - спасибі! За замовчуванням він зберігає текст як текст, посилання як посилання і показує зображення як повний розмір. 6-сторінкова туристична стаття з кількома великими знімками тепер є бездоганним PDF у розмірі 500 кб.
Mike Honey

1

Ось ще один званий OpenScreenShoot . Мені це подобається, тому що це відкрите джерело, доступне в GitHub, і він працював для мене дуже довгою веб-сторінкою, на якій, інші альтернативи, такі як Скріншот веб-сторінки не вдалося.


Я думаю, що ви хотіли сказати "скріншот веб-сторінки на 1 клік" замість "Відкрити знімок екрана". Чи не так?
user674669

1

(На ризик перетворити це на безліч Рекомендації щодо програмного забезпечення відповіді, але поки що встановити та використовувати розширення браузера X здається, єдина відповідь, яка насправді працює:)

Останнім часом я використовую Відкрийте знімок екрана Розширення Chrome для цієї мети, і я дуже задоволений цим. З нею не було проблем довга сторінка Quora .

Оновлення (листопад 2017 р.): Це більше не найкращий варіант: Firefox і Chrome тепер підтримують зняття скріншотів на повній сторінці Інструменти розробника .


Я думаю, що ви хотіли сказати "скріншот веб-сторінки на 1 клік" замість "Відкрити знімок екрана". Чи не так?
user674669

Очевидно, вони перейменували себе. Я не впевнений, що робити з цією відповіддю.
reinierpost
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.