Firefox не может применять CSS при печати

Im using firefox 16.0.2. Я хотел бы распечатать содержимое div с помощью правил CSS, определенных в импортированном файле. При попытке печати в Chrome это прекрасно работает, но в Firefox печатная страница не имеет формата css.Firefox не может применять CSS при печати

<html> 
    <head> 
     import css here 
    </head> 
    <body> 
     <div id="printable"></div> 
    </body> 
</html>

При использовании JavaScript для печати Div ID = печатаемых результатов бумаги только содержание HTML без правил CSS, результат на экране идеально. Есть ли какой-либо способ для печати в Firefox с определением всех css, любая помощь будет оценена.

Сложение ниже мой Javascript для печати Div

function print(id) 
{ 
    var mywindow = window.open('', id, 'height=600,width=800'); 
    var data = document.getElementById(id).innerHTML; 
    mywindow.document.write('<html><head><title>Print</title>'); 
    mywindow.document.write('<link rel="stylesheet" href="../../lib/css/report/main.css" type="text/css" />'); 
    mywindow.document.write('</head><body >'); 
    mywindow.document.write(data); 
    mywindow.document.write('</body></html>'); 


    mywindow.print(); 
    mywindow.close(); 

    return true; 
}

В main.css я пытаюсь использовать @media печать {#printable .....} но это не работает. В Javascript я пытаюсь поместить media = "print", чтобы связать тег, но это ничего не значит для печати предварительного просмотра.

источник

2012-11-19 Quan M Le

Без вашего CSS и HTML, который вы используете для его импорта, было бы сложно устранить неполадки. – j08691

Можете вы добавить JavaScript, который используете? –

Вы используете media = "print" в своей таблице стилей? –

Почему вместо этого вы не используете специальный запрос на печать?

@media print { 
    #printable { 
    /*Print style goes here*/ 
    } 
}

источник

2012-11-19 17:22:40

Экономит окружающую среду, а также уменьшает расход бумаги). Распечатал документ сегодня и получил очень много страниц с ним очень мало: - < –

Он также избавляется от javascript: p –

Или ... попробуйте добавить медиа = "печать" на ваш DIV

так что-то вроде:

<html> 
    <head> 
     import css here 
    </head> 
    <body> 
     <div id="printable" media="print"></div> 
    </body> 
</html>

источник

2012-11-19 17:26:17 Bull

Ваш скрипт записывает некоторые HTML, чтобы начать загрузку таблицы стилей, то вызывает print(), не дожидаясь загрузки таблицы стилей. Вы можете не звонить print() до тех пор, пока не произойдет событие загрузки для этого <link>.

источник

2012-11-22 08:13:10

Вдохновленный Борис Збарский и после гораздо более Googling, я получил это работает, выполнив следующие действия:

Сначала создайте окурок HTML файл с именем print.html:

<!doctype html> 
<html lang='en-us'> 
<head> 
<meta charset='utf-8'> 
<!-- the print.css link doesn't need to be of media type 'print' --> 
<link rel='stylesheet' type='text/css' href='print.css'> 
</head> 
<body> 
    <div id='print_this'> 
    <!-- All the 'printable' stuff will be inserted here --> 
    </div> 
</body> 
</html>

Затем с помощью JQuery в документе html, который вы хотите распечатать, создайте объект окна (print_window, ниже) и загрузите его с HTML-заглушкой, затем соберите весь HTML-код, который вы хотите напечатать, и введите его в объект print_window. Затем печать объект окна:

// ============= jQuery =============== 
function divPrint() 
{ 
    var print_window = window.open('print.html'); // Loads the HTML stub file 
    // Do this in an onLoad event to make sure, before printing, CSS and all else 
    // is loaded and ready -- else you'll likely get a blank page. 
    print_window.onload = function() { 
     // Create an array, containing the print_window object, that will be passed to the each() method. 
     var pw = [this]; 
     // Find each element of class printable and grab its inner HTML and insert it into 
     // the stub's 'print_this' block. 
     $('.printable').each(function(index) { 
      pw[0].document.getElementById('print_this').insertAdjacentHTML('beforeend', $(this).html()); 
     }, pw); 

     // Print the print_window which is now embellished with all the stuff that was tagged as printable. 
     this.print(); 
     this.close(); 
    } 
} 


$(document).ready(function() { 
    $('#btnPrint').click(function(){ 
     divPrint(); 
    }); 
});

и, вот пример того, что выше JQuery код может (и в том же файле) обработки:

<!-- Note that the button doesn't get printed because it is not of class 'printable' --> 
<button type='button' id='btnPrint'>Print Page</button> 
<div id='stuff_not_to_print'> 
    <h1>Your mother wears army boots!</h1> 
</div> 
<div class='printable'> 
    <p>Your mother is a swell lady who's pretty, too!</p> 
</div> 
<div class='printable'> 
    <p>Yer dad's pretty cool, too!</p> 
</div> 
<div> 
    <p>This won't print!</p> 
</div>

Затем, если вы хотите форматировать выше HTML все симпатично, а затем создать файл CSS с именем print.css, что файл заглушки HTML, print.html, можно загрузить.

источник

2016-07-09 20:55:51 ReverseEMF

Firefox не может применять CSS при печати

ответ

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