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

50

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

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

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

vy32
источник
Если речь идет о сторонних веб-сайтах, возможно, вы можете попробовать инструменты разработчика Chrome (Ctrl + Shift + I), затем щелкнуть правой кнопкой мыши узел / элемент (в данном случае таблицу стилей печати) и выбрать Delete This Node.
ДавЧана
Это дубликат!
vy32
Не прямой ответ на ваш вопрос, но если вы используете Firefox, вы просто раздражены тем, что все ссылки прикреплены с их полными URL-адресами в предварительном просмотре печати (кто бы ни думал, что это хорошая идея die (http://www.have-an-agonizingly-slow-and-painful-death!!!.com)), просто откройте Inspect Element (Dev Tools ) , перейдите в редактор стилей , воспользуйтесь удобным списком правил @media с правой стороны, чтобы найти таблицу стилей со printстилями, а затем удалите все printприменяемые правила a[href]. Затем снова запустите предварительный просмотр.
ADTC

Ответы:

24

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

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

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

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

Джеймс
источник
1
Спасибо. Это отличное решение. Удручает, но замечательно. Основной веб-сайт, с которым у меня возникают проблемы, - это Wired, который по какой-то причине печатает ужасно, но отлично выглядит на экране.
vy32
Мне нужен плагин, который делает это.
vy32
3
@ vy32 это совсем не плохая идея. Я давно хотел поиграть с расширениями Chrome. На каникулах у меня наконец-то было пару часов. Итак, вот PrintScreen, маленькая кнопка, которую вы нажимаете, когда на странице есть пользовательские селекторы css для печати / экрана. ссылка
Джеймс
кнопка PrintScreen не работает так хорошо ???
vy32
1
Я подозреваю, что это проблема взаимодействия с пользователем. Обычно я уделял больше внимания пользовательскому опыту, но на этот раз я просто играл с новыми техниками и системами и не обращал внимания. После нажатия на кнопку PS вам нужно нажать на печать обычным способом. Вы правы, было бы больше смысла, если бы у меня было расширение, вызывающее печать напрямую. Если у меня будет время на этой неделе, я постараюсь обновить расширение, чтобы перейти прямо к экрану печати, как это и должно быть. Спасибо
Джеймс
17

Следуя идее Джеймса, но используя 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);
Лео Галлуччи
источник
11

Существует новый метод прямого выбора эмуляции мультимедиа в Инструментах разработчика, см. Https://stackoverflow.com/questions/9540990/using-chromes-element-inspector-in-print-preview-mode/

Китчин
источник
1
Это работает. Следуйте инструкциям и выберите «экранный» тип носителя. Тогда при печати он будет использовать «экран»
Carl G
По мере развития программного обеспечения должен происходить стек обмена - этот ответ должен быть выбранным.
Михаэль
6

Я нашел простой способ сделать это в Chrome .

Откройте «Инструменты разработчика»> «Рендеринг»> «Экран» в разделе «Эмулировать CSS-медиа».

Теперь попробуйте распечатать. Он выберет экранный CSS вместо Print CSS.

диджей рок
источник
какой веб-браузер?
vy32
В браузере Chrome
DJ Rock
Это работает и является самым быстрым решением!
Лоран
Более конкретно о текущем Chrome: Откройте инструменты разработчика. Вверху справа 3-х точечное меню> Дополнительные инструменты> Рендеринг. Прокрутите вниз, чтобы эмулировать CSS Media.
Лоран
5

У Лео была хорошая идея , но она не совсем соответствует тому, что сказал Джеймс :

$('*[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 должен был быть загружен в это время.

Бастиан Бланкенбург
источник
4
  1. Делай, что сказал Джеймс ;)

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

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

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

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

РЕДАКТИРОВАТЬ: Chrome изменил вид печати в 2014 году, я думаю, поэтому вам больше не нужно использовать связанный аддон.

mgutt
источник
Использование Chrome Developer Tools для установки «Эмулировать CSS-медиа» на «Экран» - это единственный ответ, который работает.
Бенджамин
3

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

Решением, которое я нашел, было расширение Print Edit для Firefox и Chrome . Он позволяет редактировать страницу непосредственно перед печатью и включает в себя простую кнопку для использования веб-стиля ( @media screen) для страницы.

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

Брайан С
источник
Это отлично сработало для меня. Я уже потратил 10 минут, меняя текст сайта на фиолетовый, так как в моем принтере кончились чернила. Используя это решение, я мог бы установить расширение, нажать кнопку веб-стиля и работать, :)
Крис Невилл,
1

Иногда веб-сайты используют CSS, чтобы указать, что разные стили должны использоваться на экране и при печати. Это часто хорошо, но также может быть запутанным и проблематичным. Проверьте исходный код страницы и найдите что-то вроде:

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

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

Ключевая вещь, чтобы искать это @media print. Веб-сайты часто имеют сложную структуру, и это может помочь сохранить страницу локально и проверить ее с помощью рекурсивного инструмента текстового поиска.

Когда вы думаете, что нашли место в коде CSS, вы можете изменить страницу прямо в браузере, используя функции разработчика. (В Chrome вы нажимаете Ctrl+ Shift+, Iчтобы запустить их.)

Найдите код CSS и просто удалите или сделайте недействительными строки, вызывающие проблему. Убедитесь, что операция сработала, используя «Предварительный просмотр».

Gruber
источник
0

Установите аддон 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);
xs400
источник
-1

Попробуйте включить "Print background (colors & images)"опцию в Page Setupи проверить, как она выглядит Print Preview(это для FF).

Римский
источник
1
Не имеет желаемого результата. Сожалею.
vy32
-1

Подобно Джеймсу - использование вкладки «Источники» в инструментах разработчика Chrome, и заменить все экземпляры media printс media speech. Таким образом, все изменения CSS для скрытия панелей навигации и т. Д. Не будут применяться при печати (но будут применяться при использовании преобразования текста в речь)

Это может быть выполнимо с JQuery как выше.

Это полезно, так как я использую CDN css, так что настройка прямо

Вы, сэр, возьмите это
источник
-2

На Mac есть отличный инструмент для этого.

Установите Paparazzi => скопировать URL в Paparazzi => Сохранить изображение как => PDF

(в экспорте PDF, даже текст не выбирается, это не просто «изображение»)

https://derailer.org/paparazzi/screenshots

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

Майкл Кауфманн
источник
К сожалению, эта программа печатает растровые изображения, что означает, что шрифты растеризуются. Это не то, что я хочу.
vy32