Як друкувати за допомогою таблиці стилів екрану?

На багатьох веб-сайтах, які я використовую, є дуже погані таблиці стилів для друкованих ЗМІ, але їхні таблиці стилів екрану є досить хорошими.

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

Я також хотів би це зробити, коли хочу показати клієнтам різницю між ними.

Використання інструментів для розробників 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/

Я знайшов простий спосіб зробити це в Chrome .

Відкрийте Інструмент для розробників> Візуалізація> Виберіть "екран" у Емуляції CSS-медіа.

Тепер спробуйте надрукувати. Він вибере на екрані CSS замість CSS для друку.

У Лео була гарна ідея , але це не зовсім те, що сказав Джеймс : так і повинно бути

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

Підказка: збережіть наступне як закладку для зручного використання:

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 повинен був бути завантажений тим часом.

1. Робіть все, що сказав Джеймс ;)

   Ви можете перевірити вихід, відкриваючи налаштування Інструментів для розробників Chrome (правий нижній кут) і вибрати в розділі "Переопределення" опцію "Емуляція друку на CSS-медіа". Увімкнувши цю опцію, ви можете порівняти подання друку та екрана. Веселіться!

2. Встановіть цей додаток: https://chrome.google.com/webstore/detail/print-background-colors/gjecpgdgnlanljjdacjdeadjkocnnamk

Тепер також друкуються фонові зображення та кольори.

Помилка: не працює з CSS-спрайтами.

EDIT: Chrome змінив вигляд друку в 2014 році. Я думаю, тому вам більше не потрібно використовувати пов'язаний додаток.

Я просто зіткнувся з цією проблемою з веб - сайту , який був один файл CSS , використовуючи @media printі @media screen, таким чином , рішення відключити окремий файл для друку CSS не працював для мене. Хоча я, безумовно, міг редагувати CSS та коментувати блок друку під час перегляду сторінки, ці зміни не перейшли до попереднього перегляду друку.

Я знайшов рішення - розширення Print Edit для Firefox та Chrome . Це дозволяє редагувати сторінку безпосередньо перед друком, і включає просту кнопку для використання веб-стилю ( @media screen) для сторінки.

Мені довелося злегка змінити масштаб, який я друкував, оскільки поверхня друку приблизно становить 17:22, а мій браузер - приблизно 16: 9, тому частина матеріалів на сторінці стає трохи скупчена горизонтально. Я також повинен був дозволити друкувати фонові кольори та зображення окремо

Іноді веб-сайти використовують CSS, щоб вказати, що різні стилі слід використовувати на екрані та під час друку. Це часто добре, але це також може бути заплутано і проблематично. Перевірте вихідний код сторінки та знайдіть щось на зразок:

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

Однією з причин цієї проблеми є те, що веб-сайти, що використовують популярну систему Bootstrap, використовують всюдисущий файл bootstrap.min.css , який містить стиль CSS, описаний вище.

Ключове, на що слід звернути увагу @media print. Веб-сайти часто мають складні структури, і це може допомогти зберегти сторінку на локальному рівні та перевірити її за допомогою інструменту рекурсивного пошуку тексту.

Якщо вам здається, що ви знайшли місце в коді CSS, можете змінити сторінку безпосередньо у своєму браузері, використовуючи її функції розробника. (У Chrome ви натискаєте Ctrl+ Shift+, Iщоб запустити їх.)

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

Встановіть додаток Greasemonkey і скористайтеся поданим нижче сценарієм.

Я змінив скрипт, який я знайшов тут 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 для приховування навігаційних панелей тощо не застосовуватимуться під час друку (але застосовуватимуться при використанні тексту в мові)

Це можливо зробити з JQuery, як зазначено вище.

Це корисно, оскільки я використовую CDN css, так що налаштування прямо зараз

Для Mac це чудовий інструмент.

Встановити Paparazzi => скопіювати URL у Paparazzi => Зберегти зображення як => PDF

(в експорті PDF, навіть Text ist вибирається, це не просто "зображення")

https://derailer.org/paparazzi/screenshots

насолоджуйтесь :-)