print invoice, don't print invoice controls and footer

src/components/invoices/InvoiceControls.vue

@@ -23,7 +23,7 @@
                     <template slot="button-content">
                         <i class="material-icons">more_vert</i>
                     </template>
-                    <b-dropdown-item :href="invoice.pdf_url" target="_blank">Download PDF</b-dropdown-item>
+                    <b-dropdown-item-button @click="print">Download PDF</b-dropdown-item-button>
                     <b-dropdown-item-button @click="deleteInvoice">Delete</b-dropdown-item-button>
                 </b-dropdown>
             </div>
@@ -34,13 +34,12 @@
 <script>
 import { mapGetters } from 'vuex';
 import NotificationService from '@/services/notification.service';
-import { BDropdown, BDropdownItem, BDropdownItemButton } from 'bootstrap-vue';
+import { BDropdown, BDropdownItemButton } from 'bootstrap-vue';
 import AppSelect from '@/components/form/AppSelect';
 
 export default {
   components: {
     BDropdown,
-    BDropdownItem,
     BDropdownItemButton,
     AppSelect,
   },
@@ -72,6 +71,9 @@ export default {
     updateProp(props) {
       this.$store.dispatch('invoices/updateInvoice', props);
     },
+    print() {
+      window.print();
+    },
   },
 };
 </script>

src/views/dashboard/Dashboard.vue

@@ -6,7 +6,7 @@
                     <transition name="fade" mode="out-in">
                         <router-view/>
                     </transition>
-                    <footer class="col-12 d-flex justify-content-between align-items-center text-secondary px-0">
+                    <footer class="col-12 d-flex justify-content-between align-items-center text-secondary px-0 mt-3 d-print-none">
                         <button class="btn btn-sm text-secondary" @click="toggleTheme">
                             Lights {{ theme === 'dark' ? 'on' : 'off' }}
                             <i class="material-icons material-icons-round md-14 align-text-bottom ml-1">

src/views/dashboard/Invoice.vue

@@ -1,6 +1,6 @@
 <template>
     <div v-if="team">
-        <InvoiceControls/>
+        <InvoiceControls class="d-print-none"/>
         <InvoiceForm/>
     </div>
 </template>