css - 在 Chrome 中强制打开打印的详细信息/摘要标签

Question

我尝试在 Chrome 中打印详细信息标签的内容，但我无法强制打开它。

这是我打印 CSS 中的内容:

details, details > * { display:block !important; }

但是只有在打印页面之前打开详细信息才会显示内容。

有没有办法通过 chrome 上的 css print 强制打开细节？

Answer 1

合理的 jQuery 跨浏览器解决方案(非 Opera)...改编自 https://www.tjvantoll.com/2012/06/15/detecting-print-requests-with-javascript/ :

// Set up before/after handlers
var beforePrint = function() {
    $("details").attr('open', '');
};
var afterPrint = function() {
    $("details").removeAttr('open');
};

// Webkit
if (window.matchMedia) {
    var mediaQueryList = window.matchMedia('print');
    mediaQueryList.addListener(function(mql) {
        if (mql.matches) {
            beforePrint();
        } else {
            afterPrint();
        }
    });
}

// IE, Firefox
window.onbeforeprint = beforePrint;
window.onafterprint = afterPrint;