Я много искал и не могу найти никого, кто бы задавал этот вопрос.Я пытаюсь написать красиво оформленное резюме в HTML (и распечатать его в PDF), и выделил некоторые вещи с помощью фона CSS.Я могу сохранить большинство этих фонов, выбрав правильный вариант печати в Chrome.
Однако есть один фон, который я не могу напечатать.Я хотел, чтобы несколько тегов
имели один и тот же градиентный фон, поэтому я нашел решение (подробно здесь ), в котором для каждого элемента
используется следующий стиль CSS:
.skill{
white-space: nowrap;
/* Gradient background */
border-radius: 5px;
padding: 2px 5px;
background-image: linear-gradient(to right, hsl(120, 60%, 75%), hsl(120, 33%, 90%));
background-attachment: fixed;
background-size: 100%;
-webkit-print-color-adjust: exact;
}
Даже с -webkit-print-color-adjust Chrome не отображает эти фоны.Если я установлю background-attachment на что-то еще, оно появится в печати, но больше не будет выглядеть так, как я хочу.
Есть идеи для обхода этого?Меня не волнует совместимость с каким-либо конкретным браузером, я просто хочу иметь возможность распечатать его в формате PDF!
Редактировать: Спасибо за быстрые ответы!Просто для ясности, на моей странице не работает ни один javaScript, только HTML и CSS.Я не хочу публиковать полный код, поскольку он содержит личную информацию, но если это абсолютно необходимо, я могу вынуть все эти вещи и оставить макет и стиль.Я сделал скрипку здесь , где, что интересно, если я попытаюсь напечатать страницу, я МОГУ увидеть градиентный фон ... Вот несколько скриншотов: печать моего резюме против просмотр моего резюме в браузере . Здесь - это то, что я вижу, когда пытаюсь напечатать скрипку (именно этого я и хочу! Я почти уверен, что смогу получить этот бежевый фон с некоторыми другими материалами для печати webkit).
Попробую WkHTMLtoPDF и сообщу о том, как это работает.
Редактировать 2: WkHTMLtoPDF у меня тоже не сработал.Я получил «неизвестную ошибку» с кодом выхода 1. Я перешел к предложению просто использовать JS и background-position, и это сработало хорошо!Я удалил свойство background-attachment и использовал следующий JS:
window.onload = function(){
var skills = document.getElementsByClassName("skill");
Array.from(skills).forEach(function(item, index){
item.setAttribute("style", "background-position: -" + item.offsetLeft + "px -" + item.offsetTop + "px");
})
};
Хотя, возможно, это не самое элегантное решение, я не против, потому что я делаю это для себя больше, чем что-либо другое.Любые не-JS решения также были бы замечательными, но для меня этого достаточно.Спасибо всем!