Question

我正在使用此代码打印特定的div

CSS

<style type="text/css" media="print">
    * {
        display:none;
    }
    #printportion {
        display:block;
    }
</style>

脚本

<script>
    var printCalender=function () {
        setTimeout(window.print, 1500);
    }
</script>

当我在谷歌浏览器中运行我的页面时，打印预览窗口为空白并显示“打印预览失败”

Answer 1

问题在于，无论您的目标元素在DOM中的位置如何，您的*选择器都会与其拥有的所有父级（包括<html>和<body>）匹配，因此元素永远不会显示请参阅以下示例：

* {
  display: none;
}
#showme {
  display: block;
}

<div id="showme">This will never be shown</div>

Answer 2

正如Nit所说，问题出在您的*选择器上。您可以像这样将一个选择器与@media print一起使用：

@media print {
  body.print-element *:not(.print) {
    display: none;
  }
}

这里有一个工作示例，您可以在其中打印任何单击的元素和/或整个常规HTML文档：

function print_this(elem) {
  document.body.classList.add('print-element')
  elem.classList.add('print')
  window.print()
  document.body.classList.remove('print-element')
  elem.classList.remove('print')
}

document.querySelectorAll('div').forEach(elem => 
  elem.onclick = () => print_this(elem))

div {
  display: inline-flex;
  width: 200px;
  height: 200px;
  justify-content: center;
  align-items: center;
  background-color: #e9a9c7;
  color: #39464e;
  cursor: pointer;
}

@media print {
  body.print-element *:not(.print) {
    display: none;
  }
}

<div>Print 1</div>
<div>Print 2</div>

注意：如果看不到颜色，请记住在打印选项中单击背景图形（Chrome）或类似图形。

无法打印特定的div

2 个答案: