exploration of printing button on the pages to strip the css and print text on pages

package.json

@@ -54,6 +54,7 @@
     "register-service-worker": "^1.7.1",
     "vue": "^2.6.12",
     "vue-cheetah-grid": "^0.22.3",
+    "vue-html-to-paper": "^1.4.3",
     "vue-prism-component": "^1.2.0",
     "vue-router": "^3.1.6",
     "vuetify": "^2.2.21",

src/components/FAQ/faqInfo.vue

@@ -1,5 +1,6 @@
 <template>
   <v-container fluid>
+  <v-btn @click="expandAll">Expand All</v-btn>
     <v-expansion-panels focusable hover tile multiple v-model="panel">
       <v-expansion-panel v-for="(faq, index) in faqs" :key="index">
         <v-expansion-panel-header class="" style="font-weight: 300; font-size:120% ">
@@ -77,6 +78,12 @@ export default {
       }
     }
   },
+  mounted() {
+    Event.$on('printPrep', () => {
+      this.panel = [1,2,3]
+      console.log(this.panel)
+    })
+  },
   methods : {
     lookupOrder(name) {
       var i;
@@ -86,6 +93,11 @@ export default {
           return i;
         }
       }
+    },
+    expandAll() {
+      console.log(this.faqs.length)
+      this.panel = [1,2,3,4,5,6]//Array(this.faqs.length)
+      console.log(this.panel)
     }
   }
 };

src/components/core/PrintButton.vue

@@ -0,0 +1,22 @@
+<template>
+    <v-btn outlined @click="print"><slot></slot></v-btn>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      output: null
+    }
+  },
+  props: {
+      printId: String,
+  },
+  methods: {
+    async print () {
+      Event.$emit('printPrep')
+      await this.$htmlToPaper(this.printId);
+    }
+  }
+}
+</script>

src/components/core/Toolbar.vue

@@ -39,6 +39,7 @@
       @click="onClick($event, link)"
     >{{ link.text }}</v-btn>
     <!--<PushNotification />-->
+    <PrintButton :printId="this.$route.name">Print Page</PrintButton>
     <v-btn icon v-on:click="darkMode" class="ml-2">
       <v-icon v-if="this.$vuetify.theme.dark">mdi-brightness-7</v-icon>
       <v-icon v-else>mdi-brightness-4</v-icon>
@@ -49,6 +50,7 @@
 <script>
 import communityData from "@/assets/data/communityData.json";
 import feedbackModal from "@/components/core/FeedbackModal.vue";
+import PrintButton from "@/components/core/PrintButton.vue"
 // import PushNotification from "@/components/core/PushNotifications";
 import { mapMutations, mapGetters } from "vuex";
 export default {
@@ -59,6 +61,7 @@ export default {
   },
   components: {
     feedbackModal: feedbackModal,
+    PrintButton: PrintButton
   },
   computed: {
     metalinks() {

src/components/home/homeScreen.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-container fluid class="py-0">
+  <v-container fluid class="py-0" id="homepage-template">
     <v-row align="center">
       <!-- <v-col md="3" sm="5">
         <v-img

src/main.js

@@ -10,21 +10,31 @@ import "./style.css";
 // import firebase from "@/firebase";
 import cssVars from "css-vars-ponyfill";
 import Prism from 'prismjs';
+import VueHtmlToPaper from 'vue-html-to-paper';
 Prism.highlightAll();
 
 cssVars({
   watch: true,
 });
 
+// const printOptions = {
+//   "styles": [
+//     // "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css",
+//     // "https://unpkg.com/kidlat-css/css/kidlat.css",
+//     "src/style.css"
+//   ]
+// }
+
 IntersectionObserver.prototype.POLL_INTERVAL = 100; // time in ms
 
 Vue.config.productionTip = false;
 
 // firebase.auth.onAuthStateChanged(() => {
-  new Vue({
+  window.Event = new Vue({
     router,
     store,
     vuetify,
     render: h => h(App)
   }).$mount("#app");
+  Vue.use(VueHtmlToPaper);
 // });

src/views/Faq.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-container fluid class="pa-0 ma-0">
+  <v-container fluid class="pa-0 ma-0" :id="this.$route.name">
     <v-row justify="center" align="center" class="mx-0">
       <v-col cols="12" lg="10" class="pa-0">
         <Header>

src/views/GettingStarted.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-container fluid class="pa-0 ma-0">
+  <v-container fluid class="pa-0 ma-0" :id="this.$route.name">
     <v-row justify="center" align="center" class="mx-0">
       <v-col cols="12" lg="10" class="pa-0">
         <Header>

src/views/Home.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-container fluid class="pa-0 ma-0">
+  <v-container fluid class="pa-0 ma-0" :id="this.$route.name">
     <v-row justify="center" align="center" class="mx-0">
       <v-col cols="12" lg="10">
         <homeStartScreen class="mb-4" />
@@ -118,7 +118,7 @@
     components: {
       homeStartScreen,
       whatwedo,
-      wwdBasicCard,
+      wwdBasicCard
       //aboutCommunity,
       //events,
       //featureEvents,

src/views/Implementation.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-container fluid class="pa-0 ma-0">
+  <v-container fluid class="pa-0 ma-0" :id="this.$route.name">
     <v-row justify="center" align="center" class="mx-0">
       <v-col cols="12" lg="10" class="pa-0 ma-0">
         <Header>

src/views/News.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-container fluid class="pa-0 ma-0">
+  <v-container fluid class="pa-0 ma-0" :id="this.$route.name">
     <v-row justify="center" align="center" class="mx-0">
       <v-col cols="12" lg="10" class="pa-0">
         <Header>

src/views/Normalize.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-container fluid class="pa-0 ma-0">
+  <v-container fluid class="pa-0 ma-0" :id="this.$route.name">
     <v-row justify="center" align="center" class="mx-0">
       <v-col cols="12" lg="10" class="pa-0 ma-0">
         <Header>

src/views/Training.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-container fluid class="pa-0 ma-0">
+  <v-container fluid class="pa-0 ma-0" :id="this.$route.name">
     <v-row justify="center" align="center" class="mx-0">
       <v-col cols="12" lg="10" class="pa-0">
         <Header>

src/views/Validation.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-container fluid class="pa-0 ma-0">
+  <v-container fluid class="pa-0 ma-0" :id="this.$route.name">
     <v-row justify="center" align="center" class="mx-0">
       <v-col cols="12" lg="10" class="pa-0 ma-0">
         <Header>