Некоторые веб-сайты, которые я использую, имеют очень плохие таблицы стилей для печатных СМИ, но их таблицы стилей экрана довольно хороши.
Можно ли как-то сказать моему браузеру игнорировать таблицу стилей печати и просто печатать с таблицей стилей экрана?
Я также хотел бы сделать это, когда я хочу показать клиентам разницу между ними.
Использование Chrome Developer Tools (Ctrl+Shift+I) - единственное, что я нашел, и это работает.
media="screen" и удалите этот атрибут.media="print" и удалите всю эту ссылку.Это обычно дает мне страницу со стилем экрана.
Если вы действительно хотите отключить стили печати, вы можете установить расширение для веб-разработчиков (я думаю, что есть версия для 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 Developer Tools (правый нижний угол) и выбрав в "Переопределении" параметр "Эмулировать печать мультимедиа CSS". Переключая эту опцию, вы можете сравнить печать и просмотр экрана. Повеселись!
Установите это дополнение:https://chrome.google.com/webstore/detail/print-background-colors/gjecpgdgnlanljjdacjdeadjkocnnamk
Теперь также печатаются фоновые изображения и цвета.
Ошибка: не работает со спрайтами CSS.
РЕДАКТИРОВАТЬ: Chrome изменил вид печати в 2014 году, я думаю, поэтому вам больше не нужно использовать связанный аддон.
У Лео была хорошая идея , но он не совсем соответствует тому, что сказал Джеймс:
$('*[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 должен был быть загружен в это время.
Я нашел простой способ сделать это в Chrome.
Откройте «Инструменты разработчика»> «Рендеринг»> «Экран» в разделе «Эмулировать мультимедиа CSS».
Теперь попробуйте распечатать. Он выберет экран CSS вместо Print CSS.
Я только что столкнулся с этой проблемой на веб-сайте, в котором был один файл 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
наслаждаться :-)