add: download pdf budget

src/components/CreateBudgetModal.vue

@@ -8,7 +8,7 @@
     import Swal from 'sweetalert2';
     import Spiner from './ui/Spiner.vue';
     import Cities from './ui/Cities.vue';
-
+    import html2pdf from 'html2pdf.js';
 
     const props = defineProps({
         budget: {
@@ -106,6 +106,8 @@
        ...initalState
     })
 
+    const pdfContent = ref(null);
+
     const errors = ref({
         client: null
     })
@@ -231,6 +233,19 @@
         };
     }
 
+    const downloadPdf = () => {
+        const options = {
+            margin: 10,
+            // filename: 'mi_seccion.pdf',
+            filename: `presupuesto_${props.budget.client.replaceAll(' ', '_')}.pdf`,
+            image: { type: 'jpeg', quality: 0.98 },
+            html2canvas: { scale: 2 },
+            jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' },
+        };
+
+        html2pdf(pdfContent.value, options);
+    }
+
 </script>
 
 <template>
@@ -238,7 +253,7 @@
         <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
             <div class="modal-content">
                 <div class="modal-header">
-                    <h2 class="title mt-2 mb-3">Calculadora</h2>
+                    <h2 class="title mt-2 mb-3">Calculadora</h2> 
                     <button 
                         id="btnClosebudgetModal" 
                         type="button" 
@@ -249,10 +264,11 @@
                 </div>
                 <div class="modal-body form-content">
                     <div class="container-fluid">
-                            <form action="" @submit.prevent="saveBudget" autocomplete="off" method="post">
+                        <form action="" @submit.prevent="saveBudget" autocomplete="off" method="post" ref="pdfContent">
                                 <div class="calculator-card">
                                     <div class="calculator-card__title">
-                                        <h2>CALCULADOR DE TARIFAS</h2>                
+                                        <h2>CALCULADOR DE TARIFAS</h2>   
+                                        <img src="/images/logo-eta.png" alt="Eta viaporte" width="120">             
                                     </div>
                                     <div class="calculator-card__subtitle">
                                         <h4>DATOS DE CARGA</h4>
@@ -500,6 +516,14 @@
                                     <button v-else class="btn-primary-sm radius-sm" type="submit">Guardar</button>
                                 </div> 
                             </form>
+                            <div class="mt-4 text-center" v-if="isPrint">
+                                <button 
+                                    class="btn-primary-sm radius-sm" 
+                                    @click="downloadPdf"
+                                    type="button">
+                                    Descargar
+                                </button>
+                            </div> 
                         </div>
                 </div>
             </div>
@@ -519,16 +543,25 @@
         margin: 0 auto;
         border: 1px solid grey;
     }
+
+    .header-style {
+        display: flex;
+        justify-content: space-between;
+    }
     
     .calculator-card {
         justify-content: center;
         margin: 0 auto;
-        width: 70%;
+        width: 85%;
         border: 1px solid grey;
     }
 
     .calculator-card__title {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
         background-color: #323030;
+        align-items: center;
         padding: 10px 20px;
         color: #FFF;
         text-align: center;
@@ -537,7 +570,8 @@
     }
 
     .calculator-card__subtitle {
-        background-color: #50b1e5;
+        // background-color: #50b1e5;
+        background-color: #FBBA33;
         padding: 10px 20px;
         color: #FFF;
         text-align: center;
@@ -555,4 +589,15 @@
         justify-content: space-between;
         padding: 8px 0px;
    }
+
+   @media (max-width: 1024px) {
+        .calculator-card {
+            width: 90%;
+        }
+   }
+   @media (max-width: 768px) {
+        .calculator-card {
+            width: 95%;
+        }
+   }
 </style>