Question

我有一个优质的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>

Answer 1

你不需要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

Answer 2

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;
}

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

2 个答案: