javascriptjqueryprintingprinting-web-pageprintthis

PrintThis - Print content from 2 different elements on same page

I'm using printthis.js, which works fine for printing the content from a preformatted element on my webpages. To activate print command I use the following:

$(function() {
    $('#print').click(function() {
        $('pre').printThis();
    });
});

Now I want to print a page that displays the h1 (from same webpage) at the top, then above that the preformatted element.

$(function() {
    $('#print').click(function() {
        $('h1').printThis();
        $('pre').printThis();
    });
});

Unfortunately with this code I only get them printed in two different pages (actually they're two independent print commands). I want them to appear on the same printed page, as follows: 1) h1 content 2) break line 3) the 'pre' element

Solution

  • You can pass printThis multiple selectors:

    $('#kitty-one, #kitty-two, #kitty-three').printThis({
    importCSS: false,
    loadCSS: "",
    header: "<h1>Look at all of my kitties!</h1>"
});

    Source (right on the first page): https://github.com/jasonday/printThis#advanced-features