ASP.NET项目jQuery打印图片：移除页眉页脚及每页多图实现问询

我正在开发一个ASP.NET项目，当前页面需要打印图片，已使用jQuery实现打印功能，代码如下：

function VoucherSourcetoPrint(source) { 
    var width = $("#imgWidth").val(); 
    var height = $("#imgHeight").val(); 
    return "<html><head><script>function step1(){\n" + 
        "setTimeout('step2()', 10);}\n" + 
        "function step2(){window.print();window.close()}" + 
        "\n<\/script></head><body onload='step1()'>\n" + 
        "<img src='" + source + "' style='width: " + width + "px; height: " + height + "px;' /></body></html>"; 
} 
function VoucherPrint(source) { 
    source = $('#imgCtrl').attr('src'); 
    Pagelink = "about:blank"; 
    var pwa = window.open(Pagelink, "_new"); 
    pwa.document.open(); 
    pwa.document.write(VoucherSourcetoPrint(source)); 
    pwa.document.close(); 
}

如代码所示，图片宽高取自文本框，调用VoucherPrint函数后会弹出打印对话框。我希望实现：通过代码移除打印页眉页脚，以及设置每页打印的图片数量，请问能否通过jQuery或CSS实现？

嘿，这两个需求都可以通过**CSS的打印媒体查询（@media print）**来实现，配合你现有的jQuery代码就能搞定，我给你一步步拆解：

一、移除打印页眉页脚 #

浏览器默认的打印页眉页脚（比如页码、网址）没办法完全通过JS强制移除，但可以用CSS来隐藏它们，同时设置打印区域的边距为0，让内容占满页面。你需要在生成的打印页面的<head>里添加打印专属样式：

修改你的VoucherSourcetoPrint函数，在<head>里插入<style>标签：

function VoucherSourcetoPrint(source) { 
    var width = $("#imgWidth").val(); 
    var height = $("#imgHeight").val(); 
    // 添加打印样式
    var printStyles = "<style>" +
        "@media print {" +
            "/* 隐藏浏览器默认页眉页脚 */" +
            "@page {" +
                "size: auto;" +
                "margin: 0mm;" + // 设为0边距，覆盖默认页眉页脚空间
            "}" +
            "body {" +
                "margin: 10mm;" + // 给内容加一点内边距，避免贴边
            "}" +
            "/* 针对Chrome等webkit内核浏览器的额外处理 */" +
            "header, footer { display: none !important; }" +
        "}" +
        "</style>";

    return "<html><head>" + printStyles + "<script>function step1(){\n" + 
        "setTimeout('step2()', 10);}\n" + 
        "function step2(){window.print();window.close()}" + 
        "\n<\/script></head><body onload='step1()'>\n" + 
        "<img src='" + source + "' style='width: " + width + "px; height: " + height + "px;' /></body></html>"; 
}

注意：不同浏览器的表现略有差异，比如Firefox可能需要用户在打印设置里手动关闭“页眉和页脚”，但上述CSS已经能覆盖大部分场景，让内容不会被默认页眉页脚遮挡。

二、设置每页打印的图片数量 #

这个可以通过CSS的分页属性和**布局（Grid/Flex）**来实现，比如你想每页打印2张图片：

1. 首先，假设你现在要打印多张图片（如果是单张的话，先调整代码循环生成img标签），然后在打印样式里添加布局和分页规则：

修改VoucherSourcetoPrint函数里的printStyles，加上布局和分页控制：

var printStyles = "<style>" +
    "@media print {" +
        "@page {" +
            "size: auto;" +
            "margin: 0mm;" +
        "}" +
        "body {" +
            "margin: 10mm;" +
            "display: grid;" +
            "grid-template-columns: 1fr;" + // 单列布局，每页2张的话设为1fr，然后控制行数
            "grid-auto-rows: auto;" +
            "gap: 10mm;" + // 图片之间的间距
        "}" +
        ".print-img {" +
            "width: " + width + "px;" +
            "height: " + height + "px;" +
            "page-break-inside: avoid;" + // 避免图片被分页截断
        "}" +
        /* 每2张图片后强制分页 */
        ".print-img:nth-child(2n) {" +
            "page-break-after: always;" +
        "}" +
        "header, footer { display: none !important; }" +
    "}" +
    "</style>";

2. 然后，如果你要打印多张图片，修改生成HTML的部分，循环创建带.print-img类的img标签，比如：

// 假设你有一个图片数组imgSources
var imgHtml = "";
imgSources.forEach(function(src) {
    imgHtml += "<img class='print-img' src='" + src + "' />";
});
// 替换原来的单张img代码
return "<html><head>" + printStyles + "<script>...</script></head><body onload='step1()'>" + imgHtml + "</body></html>";

如果是固定每页N张，只需要调整nth-child(Nn)的数值，比如每页3张就写nth-child(3n)。另外，page-break-inside: avoid可以防止单张图片被拆分到两页，提升打印体验。

内容的提问来源于stack exchange，提问作者J M