Vue js + Element UI [How to print table?]

Question

I use element io for component. Now my problem is I use this window.print() for print but it prints whole page. But I only want to print the table.

Udara Chathuranga · Accepted Answer · 2018-10-17 11:53:50Z

6

Since You are using Vuejs,

You can use "vue-print-nb" plugin in vuejs to print specific element on a web page.

Use v-pript attribute to print a selected element

Example

//this is the table you want to print
<table id="myTable">
    ...
    ... //Your table code goes here
</table>

// Set table id to "v-print" attribute.
// This will do the trick.
<button v-print="'#myTable'">Print Table</button>

Note

You can print the entire page without providing an id to the v-print attribute

<button v-print>Print the entire page</button>

answered Oct 17, 2018 at 11:53

Udara Chathuranga

1515 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user10328376 · Accepted Answer · 2018-10-15 07:44:28Z

1

Well you just need to hide everything

@media print{
  *{ display: none; }
  table { display: block; }
}

answered Oct 15, 2018 at 7:44

user10328376

Collectives™ on Stack Overflow

Vue js + Element UI [How to print table?]

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related