0

How can I print a table in bootstra-vue, so that the user can print it by clicking a button?

print the entire table on a paper print

<b-table id="my-table" hover striped small outlined :items="valuesData" :fields="fields" class="mt-0 mb-0">
</b-table>
rufus05
  • 43
  • 1
  • 10
  • Can you elaborate on your question? What do you mean by print? Are you looking to load data to the table on a click? – tbowden May 12 '20 at 21:50
  • @tbowden Sorry, I need to print the entire table on a paper print. – rufus05 May 12 '20 at 22:11
  • If you just want to print the table only, you will need other styling to hide the rest of the page, just like with plain `` elements. Or open a new window with just our `` component that people can then print.
     – Troy Morehouse May 13 '20 at 08:36
  • @Troy Morehouse How can I make the first option to print? In some cases I see that a screen suitable for printing is opened, just as it is when a pdf file is opened. – rufus05 May 13 '20 at 12:27
  • `Print` – Troy Morehouse May 14 '20 at 14:26
  • @TroyMorehouse Two errors will occur 1 - Property or method "window" is not defined on the instance but referenced during render. 2 - Cannot read property 'print' of undefined – rufus05 May 14 '20 at 14:33
  • You may need to make a method (ie. `doPrint()`) to call `window.print()`, and then `@click="doPrint()"` so that `window` is evaluated at runtime. – Troy Morehouse May 14 '20 at 15:51
  • @TroyMorehouse Ok, but it is printing the entire page, I would like to print only the table. – rufus05 May 14 '20 at 16:57
  • You will need to either dynamically add class `d-print-none` on elements that you don't want printed, or use custom CSS to change the display property on elements you don't want printed. https://getbootstrap.com/docs/4.4/utilities/display/#display-in-print. The other option is to create a dedicated page (or use a query string param) that has the table only that the user can print. – Troy Morehouse May 14 '20 at 17:30

0 Answers0