使用样式表打印div的内容

debugcn 发表于 Dev

亨利5400

我想div通过javascript生成a的可打印innerHTML元素，因此我根据这些答案编写了一些代码。但是我想添加另一个功能：我希望打印的元素不仅包括的innerHTML，还包括div其CSS <stylesheet>。所以我修改了下面的代码，但是似乎运行不正常。

<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。我应该如何改进代码？

米兰腾克

问题在于，newstr其中包含的内容div，但div包含id "divID"本身的内容。因此，#divIDcss选择器将不与任何div-s匹配，因此将不应用样式。

要解决此问题，"<div id='divID'>"需要添加自身，因此fixed函数如下所示：

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。