Печать наборов полей в Firefox

Я добавил несколько новых CSS в существующий проект (используя media="print") в заголовке страницы. Это идет гладко и (на этот раз!) IE дает хорошие, ожидаемые результаты, но Firefox не...

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

Я обнаружил ошибку, признанную на веб-сайте Mozilla, который был открыт в течение 3 лет - https://bugzilla.mozilla.org/show_bug.cgi?id=471015 - но не могу найти разумного обходного пути...

Любые предложения, прежде чем я посмотрю, чтобы удалить fieldsets или аналогичные?

Спасибо дэйв

Источник

4 ответа

Решение

Как я и догадался, он все еще сломан в последнем Nightly.

Вы можете попробовать сделать что-то похожее на IE Print Protector (он же широко используется html5shiv).

http://www.iecss.com/print-protector/

Чтобы правильно отображать элементы при печати, IE Print Protector временно заменяет элементы HTML5 поддерживаемыми резервными элементами (такими как div и span) при печати. IE Print Protector также создает специальную таблицу стилей для этих элементов на основе существующих стилей; это означает, что вы можете безопасно стилизовать элементы HTML5 по имени элемента в ссылках, стилях, @imports и @media. Сразу после этого IE Print Protector восстанавливает оригинальный элемент HTML5 на странице, там, где вы ее оставили. Любые ссылки на эти элементы и любые события в этих элементах останутся без изменений.

Firefox теперь поддерживает onbeforeprint,

Так когда onbeforeprint уволен, вы можете изменить fieldsetс для divс, или что-то.

Я не уверен, насколько это жизнеспособно, и это звучит сложно.

Источник

Мое решение JQuery для FF:

<script type='text/javascript'>
    $(window).bind('beforeprint', function(){
        $('fieldset').each(
            function(item)
            {
                $(this).replaceWith($('<div class="fieldset">' + this.innerHTML + '</div>'));
            }
        )
    });
    $(window).bind('afterprint', function(){
        $('.fieldset').each(
            function(item)
            {
                $(this).replaceWith($('<fieldset>' + this.innerHTML + '</fieldset>'));
            }
        )
    });
</script>
Источник

Посмотрите на этот jQuery-хак, который я только что написал, чтобы решить эту проблему. Я решил поделиться им, хотя и немного опоздал. Вы можете изменить "printEnclosure" на HTML-тег, который я считаю, и CSS в конце, очевидно, не является обязательным.

<div id="printEnclosure">
<fieldset>
<legend>TEST</legend>

Test Content goes here...
</fieldset>
</div>

<script type="text/javascript">
/* <![CDATA[ */
$(document).ready(function()
{
        var i = 0;
        $('#printEnclosure').find('fieldset').each(function()
        {
            i++;
            $(this).replaceWith('<div id="convertedfieldset'+i+'">'+$(this).html()+'</div>');
            $('div#convertedfieldset'+i).css('display','inline').css('text-align','left');
        });
});
/* ]]> */
</script>
Источник

Поскольку в настоящее время JQuery не так распространен, вот полное решение на JavaScript:

      window.onbeforeprint = event => {
    document.querySelectorAll('fieldset').forEach(item => {
        item.insertAdjacentHTML("beforebegin", `<div class="fieldset">${item.innerHTML}</div>`);
        item.parentElement.removeChild(item);
    })
};

window.onafterprint = event => {
    document.querySelectorAll('.fieldset').forEach(item => {
        item.insertAdjacentHTML("beforebegin", "<fieldset>" + item.innerHTML + "</fieldset>");
        item.parentElement.removeChild(item);
    })
};
Источник
Другие вопросы по тегам