打印屏幕中的自定义页眉和页脚答案

【问题标题】：custom header and footer in print screen打印屏幕中的自定义页眉和页脚
【发布时间】：2021-08-31 10:24:06
【问题描述】：

我在 javascript 中使用打印功能，并且在数据顶部的打印屏幕中它显示 url 即本地主机和页脚我想将页眉和页脚更改为其他东西一个徽标和一些标题怎么能我这样做我正在打印一个表格，这是用于打印的函数的代码

 document.getElementById("btnPrint").onclick = function() {
    printElement(document.getElementById("myTable"));
}

function printElement(elem) {
    var domClone = elem.cloneNode(true);

    var $printSection = document.getElementById("printSection");

    if (!$printSection) {
        var $printSection = document.createElement("div");
        $printSection.id = "printSection";
        document.body.appendChild($printSection);
    }

    $printSection.innerHTML = "";
    $printSection.appendChild(domClone);
    window.print();
}

如果有人能帮我修改页眉和页脚，那就太好了

【问题讨论】：

标签： javascript html css printing

【解决方案1】：

我相信除了修改相应的信息（页面标题/URL）之外，您无法完全控制打印页面的页眉/页脚。尽管您可以以一种有点 hacky 的方式隐藏这些行：将打印页边距设置为 0，然后用正文边距或其他方式补偿它们。您可以尝试使用position: fixed 添加自定义页眉/页脚。这也不适用于每个浏览器。所以你的 CSS 会像这样：

@media print {
  @page { margin: 0mm; }

  body { margin: 20mm; }

  .print-header {
    position: fixed;
    top: -10mm;
  }
}

【讨论】：