Вопрос или проблема
Это на Mac OS X, Chrome 35 (но, вероятно, должно сработать и в других местах):
Мне нужно распечатать содержимое веб-страницы/веб-магазина, которое скрыто за/под довольно неудачным конструкцией div..
Есть ли способ “извлечь” содержимое div, которое содержит прайс-лист, чтобы распечатать все сразу? Думаю, это может пригодиться и в других случаях.
Пока я смотрел в инструменте “Изучить элемент” Chrome, я заметил, что содержимое находится внутри div, но не могу его извлечь.
Вы можете скопировать содержимое <div> с помощью CTRL (или Command, если вы на Mac) + C.
Затем вы можете открыть предпочитаемый текстовый редактор (например, TextWrangler или Notepad) и вставить содержимое туда. Затем сохраните его как ANYNAMEYOUWANT.html на рабочем столе или в любом доступном, не скрытом месте. Убедитесь, что вы сохраняете расширение .html.
Затем перейдите к месту, где вы его сохранили, щелкните правой кнопкой мыши и выберите “Открыть с помощью”, затем выберите Google Chrome из всплывающего окна.
После этого, когда файл откроется в Chrome, нажмите CTRL (или Command + P) и распечатайте документ.
Стили не будут отображаться, но это проблема при печати почти любой веб-страницы.
Ответ или решение
Чтобы распечатать содержимое <div> элемента на веб-странице с использованием браузера Google Chrome, вы можете использовать несколько шагов. Ниже описан процесс, который позволит вам выделить и распечатать нужную информацию, даже если она скрыта под сложной структурой HTML.
Шаг 1: Открытие инструмента разработчика
- Запустите Google Chrome.
- Перейдите на нужную веб-страницу.
- Откройте инструменты разработчика. Для этого нажмите
Command + Option + Iна Mac или правый клик на странице и выберите "Просмотреть код" (или "Inspect", если у вас настроен английский интерфейс).
Шаг 2: Поиск необходимого <div>
- Используйте панель элементов. В инструментах разработчика перейдите в раздел "Elements", где будет представлена структура HTML-страницы.
- Найдите нужный
<div>. Вы можете воспользоваться комбинацией клавишCommand + Fдля быстрого поиска по коду. Введитеclass="s-prose js-post-body"или непосредственно текст, который хотите распечатать. Найдите тот<div>, который содержит нужный вам контент.
Шаг 3: Копирование содержимого
- Выделите содержимое
<div>. Кликните правой кнопкой мыши на нужном элементе и выберите "Копировать" → "Копировать элементы" (или просто используйтеCommand + Cдля копирования). - Скопируйте текст. Если необходимо, вы можете также открыть
<div>, выделить нужный текст, и нажатьCommand + C, чтобы скопировать текстовое содержимое.
Шаг 4: Создание HTML-файла для печати
- Откройте текстовый редактор. Как, например, TextEdit или любой другой.
- Создайте новый документ. Поставьте в него следующий минимальный HTML-код:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Печать содержимого</title>
</head>
<body>
<!-- Вставьте сюда весь скопированный контент div -->
Вставьте сюда ваш текст или HTML-код.
</body>
</html>- Сохраните файл. Сохраните его как
filename.htmlна рабочем столе или другом доступном месте.
Шаг 5: Печать документа
- Откройте сохранённый файл. Дважды кликните по файлу, чтобы открыть его в Google Chrome.
- Начните печать. Нажмите
Command + Pдля открытия меню печати. Обратите внимание, что стилевое оформление может не отображаться, но текст и структура должны остаться.
Дополнительные рекомендации
- Изменение настроек печати. В окне печати вы можете настроить параметры, такие как выбор принтера, количество копий и масштаб.
- Предварительный просмотр. Всегда полезно заранее просмотреть, как будет выглядеть документ при печати, что позволит избежать ненужных трат на бумаги.
Следуя указанным шагам, вы сможете легко извлечь и распечатать содержимое <div> элемента с любой веб-страницы, что может быть полезно в будущих случаях.