0

I have a premium WordPress plugin that embeds PDFs and contains it's own toolbar for the PDFs.

After reaching out to the developer to create a print button for their toolbar, there response was "underwhelming". "Have the user download the PDF, then print form there". The developer has the DIVs inside a containing DIV with using only a class, not an ID.

I'm trying to now create my own print button and have it opening the print window, BUT it is not generating a print preview of only the PDF (which is spanning across nested DIVs)

Here is the structure of the rendered HTML output for the target DIVs that I want to print (I want to print all of them, not one at a time).

My problem is that the window. print function is not capturing only the content of the DIVs. It's previewing the whole webpage.

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

Here is my current code:

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

2 Answers2

0

You dont need js for that. Some css should do it:

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

Now you can do:

window.print();

and it automatically hides all around...

based on this thread

Jonas Wilms
  • 132,000
  • 20
  • 149
  • 151
  • This produces a print preview of 1 blank page, the contents of the first DIV, then one more blank page. I'm asking about printing all DIVs. – Dennis Jul 31 '17 at 13:42
  • @dennis could you try the updated code? And is there html missing in your code? – Jonas Wilms Jul 31 '17 at 13:43
  • I have no missing HTML in my code above. Putting !important after the left and top still produced a print window with 3 pages, page 1 is blank, page 2 has the page 1 DIV contents, and page 3 is blank. Thanks for trying. – Dennis Jul 31 '17 at 14:24
  • @Dennis but basically it is kinda working right? then go to the dev consoles tab which shows a dom tree, and hack around with css until it looks like you expect it to. then copy that css into a media print {} block and it should work... – Jonas Wilms Jul 31 '17 at 14:50
0
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;
}
Lesiuk Alexey
  • 237
  • 1
  • 2
  • 7