Помогите (к js не подключается css) - JavaScript, Ajax

Alex-2 · 17.04.2017, 00:29

Здравствуйте!
Когда вывожу на печать конкретный див, то к нему не цепляются мои CSS.
В чем может быть причина?

html:

Код:

<div id="print-content">
Содержимое для печати
</div>

<a onClick="javascript:CallPrint('prin t-content');" title="Распечатать проект">Распечатать</a>

js:

Код:

<script language="javascript">
function CallPrint(strid) {
var prtContent = document.getElementById(strid);
var prtCSS = '<link rel="stylesheet" href="/templates/css/template.css" type="text/css" />';
var WinPrint = window.open('','','left=50,top=50,width=800,height =640,toolbar=0,scrollbars=1,status=0');

var print = document.createElement("div");
print.className = "contentpane";
print.setAttribute("id", "print");
print.appendChild(prtContent.cloneNode(true));

WinPrint.document.body.appendChild(print); 

WinPrint.focus();
WinPrint.print();
WinPrint.close();
}
</script>

_____
Код программы нужно выделять (форматировать) тегами [CODE] (читать FAQ)
Модератор

Alex-2 · 28.04.2017, 14:49

Никто не знает?(

alexander13 · 28.04.2017, 15:50

Потому что никакие таблицы стилей не подключаются, prtCSS просто висит в воздухе.
Можно, например, так:

Код:

<script language="javascript">
function CallPrint(strid) {
var prtContent = document.getElementById(strid);
//var prtCSS = '<link rel="stylesheet" href="/templates/css/template.css"  type="text/css" />'; // ---
var WinPrint = window.open('','','left=50,top=50,width=800,height =640,toolbar=0,scrollbars=1,status=0');

WinPrint.document.write('<html><head></head><body></body></html>'); // +++

var print = document.createElement("div");
print.className = "contentpane";
print.setAttribute("id", "print");
print.appendChild(prtContent.cloneNode(true));

WinPrint.document.body.appendChild(print); 

// +++
var lnk = document.createElement("link");
lnk.rel = "stylesheet";
lnk.type = "text/css";
lnk.href = "/templates/css/template.css";
WinPrint.document.body.appendChild(lnk);

WinPrint.focus();
lnk.onload = function() { 
    WinPrint.print();
    WinPrint.close();
}
}
</script>

Alex-2 · 29.04.2017, 17:15

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

Naive · 29.04.2017, 20:22

Так-то дерьмовая тема слать на печать... Дай юзеру pdf — пусть сам решает что с ним делать.

alexander13 · 02.05.2017, 11:27

Цитата:

Сообщение от Alex-2

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

Я проверял в хроме и фф, в ие и эдже действительно не работает. Вероятно, это связано с тем, что appendChild не может перемещать эл-ты между документами.
Наверное, можно что-то нашаманить, но почему не использовать медиа-запросы css? Ну, или действительно, pdf

17.04.2017, 00:29	#1
Alex-2 Пользователь Регистрация: 16.02.2017 Сообщений: 18	Помогите (к js не подключается css) Здравствуйте! Когда вывожу на печать конкретный див, то к нему не цепляются мои CSS. В чем может быть причина? html: Код: `<div id="print-content"> Содержимое для печати </div>` <a onClick="javascript:CallPrint('prin t-content');" title="Распечатать проект">Распечатать</a> js: Код: <script language="javascript"> function CallPrint(strid) { var prtContent = document.getElementById(strid); var prtCSS = '<link rel="stylesheet" href="/templates/css/template.css" type="text/css" />'; var WinPrint = window.open('','','left=50,top=50,width=800,height =640,toolbar=0,scrollbars=1,status=0'); var print = document.createElement("div"); print.className = "contentpane"; print.setAttribute("id", "print"); print.appendChild(prtContent.cloneNode(true)); WinPrint.document.body.appendChild(print); WinPrint.focus(); WinPrint.print(); WinPrint.close(); } </script> _____ Код программы нужно выделять (форматировать) тегами [CODE] (читать FAQ) Модератор Последний раз редактировалось Serge_Bliznykov; 17.04.2017 в 09:46.

29.04.2017, 20:22	#5
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	Так-то дерьмовая тема слать на печать... Дай юзеру pdf — пусть сам решает что с ним делать. Alar, верни репу!

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
[CSS]: Пытаюсь сделать Карусель без JS, но не срабатывает нужное css-свойство. Помогите разобраться.	MeriPoppins	HTML и CSS	2	10.02.2017 22:50
Не подключается css	сергей Стефаненко	HTML и CSS	7	27.11.2016 04:39
На CMS WIX удаленно подключается файл .css, но не работает @font-face	Bender1000	WordPress и другие CMS	0	18.03.2015 08:08
Помогите с CSS	rznasa	HTML и CSS	1	19.02.2015 12:51
CSS не подключается к HTML	far1towi4	HTML и CSS	4	23.04.2013 02:57

28.04.2017, 14:49	#2
Alex-2 Пользователь Регистрация: 16.02.2017 Сообщений: 18	Никто не знает?(

29.04.2017, 17:15	#4
Alex-2 Пользователь Регистрация: 16.02.2017 Сообщений: 18	Александр, благодарю за ответ. Попробовал Ваш пример сделать, перестал выводится на печать текст, который заключен в диве. Вернее вообще ничего на печать теперь не выводится, пустая страница для печати получается(.