Функция печати не печатать всю страницу с помощью jquery и css

В настоящее время у меня есть веб-приложение, которое содержит много элементов div, меню и многих других. Однако то, что я хотел бы иметь, когда пользователь нажимает печать, - это только два изображения или одно изображение в некотором случае. Предположим, что я уже получил два URL-адреса изображений, как удалить CSS всей страницы и выполнить печать, как я ожидал? Вот какой код я пробовал, кажется, он изменит всю страницу с макета веб-приложения только на 2 изображения? Могу ли я предотвратить это? благодаря:

<Сильный> print.css


<Сильный> JS

$("#printBtn").click(function() {
    $("link[media='screen']").attr("href", "print.css");
    window.print();
});

<Сильный> Обновлено:

Чтобы быть более точным, я сделаю, чтобы получить номер (ы) изображения на текущей странице, и будут напечатаны только два изображения. Как выполнить такую ​​функцию?

Предполагая, что я получу идентификатор двух img. Прежде всего, мне нужно добавить динамический класс = 'img' в этот два элемента? Каков следующий шаг до окончания печати? благодаря

flip book
flip book
0
nl ja de
Проблема в том, что, когда CSS изменится с носителя на печать, экран также изменится? Если пользователь нажал кнопку «Отменить печать», может ли он вернуться к макету webapp? благодаря
добавлено автор user782104, источник
Было бы идеально, если экран не изменится, возможно ли это?
добавлено автор user782104, источник
Я не уверен, что понимаю, что вы просите, но вы можете просто использовать display: none для элементов, которые вы не хотите показывать в media = "print" CSS
добавлено автор Pranav 웃, источник
media = "print" будет not делать что-либо на обычном экране, этот CSS будет использоваться только при выдаче команды печати. Попробуйте использовать предварительный просмотр в браузере, чтобы узнать, как это работает.
добавлено автор Pranav 웃, источник
@PranavKapoor user782104 на самом деле переключение с экрана CSS для печати CSS. То, что ему нужно сделать, это использовать оба одновременно: иметь экранный файл CSS и файл CSS для печати.
добавлено автор Robin van Baalen, источник

3 ответы

Вы можете скрыть всю страницу (i.e).

С CSS:

body {
visiblilty:hidden;
}

Затем сделайте свой div видимым (где отображается ваше изображение)

#yourdiv{
visibility:visible;
}

Then use window.print(); which would print #yourdiv

1
добавлено
да, это намного лучше, чем установить элемент интерфейса displayt: ни один за другим?
добавлено автор user782104, источник
Да, вы можете использовать видимость : hidden ; Дисплей : none; фактически удалит макет пространства.
добавлено автор Vimalnath, источник
Не рекомендовал бы этого. Вы скрываете все тело и пытаетесь сделать ребенка видимым, пока тело все еще скрыто.
добавлено автор Robin van Baalen, источник

Ваш print CSS и screen CSS не будет использоваться вместе, пока вы находитесь на экране (веб-страница), print CSS будет отсылаться ТОЛЬКО , когда ваш носителем является печать (печать).

Whenever a print command is issued, the print CSS is referred along with the screen css, with print specific CSS properties having a higher priority.
Whenever, you are done and return to the same page, the page WILL return as is before the print command was issued.

Из W3 ,

<сильный> Печать

     

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

В вашем конкретном случае вы хотите напечатать только 2 изображения, а не все из них. Так,

print.css:

img {
    display: none;
}
#img_34, #img_35 {      /*Image id's*/
    display: block;
}

Чтобы проверить страницы с помощью print css, просто сделайте предварительный просмотр печати в браузере, чтобы получить представление о том, как он выглядит, и нажмите Esc , чтобы вернуться на страницу.

If you are interested in reading up more about print css, and guidelines, this is a good article by SmashingMagazine

1
добавлено

Why do you change you <link media='screen' /> to a print.css stylesheet?

Лучше использовать, если вы просто используете таблицу screen и таблицу стилей print бок о бок. Для этого не нужен Javascript/jQuery:

<!-- Default styling -->
<link rel="stylesheet" type="text/css" href="/css/default.css" media="screen" />

<!-- This styling is only used for printing -->
<link rel="stylesheet" type="text/css" href="/css/print.css" media="print" />

