在 Firefox 中打印字段集

Question

我一直在页眉中的现有项目中添加一些新的CSS（使用media =“print”）。一切都很顺利，（这一次！）IE 给出了很好的、预期的结果，但 Firefox 没有...

问题是我有一个包含很多字段的字段集，而 Firefox 完全拒绝（即使在最新版本中）允许在字段集中进行分页。这意味着任何不能在一页上显示的内容都会丢失...

我发现 Mozilla 网站上承认了该错误，该网站已开放 3 年 - https://bugzilla.mozilla.org/show_bug.cgi?id=471015 - 但找不到任何合理的解决方法...

在我考虑删除之前有任何建议字段集或类似的？

谢谢， 戴夫

Answer 1

我的 FF 的 JQuery 解决方案：

<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>

Answer 2

正如我所猜测的，它在最新的 Nightly 中仍然存在问题。

您可以尝试执行类似于 IE Print Protector （又名 广泛使用html5shiv）。

http://www.iecss.com/print-protector/#how-it -作品

为了在打印中正确显示元素，IE Print Protector 暂时
将 HTML5 元素替换为受支持的后备元素（例如 div 和
打印时）。 IE Print Protector 还创建了一个特殊的
这些元素的样式表基于您现有的样式；这
意味着您可以通过链接中的元素名称安全地设置 HTML5 元素的样式，
样式、@imports 和@media。紧接着，IE Print Protector
将原始 HTML5 元素恢复到页面，就在您离开的位置
它。对这些元素的任何引用以及这些元素上的任何事件
将保持完整。

Firefox 现在支持 onbeforeprint。

因此，当 onbeforeprint 被触发时，您可以更改 div 的 fieldset 等。

我不确定这有多可行，而且听起来确实很复杂。

Answer 3

看看我刚刚写的这个 jQuery hack 来解决这个问题，我想我会分享，尽管我有点晚了。我相信您可以将“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>

Answer 4

由于 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);
    })
};