Implemented: PDF generator(#1w3w78x)

changelogs/unreleased/-1w3w78x.yml

@@ -0,0 +1,6 @@
+---
+title: 'Implemented: PDF generator'
+ticket_id: "#1w3w78x"
+merge_request: 10
+author: Disha
+type: added

package.json

@@ -21,11 +21,13 @@
     "axios": "^0.21.1",
     "axios-cache-adapter": "^2.7.3",
     "core-js": "^3.6.5",
-    "file-saver": "^2.0.5",
+    "html-to-pdfmake": "^2.3.7",
     "http-status-codes": "^2.1.4",
+    "jspdf": "^2.4.0",
     "mitt": "^2.1.0",
     "moment": "^2.29.1",
     "moment-timezone": "^0.5.33",
+    "pdfmake": "^0.2.4",
     "vue": "^3.0.0-0",
     "vue-i18n": "^9.0.0",
     "vue-router": "^4.0.0-0",

src/router/index.ts

@@ -3,6 +3,7 @@ import { RouteRecordRaw } from 'vue-router';
 import Home from '@/views/Home.vue'
 import Login from '@/views/Login.vue'
 import Settings from "@/views/Settings.vue"
+import PdfGenerator from "@/views/PdfGenerator.vue"
 import store from '@/store'
 
 const authGuard = (to: any, from: any, next: any) => {
@@ -43,7 +44,7 @@ const routes: Array<RouteRecordRaw> = [
     name: "Settings",
     component: Settings,
     beforeEnter: authGuard
-  }
+  },
 ]
 
 const router = createRouter({

src/views/PdfGenerator.vue

@@ -0,0 +1,27 @@
+<template>
+   <PdfTemplate v-show="false" />
+   <button @click="generatePdf">PDF</button>
+</template>
+<script>
+import PdfTemplate from "@/views/PdfTemplate.vue"
+export default {
+  components:{
+    PdfTemplate
+  },
+  methods:{
+    generatePdf() {
+      pdfMake.vfs = pdfFonts.pdfMake.vfs;
+      const pdfDocument =  document.getElementById('PDF');
+      const html =  htmlToPdfmake(pdfDocument.innerHTML);  
+      const docDefinition = {
+        content: [html],
+        defaultStyle: {
+          fontSize: 15,
+          bold: true,
+        }
+      }
+      pdfMake.createPdf(docDefinition).open();
+    }
+  },
+} 
+</script>

src/views/PdfTemplate.vue

@@ -0,0 +1,5 @@
+<template>
+  <div id="PDF">
+    <!-- Template of the PDF -->
+  </div>
+</template>