diff --git a/src/pages/proyectos/markdown-visualizer/index.html b/src/pages/proyectos/markdown-visualizer/index.html index 2af7861..f036fa1 100644 --- a/src/pages/proyectos/markdown-visualizer/index.html +++ b/src/pages/proyectos/markdown-visualizer/index.html @@ -11,6 +11,7 @@ + Markdown Visualizer - Real-time Editor + `; + + const wordDocNamespaces = 'xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns="http://www.w3.org/TR/REC-html40"'; + + return { + markdown, + sanitizedHtml, + baseStyles, + wordDocNamespaces, + fullHtml: `Documento Markdown${baseStyles}${sanitizedHtml}` + }; + }; + + // Función para exportar a PDF usando md-to-pdf desde CDN (estilos) y html2pdf para generar el archivo en el navegador const exportToPDF = () => { - const { jsPDF } = window.jspdf; - const doc = new jsPDF(); - const markdown = markdownInput.value; - const parsedHtml = marked.parse(markdown); - doc.text(parsedHtml, 10, 10); - doc.save('documento.pdf'); + const { sanitizedHtml, baseStyles } = buildDocumentHtml(); + const tempContainer = document.createElement('div'); + tempContainer.style.position = 'fixed'; + tempContainer.style.left = '-9999px'; + tempContainer.style.top = '0'; + tempContainer.style.width = '794px'; + tempContainer.innerHTML = `${baseStyles}
${sanitizedHtml}
`; + document.body.appendChild(tempContainer); + + const pdfOptions = { + margin: 10, + filename: 'documento.pdf', + image: { type: 'jpeg', quality: 0.98 }, + html2canvas: { scale: 2, useCORS: true }, + jsPDF: { unit: 'pt', format: 'a4', orientation: 'portrait' } + }; + + html2pdf().from(tempContainer).set(pdfOptions).save().then(() => { + document.body.removeChild(tempContainer); + }).catch(() => { + document.body.removeChild(tempContainer); + alert('No se pudo exportar el PDF. Inténtalo nuevamente.'); + }); }; // Función para exportar a HTML const exportToHTML = () => { - const markdown = markdownInput.value; - const htmlContent = marked.parse(markdown); - const blob = new Blob([htmlContent], { type: 'text/html' }); + const { fullHtml } = buildDocumentHtml(); + const blob = new Blob([fullHtml], { type: 'text/html' }); const link = document.createElement('a'); link.href = URL.createObjectURL(blob); link.download = 'documento.html'; @@ -877,19 +932,18 @@

Markdown Visualizer

// Función para exportar a Word const exportToWord = () => { - const markdown = markdownInput.value; - const htmlContent = marked.parse(markdown); - const blob = new Blob(['\ufeff', htmlContent], { type: 'application/msword' }); + const { fullHtml } = buildDocumentHtml(); + const blob = window.HTMLDocx.asBlob(fullHtml, { orientation: 'portrait' }); const link = document.createElement('a'); link.href = URL.createObjectURL(blob); - link.download = 'documento.doc'; + link.download = 'documento.docx'; link.click(); URL.revokeObjectURL(link.href); }; // Función para exportar a Markdown const exportToMarkdown = () => { - const markdown = markdownInput.value; + const { markdown } = buildDocumentHtml(); const blob = new Blob([markdown], { type: 'text/markdown' }); const link = document.createElement('a'); link.href = URL.createObjectURL(blob); @@ -905,6 +959,4 @@

Markdown Visualizer

document.getElementById('exportWordBtn').addEventListener('click', exportToWord); document.getElementById('exportMarkdownBtn').addEventListener('click', exportToMarkdown); - - - \ No newline at end of file +