Question

打印 div 的内容 - 使用样式表

2021-01-24

659

javascript html css

我想用 javascript 生成打印 div 的 innerHTML 元素，所以我根据这些答案编写了一些代码。但我想添加另一个功能：我希望打印的元素不仅包括 div 的 innerHTML，还包括来自 <stylesheet> 的 css。所以我修改了下面的代码，但似乎效果不佳。

<style>
#divID {
    some css...
}
<style>

function printdiv() {
    var headstr = "<html><head><title>file_name</title></head><body>";
    var footstr = "</body></html>";
    var newstrstyle = document.getElementsByTagName("style")[0].innerHTML; // is this right?
    var newstr = document.getElementById('divID').innerHTML;
    var oldstr = document.body.innerHTML;
    document.body.innerHTML = headstr + '<style>' + newstrstyle + '</style>' + newstr + footstr;
    window.print();
    document.body.innerHTML = oldstr;
    return false;
}

我想从样式表中引入 CSS，而不是将样式值添加到字符串中，因为我正在处理的是可编辑的 css。我应该如何改进代码？

Answer 1

问题在于 newstr 包含 div 的内容，但是 id 为 "divID" 的 div 本身却不包含。因此， #divID css 选择器将不会与任何 div 匹配，因此不会应用样式。

要解决此问题，需要添加 "<div id='divID'>" 本身，因此修复后的函数如下所示：

function printdiv() {
  var headstr = "<html><head><title>file_name</title></head><body>";
  var footstr = "</body></html>";
  var newstrstyle = document.getElementsByTagName("style")[0].innerHTML; // is this right? -> yes it is
  var newstr = document.getElementById("divID").innerHTML;
  var oldstr = document.body.innerHTML;
  document.body.innerHTML =
    headstr +
    "<style>" +
    newstrstyle +
    "</style>" +
    "<div id='divID'>" + // this div was missing
    newstr +
    "</div>" + // closing the added div
    footstr;
  window.print();
  document.body.innerHTML = oldstr;
  return false;
}

如果您想查看一个实例，这里是我弄清楚的 stackblitz 代码： https://stackblitz.com/edit/js-madufb?file=index.js

Answer 2

无需创建新窗口，只需在打印时隐藏其他元素，添加以下内容：

    <style media="print">
        body>*:not(.mydiv){
            display: none;
        }
        .mydiv{display: block;}
    </style>

或者如果链接到外部 css，则在 ref css 文件中添加以下内容

@media print{
body>*:not(.none){
    display: none;
}
.none{display: block;}

>

然后将函数更改为以下内容：

    function printDiv{window.print()}

如果您不想在要打印的 html 中显示 div，可以添加样式来隐藏它：

    <style>.mydiv{display: none;}</style>