|
| 1 | +<template> |
| 2 | + <div> |
| 3 | + <button |
| 4 | + class="text-sm !text-opacity-60 text-dark-primary dark:text-light-primary flex w-full items-center justify-center pt-2.5" |
| 5 | + @click="generatePdf" |
| 6 | + > |
| 7 | + <svg |
| 8 | + xmlns="http://www.w3.org/2000/svg" |
| 9 | + width="16" |
| 10 | + height="16" |
| 11 | + fill="currentColor" |
| 12 | + class="mr-2" |
| 13 | + viewBox="0 0 16 16" |
| 14 | + > |
| 15 | + <path |
| 16 | + d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z" |
| 17 | + /> |
| 18 | + <path |
| 19 | + d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z" |
| 20 | + /> |
| 21 | + </svg> |
| 22 | + <p class="ml-2">Télécharcher toutes les suggestions</p> |
| 23 | + </button> |
| 24 | + </div> |
| 25 | +</template> |
| 26 | + |
| 27 | +<script> |
| 28 | +import pdfMake from 'pdfmake/build/pdfmake'; |
| 29 | +import pdfFonts from 'pdfmake/build/vfs_fonts'; |
| 30 | +import CodingToolsLogo from '@/assets/images/CodingToolsLogo.png'; |
| 31 | +import { useUserStore } from '@/store/modules/user.store'; |
| 32 | +import { computed } from 'vue'; |
| 33 | +
|
| 34 | +import { useAuthStore } from '@/store/modules/auth.store'; |
| 35 | +
|
| 36 | +const authStore = useAuthStore(); |
| 37 | +const userStore = useUserStore(); |
| 38 | +
|
| 39 | +const user = computed(() => authStore.user); |
| 40 | +const userId = computed(() => user.value._id); |
| 41 | +
|
| 42 | +pdfMake.vfs = pdfFonts.pdfMake.vfs; |
| 43 | +
|
| 44 | +const date = new Date().toLocaleDateString(); |
| 45 | +let base64Image = null; |
| 46 | +fetch(CodingToolsLogo) |
| 47 | + .then((response) => response.blob()) |
| 48 | + .then((blob) => { |
| 49 | + const reader = new FileReader(); |
| 50 | + reader.onloadend = () => { |
| 51 | + base64Image = reader.result; |
| 52 | + }; |
| 53 | + reader.readAsDataURL(blob); |
| 54 | + }) |
| 55 | + .catch((error) => { |
| 56 | + console.error("Erreur lors du chargement de l'image :", error); |
| 57 | + }); |
| 58 | +
|
| 59 | +export default { |
| 60 | + props: ['items'], |
| 61 | +
|
| 62 | + methods: { |
| 63 | + generatePdf() { |
| 64 | + const docDefinition = { |
| 65 | + content: [ |
| 66 | + { |
| 67 | + image: base64Image, |
| 68 | + width: 100, |
| 69 | + height: 75, |
| 70 | + alignment: 'left', |
| 71 | + }, |
| 72 | + { |
| 73 | + text: 'Devis', |
| 74 | + fontSize: 18, |
| 75 | + bold: true, |
| 76 | + margin: [0, 0, 100, 30], |
| 77 | + alignment: 'right', |
| 78 | + }, |
| 79 | + { |
| 80 | + text: `Récapitulatif des propositions de matériel`, |
| 81 | + margin: [0, 0, 0, 20], |
| 82 | + }, |
| 83 | + { |
| 84 | + text: `Date de création du récapitulatif : ${date}`, |
| 85 | + }, |
| 86 | + { |
| 87 | + text: `Récapitulatif créer par : ${user.value.profile.firstName} ${user.value.profile.lastName}`, |
| 88 | + }, |
| 89 | + { |
| 90 | + style: 'tableBody', |
| 91 | + widths: 'auto', |
| 92 | + margin: [0, 10, 0, 0], |
| 93 | + table: { |
| 94 | + widths: ['auto', 'auto', '*', 'auto', 'auto', 'auto'], |
| 95 | + body: [ |
| 96 | + [ |
| 97 | + { style: 'tableHeader', text: 'Nom' }, |
| 98 | + { style: 'tableHeader', text: 'Proposé par' }, |
| 99 | + { style: 'tableHeader', text: 'Description' }, |
| 100 | + { style: 'tableHeader', text: 'Lien' }, |
| 101 | + { style: 'tableHeader', text: 'Motivations' }, |
| 102 | + { style: 'tableHeader', text: 'Prix' }, |
| 103 | + ], |
| 104 | + ...this.items.map(({ desc, link, motiv, price, title, user }) => { |
| 105 | + const [data] = user; |
| 106 | + console.log([title, data.profile.firstName, desc, link, motiv, `${price} €`]); |
| 107 | + return [title, data.profile.firstName, desc, link, motiv, `${price} €`]; |
| 108 | + }), |
| 109 | + ], |
| 110 | + }, |
| 111 | + }, |
| 112 | + ], |
| 113 | + images: { |
| 114 | + CodingTools: './images/CodingToolsLogo.png', |
| 115 | + }, |
| 116 | + styles: { |
| 117 | + tableBody: { |
| 118 | + fontSize: 10, |
| 119 | + margin: 5, |
| 120 | + }, |
| 121 | + tableHeader: { |
| 122 | + fillColor: '#e5e7eb', |
| 123 | + margin: 5, |
| 124 | + }, |
| 125 | + }, |
| 126 | + }; |
| 127 | + console.log(docDefinition); |
| 128 | + pdfMake.createPdf(docDefinition).download(`Suggestions_equipement`); |
| 129 | + }, |
| 130 | + }, |
| 131 | +}; |
| 132 | +</script> |
0 commit comments