Сохранение стилей CSS при экспорте предварительных элементов в PDF

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

Сохранение предварительных элементов в формате PDF с помощью CSS

Чтобы сохранить предварительный элемент в формате PDF, сохраняя при этом его стили CSS, рассмотрите следующий подход :

1. Создать новое окно: открыть новое окно браузера.
2. Добавить HTML и стили: вставить HTML-код предварительного элемент, включая все соответствующие стили, в тело документа нового окна.
3. Фокус и печать: сосредоточьтесь на новом окне и инициируйте процесс печати.
4. Диалоговое окно системной печати: в системном диалоговом окне печати выберите опцию «Печать в файл», чтобы сохранить выделенный код в формате PDF.

Пример кода

$("#save").click(function() {
  var text = $("#output")[0].outerHTML;
  // retrieve and append `style` element, or define inline styling
  var styles = $("style")[0].outerHTML;
  var popup = window.open("", "popup");
  popup.document.body.innerHTML = text   styles;
  popup.focus();
  popup.print();
});

Соображения по реализации

• Убедитесь, что переменная стилей содержит либо элемент стиля, либо встроенную информацию о стиле, соответствующую элементу pre.
• Настройте CSS-медиа запросы, необходимые для обеспечения оптимального форматирования PDF-файла.

Заключение

Реализуя эти методы, вы можете эффективно сохранять pre-элементы в формате PDF, сохраняя при этом их стиль CSS, что позволяет пользователям легко поделитесь и заархивируйте выделенный код с точным представлением.