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

@@ -19,10 +19,13 @@
  "axios": "^0.21.1",
  "axios-cache-adapter": "^2.7.3",
  "core-js": "^3.6.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,12 @@ const routes: Array<RouteRecordRaw> = [
  name: "Settings",
  component: Settings,
  beforeEnter: authGuard
- }
+ },
+ {
+ path: "/pdf",
+ component: PdfGenerator,
+ name: 'PdfGenerator'
+ },
 ]
 
 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>