vue-intergrall-plugins 1.1.66 → 1.1.68

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-intergrall-plugins",
-  "version": "1.1.66",
+  "version": "1.1.68",
   "description": "",
   "main": "dist/vue-intergrall-plugins.ssr.js",
   "browser": "dist/vue-intergrall-plugins.esm.js",
@@ -54,5 +54,8 @@
   },
   "engines": {
     "node": ">=12"
+  },
+  "dependencies": {
+    "vue-html2pdf": "^1.8.0"
   }
 }

package/src/lib-components/Email/EmailItem.vue

@@ -90,6 +90,7 @@
           <fa-icon :icon="['fas', button.icon || 'question-circle']" v-if="!button.svgIcon" />
           <span v-else v-html="button.svgIcon" :class="button.svgClass ? button.svgClass : ''"></span>
           <span v-if="button.label" class="email-custom-action-label" v-text="button.label"></span>
+          <span v-if="status === 'C'"class="email-pdf-download cursor-pointer"@click.stop="generatePdf"title="Baixar e-mail em PDF"><fa-icon :icon="['fas', 'file-pdf']" /></span>
         </button>
       </template>
     </div>
@@ -213,6 +214,59 @@
         </span>
         <!-- Status de mensagem deletada -->
       </transition>
+    <vue-html2pdf
+      :show-layout="false"
+      :enable-download="true"
+      :preview-modal="false"
+      :paginate-elements-by-height="1400"
+      :filename="pdfFilename"
+      :pdf-quality="2"
+      ref="html2pdf"
+      :manual-pagination="true"
+      :html-to-pdf-options="htmlToPdfOptions"
+    >
+      <section slot="pdf-content" id="conteudo-pdf">
+        <div class="pdf-content">
+          <h1 class="pdf-title">{{ htmlEntityToEmoji(replaceUnicodeWithEmoji(assunto)) || '(Sem assunto)' }}</h1>
+          
+          <table class="pdf-info-table">
+            <tbody>
+              <tr>
+                <th>De:</th>
+                <td>{{ formatPdfRecipients(from) }}</td>
+              </tr>
+              <tr>
+                <th>Para:</th>
+                <td>{{ formatPdfRecipients(para) }}</td>
+              </tr>
+              <tr v-if="copia && copia.length">
+                <th>Cópia:</th>
+                <td>{{ formatPdfRecipients(copia) }}</td>
+              </tr>
+              <tr>
+                <th>Data:</th>
+                <td>{{ formataDataHora(dataHora, true, false) }} - {{ formattedDate }}</td>
+              </tr>
+            </tbody>
+          </table>
+
+          <hr class="pdf-divisor" />
+
+          <div class="pdf-email-content">
+            <div v-html="formatContentForPdf()"></div>
+          </div>
+
+          <div v-if="filteredFiles && filteredFiles.length" class="pdf-attachments">
+            <h3>Anexos ({{ filteredFiles.length }}):</h3>
+            <ul>
+              <li v-for="(anexo, index) in filteredFiles" :key="index">
+                {{ anexo.name || `Anexo ${index + 1}` }}
+              </li>
+            </ul>
+          </div>
+        </div>
+      </section>
+    </vue-html2pdf>
   </div>
 </template>
 
@@ -221,6 +275,7 @@ import EmailFile from "./EmailFile.vue";
 import EmailTo from "./EmailTo.vue";
 import { textoLongo } from "@/mixins/formatarTexto";
 import Clickaway from '@/directives/clickaway';
+import VueHtml2pdf from 'vue-html2pdf';
 import '../../styles/style.css';
 
 export default {
@@ -228,7 +283,7 @@ export default {
   directives: {
     clickaway: Clickaway
   },
-  components: { EmailFile, EmailTo },
+  components: { EmailFile, EmailTo, VueHtml2pdf },
   props: {
     dominio: {
       type: String,
@@ -355,6 +410,29 @@ export default {
       hasError: false,
       errorCount: 0,
       scrollToFile: false,
+      htmlToPdfOptions: {
+        margin: [15, 0, 15, 0],
+        filename: 'email.pdf',
+        image: {
+          type: 'jpeg',
+          quality: 0.98
+        },
+        enableLinks: false,
+        html2canvas: {
+          scale: 2,
+          useCORS: true,
+          letterRendering: true,
+          logging: false,
+          scrollY: 0,
+          scrollX: 0
+        },
+        jsPDF: {
+          unit: 'mm',
+          format: 'a4',
+          orientation: 'portrait',
+          compress: true
+        }
+      }
     };
   },
   computed: {
@@ -456,6 +534,12 @@ export default {
         const text = index === 0 ? `${this.dicionario.tit_copia || 'Cópia'}: ${name || ''}` : name ? `${name}${addVirgulaDps ? ', ' : ''}` : '';
         return text
       }
+    },
+    pdfFilename() {
+      const subject = this.assunto || 'email';
+      const sanitized = subject.replace(/[^a-z0-9]/gi, '_').substring(0, 50);
+      const date = this.dataHora ? new Date(this.dataHora).toISOString().split('T')[0] : '';
+      return `email_${sanitized}_${date}`;
     }
   },
   watch: {
@@ -745,7 +829,97 @@ export default {
       });
 
       return Object.keys(customParams).length ? customParams : defaultParams;
+    },
+    generatePdf() {
+      if (this.$refs.html2pdf) {
+        this.$refs.html2pdf.generatePdf();
+      }
+    },
+    formatPdfRecipients(recipients) {
+      if (!recipients || !recipients.length) return '--';
+      return recipients.map(r => {
+        if (r.name && r.email) return `${r.name} <${r.email}>`;
+        return r.name || r.email || '';
+      }).join(', ');
+    },
+    formatContentForPdf() {
+      let content = this.html || this.mensagem || '';
+      
+      if (!/<[a-z][\s\S]*>/i.test(content)) {
+        content = content.replace(/\n/g, '<br>');
+        content = this.gerarMensagemEstilizada(content);
+        content = `<p>${content}</p>`;
+      }
+      
+      return content;
     }
   }
 };
-</script>
+</script>
+
+<style scoped>
+.email-pdf-download {
+  padding: 5px 8px;
+  color: #d54286;
+  font-size: 16px;
+  transition: opacity 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.email-pdf-download:hover {
+  opacity: 0.7;
+}
+
+.pdf-content {
+  padding: 20px;
+}
+
+.pdf-title {
+  font-size: 20px;
+  color: #d54286;
+  margin: 0 0 15px 0;
+  padding-bottom: 10px;
+  border-bottom: 2px solid #e2e6ea;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  page-break-after: avoid;
+  page-break-inside: avoid;
+}
+
+.pdf-info-table {
+  width: 100%;
+  margin: 0 0 20px 0;
+  border-collapse: collapse;
+  table-layout: fixed;
+  page-break-inside: avoid;
+}
+
+.pdf-info-table th {
+  text-align: left;
+  padding: 10px;
+  font-weight: bold;
+  background-color: #f8f9fa;
+  border: 1px solid #e2e6ea;
+  width: 100px;
+  vertical-align: top;
+  font-size: 14px;
+}
+
+.pdf-info-table td {
+  padding: 10px;
+  border: 1px solid #e2e6ea;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  word-break: break-word;
+  font-size: 14px;
+  line-height: 1.5;
+  max-width: 100%;
+}
+
+.pdf-info-table tr {
+  page-break-inside: avoid;
+  page-break-after: auto;
+}
+</style>