Как распечатать с таблицей стилей экрана?

Некоторые веб-сайты, которые я использую, имеют очень плохие таблицы стилей для печатных СМИ, но их таблицы стилей экрана довольно хороши.

Можно ли как-то сказать моему браузеру игнорировать таблицу стилей печати и просто печатать с таблицей стилей экрана?

Я также хотел бы сделать это, когда я хочу показать клиентам разницу между ними.

Использование Chrome Developer Tools ( Ctrl+ Shift+ I) - единственное, что я нашел, что работает.

1. Найдите все экземпляры media="screen"и удалите этот атрибут.
2. Затем найдите media="print"и удалите всю эту ссылку.
3. Затем попробуйте распечатать.

Это обычно дает мне страницу со стилем экрана.

Если вы действительно хотите отключить стили печати, вы можете установить расширение для веб-разработчиков (я думаю, что есть версия для Firefox и Chrome). Имеет кнопку для отключения стилей печати. Однако он не расширяет стиль «экрана» для печати, поэтому в большинстве случаев он работает не так, как вы надеетесь.

Следуя идее Джеймса, но используя 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 вместо Print 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 и ожидает 2secs до его завершения, но если этого ожидания недостаточно, просто запустите его снова, jQuery должен был быть загружен в это время.

1. Делай, что сказал Джеймс ;)

   Вы можете проверить вывод, открыв настройки инструментов разработчика Chrome (в правом нижнем углу) и выбрав в «Переопределении» параметр «Эмулировать печать на мультимедиа CSS». Переключая эту опцию, вы можете сравнить печать и просмотр экрана. Повеселись!

2. Установите это дополнение: https://chrome.google.com/webstore/detail/print-background-colors/gjecpgdgnlanljjdacjdeadjkocnnamk

Теперь также печатаются фоновые изображения и цвета.

Ошибка: не работает со спрайтами CSS.

РЕДАКТИРОВАТЬ: 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/

В конце я изменил «screen» на «print» (я понятия не имею о 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, даже текст не выбирается, это не просто «изображение»)

https://derailer.org/paparazzi/screenshots

наслаждаться :-)