Печать html-страницы с помощью internet explorer

Мне нужно распечатать таблицу со своим стилем Итак, я использую jQuery.copyCSS для клонирования своего CSS-стиля в другом элементе (потому что я тестирую его на IE 8 и, похоже, он не сохраняет CSS после нажатия/вызова window.print()) https://github.com/moagrius/copycss Печать html-страницы с помощью internet explorer

Я думал «отправить» таблицу на другую страницу и позвонить оттуда печать.

Таким образом, мне нужно клонировать CSS в другой элемент (перейти на второй странице)

$("#table_report").clone().attr({"id":"table_report_clone", "name":"clone"}).appendTo("body"); // doesn't matter if it appears on the page, I will just pass these one 

    $('#table_report_clone').copyCSS('#table_report'); // copy CSS from original to clone 

    var clone = $("#table_report_clone").html(); 

    var w = window.open(); 
    $(w.document.body).html(clone); //table_report should be the table with its style 
    w.document.close();

Так, проходя .html него будет анализировать только HTML не включая стиль

Как может Я делаю это?

EDIT 1: Теперь некоторые иконки быть displayed..however таблицы действительно 'сырые' w.document.write (клон); // вместо $ (w.document.body) .html (clone);

EDIT 2:

Измененный добавить некоторые советы по @Roljhon

En фактически это делает работу на FF, Chrome, но в IE 8-а.. (Во всяком случае, я использую JQuery 1.5.1)

dumpCSSText является функцией от https://stackoverflow.com/a/15011387/7370271 , так как я должен получить/присоединиться стили атрибуты

 $("#table_report").inlineStyler(); 
     var table_report = document.getElementById("table_report"); 

     var w = window.open(); 
     var css = "" + dumpCSSText(table_report) //css of your table_content 

     var style = document.createElement('style'); 

     style.type = "text/css"; 
     style.appendChild(document.createTextNode(css)); 

     w.document.head.appendChild(style); 
     w.document.body.innerHTML = document.getElementById("table_report").innerHTML

EDIT 3: Теперь работает

var table_report = $ ("# table_report"). Html();

 var w = window.open(); 
     w.document.write('<html><head><link rel="stylesheet" href="/i/css/apex.min.css?v=4.2.6.00.03" type="text/css" /><!--[if IE]><link rel="stylesheet" href="/i/css/apex_ie.min.css?v=4.2.6.00.03" type="text/css"/><![endif]--><link rel="stylesheet" href="/i/libraries/jquery-ui/1.8.22/themes/base/jquery-ui.min.css" type="text/css" /></head><body>'); 

     $(w.document.body).html(table_report); 

     w.document.write('</body></html>'); 
     w.document.close(); 
     w.focus(); 
     w.print(); 
     w.close();

Наконец я теперь на 90% .. Единственная проблема заключается в CSS в IE8 ..

Спасибо

источник

2017-01-19 Michael Johnks

Я попытался создать решение вашей проблемы, и это, возможно, решить это или дать вам представление о том, что делать, чтобы передать таблицу css.

Вариант 1

Вы можете создать ссылку на stylesheet.Create непосредственно из вашего JavaScript. Но убедитесь, что содержимое таблицы стилей является точным CSS table_content и добавьте его в раздел главы нового окна и в то же время напишите таблицу в основной части нового окна.

var link = document.createElement('link'); 
link.rel = "stylesheet"; 
link.href ="table_content_style.css"; // this will have your table_content_clone CSS 

w.document.head.appendChild(link); 
w.document.body.innerHTML = "<h1>test</h1>"; // your html table markup

Вариант 2

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

var css = "body{background-color: red;}"; //css of your table_content 
var style = document.createElement('style'); 
style.type="text/css"; 
style.appendChild(document.createTextNode(css)); 

w.document.head.appendChild(style); 
w.document.body.innerHTML = "<h1>test</h1>"; // your html table markup

Я надеюсь, что это поможет. См. Скрипку: https://jsfiddle.net/0vzwzrpq/

источник

2017-01-19 11:48:44 Roljhon

Спасибо, это работает на FF, Chrome..but в IE 8 Нету Я использую функцию, чтобы получить атрибуты стиля от элемента. .inlineStyler() от https://github.com/davecranwell/inline-styler помогает мне положить все в строку –

Спасибо за помощь, я почти закончил –

Эй, приятель, я попытался но я думаю, что это функция безопасности IE, которую вы не можете перенести узел DOM в другой документ. Но я постараюсь найти обходной путь, этот вопрос мне очень интересен: D быстро обновите ответ, если найдете его! – Roljhon

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

@media print { 
    body { 
     background-color: pink; 
    } 
}

Существует очень хорошая статья здесь о предмете: https://www.smashingmagazine.com/2011/11/how-to-set-up-a-print-style-sheet/

источник

2017-01-19 12:02:09 bini

Я тестирование на IE 8, которое не поддерживает медиа-запросы Даже не используя css3-mediaqueries-js .. –

вместо этого используйте правила стиля inline. Для IE8 и ниже к центру вам нужно

(эмуляция IE7 не распознает правило автоматической поля). Затем вы можете использовать jquery для клонирования таблицы (в комплекте с правила встроенного стиля) в окно предварительного просмотра печати. –

Смежные вопросы