CODEWITHSUNDEEP
javascript
Dee-M
Dee-M

Reputation: 952

Can you add parameters inside a print() function in javascript

I am looking for a way to add parameters on a print function, because I have to print only the table and when I alert the table it shows me the correct value but when I'm printing it prints the entire page.

My code is 

aa = document.getElementById('tablename').innerHTML

If I alert(aa) it gives me the write value then I print(aa) it give me the entire page. so I tried print(aa) and aa.print and it doesn't work.

Does anyone know the solution for this?

Upvotes: 8

Views: 64879

Answers (4)

Siddharth Jain
Siddharth Jain

Reputation: 880

We can achieve your requested functionality with tabular view in PDF as below, in my case I have given table id="tableId" then replaced that page data with Table which we need:

printTarget(tableId) {
    let divToPrint = document.getElementById('tableId');
    let htmlToPrint = 
        '<style type="text/css">' + 
        'table {'+'font-family: arial, sans-serif;'+ 
        'border-collapse: collapse;'+'width: 95%;'+ 
        'margin-left: 20px'+'}'+   
        'th, td {' +
        'border:1px solid #000;' +
        'padding: 8px;' +
        '}'+ 'tr:nth-child(even) {'+
        'background-color: #dddddd;'+'}'+
        '</style>';
    htmlToPrint += divToPrint.outerHTML;
    let windowToPrint = window.open("");    
    windowToPrint.document.write(htmlToPrint);
    windowToPrint.print();
    windowToPrint.close();
}

Upvotes: 2

Josh Stodola
Josh Stodola

Reputation: 82513

Print stylesheets are nice, but you can still accomplish this in Javascript. Just pass your value to be printed to the following function...

function printIt(printThis) {
  var win = window.open();
  self.focus();
  win.document.open();
  win.document.write('<'+'html'+'><'+'body'+'>');
  win.document.write(printThis);
  win.document.write('<'+'/body'+'><'+'/html'+'>');
  win.document.close();
  win.print();
  win.close();
}

Upvotes: 14

cgp
cgp

Reputation: 41391

Define a print stylesheet which will only display the table.

There's no need for it to be dynamic.

Simply define those sections you don't wan to see as display:none (as stated in the alistapart article)

Upvotes: 6

Quentin
Quentin

Reputation: 944321

No, you can't.

What you could do is dynamically modify a print media stylesheet and display: none the elements you do not want.

YUI StyleSheet might help with that.

Upvotes: 1

Related Questions