Программирование

Как сделать версию для печати на сайте

Не знаю как у вас, но у меня на сайтах версия для печати пользуется определенным успехом. А началось все с того, что пользователи попросили сделать ее в двух вариантах: только текст без всякого оформления и текст с картинками. Конечно, можно было просто использовать css, но мне не хотелось возиться и прописывать стили для всех не отображаемых элементов. К тому же, такой способ не слишком удобен в случае, если у вас много сайтов, ведь на каждом из них придется проводить всю эту бесполезную работу. Поэтому я решил задачу по-другому: нашел где-то функцию вырезания тегов и сварганил вот такой скрипт.

Для начала нам нужно обернуть весь печатаемый текст в тег с уникальным id.

<div id="PrintMe"></div>

Сделать это достаточно легко, надо лишь найти в вашем движке функцию, отвечающую за вывод контента.

Теперь настала очередь написать небольшие скрипты. Назовем их print_text.php для распечатки только текста и print_all.php для текста с картинками.

print_text.php:

<body oncopy="return false" oncontextmenu="return false" ondragstart="return false">
<div style="background: blue; width: 97%; padding: 10px;">
<input class="button" type="submit" value="Печать" onclick="print();">
</div>
<br>
Эти и другие статьи ждут вас на <strong><font color="red">site.ru</font></strong>.
<br><br>
<script type="text/javascript">
function strip (input, allowed) {
    allowed = (((allowed || "") + "").toLowerCase().match(/<[a-z][a-z0-9]*>/g) || []).join('');
    var tags = /<\/?([a-z][a-z0-9]*)\b[^>]*>/gi,
        commentsAndPhpTags = /<!--[\s\S]*?-->|<\?(?:php)?[\s\S]*?\?>/gi;
    return input.replace(commentsAndPhpTags, '').replace(tags, function ($0, $1) {        return allowed.indexOf('<' + $1.toLowerCase() + '>') > -1 ? $0 : '';
    });
}

document.write(strip(window.opener.document.getElementById("PrintMe").innerHTML,"<h2>"));
</script>
</body>

print_all.php:

<body oncopy="return false" oncontextmenu="return false" ondragstart="return false">
<div style="background: blue; width: 97%; padding: 10px;">
<input class="button" type="submit" value="Печать" onclick="print();">
</div>
<br>
Эти и другие статьи ждут вас на <strong><font color="red">site.ru</font></strong>.
<br><br>
<script type="text/javascript">
function strip (input, allowed) {
    allowed = (((allowed || "") + "").toLowerCase().match(/<[a-z][a-z0-9]*>/g) || []).join('');
    var tags = /<\/?([a-z][a-z0-9]*)\b[^>]*>/gi,
        commentsAndPhpTags = /<!--[\s\S]*?-->|<\?(?:php)?[\s\S]*?\?>/gi;
    return input.replace(commentsAndPhpTags, '').replace(tags, function ($0, $1) {        return allowed.indexOf('<' + $1.toLowerCase() + '>') > -1 ? $0 : '';
    });
}

document.write(strip(window.opener.document.getElementById('PrintMe').innerHTML,'<img><a><table><tr><td><br>'));
</script>
</body>

Пояснения.

В принципе, тут все стандартно. Вначале выводится кнопка «Печать», затем небольшая реклама вашего сайта (можете ее вообще убрать), ну а потом, собственно, сам текст.

Функция strip() вырезает все ненужные теги и пропускает указанные. Таким образом, мы можем оставить в тексте все, что нам необходимо. В моем случае это картинки и таблицы.

Осталось добавить соответствующие ссылки после статьи, например, так:

Версия для печати: 
<a href="https://site.ru/print_text.php" target="_blank" rel="nofollow" onClick="newWindow = window.open(this.href,'Печать','scrollbars=yes,width=800,height=600'); newWindow.focus(); return false;">только текст</a> | 
<a href="https://site.ru/print_all.php" target="_blank" rel="nofollow" onClick="newWindow = window.open(this.href,'Печать','scrollbars=yes,width=800,height=600'); newWindow.focus(); return false;">текст с картинками</a>.<br><br>

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

Указанный способ должен работать во всех браузерах. Если вы нашли какие-то минусы, напишите в комментариях.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *