将嵌套 div 的内容打印到打印机答案

【问题标题】：Print contents of nested divs to printer将嵌套 div 的内容打印到打印机
【发布时间】：2017-07-30 12:25:37
【问题描述】：

我有一个高级 WordPress 插件，它嵌入 PDF 并包含它自己的 PDF 工具栏。

在联系开发人员为其工具栏创建打印按钮后，得到的回应是“平淡无奇”。 “让用户下载 PDF，然后在那里打印表格”。开发人员在包含 DIV 的 DIV 中只使用一个类，而不是一个 ID。

我现在正在尝试创建自己的打印按钮并让它打开打印窗口，但它不会生成仅 PDF 的打印预览（跨越嵌套的 DIV）

这是我要打印的目标 DIV 的渲染 HTML 输出的结构（我想打印所有这些，而不是一次打印一个）。

我的问题是窗口。 print 函数不仅仅捕获 DIV 的内容。它正在预览整个网页。

<div class="pdfemb-pagescontainer">
    <div class="pdfemb-inner-div pdfemb-page1">
        <canvas class="pdfemb-the-canvas">
        </canvas>
    </div>
    <div class="pdfemb-inner-div pdfemb-page2">
        <canvas class="pdfemb-the-canvas">
        </canvas>
    </div>
    <div class="pdfemb-inner-div pdfemb-page3">
        <canvas class="pdfemb-the-canvas">
        </canvas>
    </div>
</div>

这是我当前的代码：

<button onclick="printPDF()">Print Lesson PDF</button>
<script>
    function printPDF() {
        var x = document.getElementsByClassName("pdfemb-pagescontainer");
        window.print(x[0].innerHTML);
    }
</script>

【问题讨论】：

window.print() 不带参数
@Jonasw 所以我注意到了。这就是为什么我要寻求 JS Gods 的解决方案 :)

标签： javascript printing

【解决方案1】：

function PrintDiv(divClass, title)
{
    var custom_window = window.open('', 'PRINT', 'height=400,width=600');

    custom_window.document.write('<html><head><title>' + title  + '</title></head>');
    custom_window.document.write('<body>' + document.getElementsByClassName(divClass)[0].innerHTML + '</body></html>');
    custom_window.print();
    custom_window.close();

    return true;
}

【讨论】：

您缺少 [0] 或循环
是的，我添加了它，（如果你有许多具有相同类名的类 - 你可以使用“document.getElementById()”
@LesukAlexey 正如我在描述中提到的，我仅限于使用类，ID 不是一个选项。
@LesukAlexey 虽然这看起来很有希望，但问题在于类名“pdfemb-pagescontainer”。这似乎导致它无法运行。我无法更改班级名称。
@Dennis 问题实际上出在 canvas 元素上。它不能简单地复制..

【解决方案2】：

你不需要 js。一些 css 应该这样做：

@media print {
  body * {
    visibility: hidden;
  }
  .pdfemb-pagescontainer, .pdfemb-pagescontainer * {
    visibility: visible;
   }
  .pdfemb-pagescontainer {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
  }
}

现在你可以这样做了：

window.print();

它会自动隐藏在周围......

based on this thread

【讨论】：

这会产生一个空白页的打印预览，第一个 DIV 的内容，然后是一个空白页。我问的是打印所有 DIV。
@dennis 你能试试更新的代码吗？您的代码中是否缺少 html？
我在上面的代码中没有丢失 HTML。将!important 放在left 和top 之后仍然会产生一个3 页的打印窗口，第1 页为空白，第2 页有第1 页的DIV 内容，第3 页为空白。感谢您的尝试。
@Dennis 但基本上它有点工作对吗？然后转到显示 dom 树的开发控制台选项卡，并使用 css 进行修改，直到它看起来像你期望的那样。然后将该css复制到媒体打印{}块中，它应该可以工作......