Как конвертировать HTML в PDF, сохраняя видимость содержимого внутри прокручиваемых областей

Question

Вопрос

Когда я конвертирую HTML контент в PDF используя

1. Плагин « Печать страниц в PDF » для Firefox (содержимое прокручиваемой области сохраняется, но не может их видеть)
2. CutePDF Writer Отсутствует содержимое (нет форматирования, но доступно для чтения)
3. Сохранить как HTML -> Открыть с помощью Microsoft Word 2010 -> PDF (форматирование уничтожается)

Можно ли как-нибудь убедиться, что содержимое внутри прокручиваемых областей правильно видно?

---

Пример сценария:

Скриншот вопроса переполнения стека

Как вы можете видеть, есть некоторые коды, скрытые в представлении прокрутки.

После преобразования эта невидимая часть отсутствует в PDF

Answer 1

Решение 1. Выведите PDF (читаемый, стили не сохранены)

Используйте плагин Readability или веб-сайт

Читаемость - это бесплатная платформа для чтения, цель которой - обеспечить отличные впечатления от чтения, где бы вы ни находились, и предоставить систему, позволяющую связать читателей с авторами, которые им нравятся.

С плагином Print Edit

Print Edit позволяет редактировать содержимое веб-страницы в режиме предварительного просмотра. Редактирование веб-страницы перед печатью может сжать макет и удалить нежелательный контент, такой как реклама, боковые панели и пустые страницы.

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

шаги:

1. Добавить статью к удобочитаемости
   
2. Поменяй как выглядит пока не доволен
   
3. Нажмите Печать Изменить
   
4. Удалить материал
   
5. Предварительный просмотр прессы
   
6. Нажмите Page Setup и внесите изменения
   
7. Нажмите Создать PDF, затем Сохранить PDF
   
8. Переименуйте файл, чтобы включить расширение PDF

Решение 2. Вывод MAFF (все сохранено, другой формат файла)

Используйте MAFF (формат архива Mozilla)

Это расширение улучшает способ сохранения веб-страниц на вашем компьютере.

Это обеспечивает следующие преимущества по сравнению со встроенной системой сохранения:

• Полная страница может быть сохранена как один файл (веб-архив)
• Вы можете называть файлы, используя заголовок страницы (сохранение названия)
• Сохраненные страницы верны оригиналу (точное сохранение)

Вы можете просматривать и сохранять файлы MHT (MHTML) с отличной совместимостью с Internet Explorer; но что более важно, вы можете использовать формат файла MAFF со следующими преимуществами:

• Экономьте место на диске, так как файлы MAFF сжимаются
• Включить видео и аудио, встроенные в страницы
• Будьте универсальны, поскольку MAFF основан на ZIP и совместим с Linux и другими платформами
• Используйте открытый формат без риска блокировки поставщика

---

Answer 2

Первопричина

Основной причиной проблемы, в данном конкретном случае, является несовершенная таблица стилей для stackoverflow.com .

Если вы изучите CSS для другого сайта, такого как codereview.stackexchange.com , вы увидите

@media print {
    …

    pre {
        max-height: none;
        display: block;
        width: 600px;
        height: auto;
        overflow-x: auto;
        white-space: pre-wrap;
        white-space: -moz-pre-wrap !important;
        white-space: -pre-wrap;
        white-space: -o-pre-wrap;
        word-wrap: break-word;
        clear: both
    }

    …
}

Важнейшим свойством является white-space: pre-wrap .

обходные

Вы можете использовать несколько плагинов Firefox, таких как Firebug, Web Developer или Stylish, чтобы временно настроить правила стиля перед печатью. Такие изменения не будут сохраняться после загрузки страницы.

В качестве альтернативы, вы можете переопределить CSS полупостоянно, без надстроек, отредактировав userContent.css. В частности, самая узкая настройка, которая решит эту проблему с макетом:

@-moz-document domain(stackoverflow.com) {
    @media print {
        pre {
            white-space: pre-wrap;
        }
    }
}

После применения userContent.css

Скрытый код сохраняется.