To answer your question, you can just add a div to the bottom of your page like <div id='print-wrap'></div> and put all your printy stuff in there.

Затем в вашем CSS вы делаете что-то похожее на это:

<Сильный> default.css

#print-wrap { display: none; }

<Сильный> print.css

img { display: none; }
#print-wrap { display: block; }
#img_34 { display: block !important; }
#img_35 { display: block !important; }

Обновить

Обновитьd the answer corresponding to the Обновитьd question. If you want just two images visible on your printed page, just hide all other images with display: none; and show the images you want to print using display: block !important;

1
добавлено
Как насчет того, когда пользователь отменит печать/завершение печати, как проверить это событие? благодаря
добавлено автор user782104, источник
спасибо, я обновил вопрос, можете ли вы взглянуть на это?
добавлено автор user782104, источник
Когда печать отменена, не происходит инициирование основного события, поэтому вы не можете «проверить» это событие.
добавлено автор Robin van Baalen, источник
@ user782104 см. обновленный ответ.
добавлено автор Robin van Baalen, источник
JavaScript Jobs — чат
JavaScript Jobs — чат
8 336 участник(ов)

JavaScript Jobs — чат для поиска работы и людей Правила оформления: https://teletype.in/@telegram-ru/r1WQe5F1m См. также: @mobile_jobs, @devops_jobs, @nodejs_jobs, @react_js, @angular_ru, @js_ru

JavaScript.ru
JavaScript.ru
7 932 участник(ов)

Сообщество сайта JavaScript.ru в Slack.

pro.js
pro.js
4 675 участник(ов)

Про JavaScript и NodeJS Invite: https://t.me/joinchat/Be4rsT5Rsgq30DHutjxXgA Правила: http://telegra.ph/ru-chat-rules-06-19 Вакансии только с ЗП, не чаще раза в неделю.

Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

JavaScript — русскоговорящее сообщество
JavaScript — русскоговорящее сообщество
3 269 участник(ов)

Рекомендуем сразу отключить уведомления Правила: https://rudevs.network/ByaMH6un7 См. также: @js_noobs_ru, @nodejs_ru, @typescript_ru, @react_js, @electron_ru Вакансии и поиск работы: @javascript_jobs

JavaScript Noobs — сообщество новичков
JavaScript Noobs — сообщество новичков
2 484 участник(ов)

Чат для новичков

CSS — русскоговорящее сообщество
CSS — русскоговорящее сообщество
1 502 участник(ов)

Сообщество любителей CSS Возникли проблемы с CSS? – пиши сюда, обсудим и предложим самое лучшее решение Работа: @css_ru_jobs Правила: https://teletype.in/@css_ru/r1EWtQ2w7 Приходите в наши чаты @javascript_ru и @frontend_ru Флуд: @css_flood

Чат — Типичный Верстальщик
Чат — Типичный Верстальщик
1 080 участник(ов)

Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

javascript_ru
javascript_ru
915 участник(ов)

Сообщество любителей самого популярного языка программирования в мире. Чат основан в 2009 году. Логи: https://goo.gl/9EOeM7 Поддержка бота: @chat_linker (ссылка на репу внутри) Вам будут интересны @frontend_ru и @css_ru

jsChat
jsChat
603 участник(ов)

Чат посвященный программированию на языке javaScript Перед отправкой ссылки на Ваш контент посоветуйтесь с админом Все ссылки удаляются ботом автоматически

JavaScript for Zombies Chat
JavaScript for Zombies Chat
492 участник(ов)

Чат про JavaScript для настоящих zombie! Вход строго по приглашениям! Ссылка для строгих приглашений: https://t.me/joinchat/AAMBHz3Uyr0tuZ7VaB029g

All That JS
All That JS
417 участник(ов)

JS на русском

Веб-Технологи: UI/UX, Вёрстка, Фронтенд
Веб-Технологи: UI/UX, Вёрстка, Фронтенд
167 участник(ов)

Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

DTP :: @DTPublish
DTP :: @DTPublish
147 участник(ов)

Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing

css_jobs
css_jobs
26 участник(ов)

Чат для вопросов по css и html: @css_ru Флуд: @css_flood Канал с вакансиями и резюме: @css_jobs_feed

css_флуд
css_флуд
10 участник(ов)