feat(toolbar): Add HTML export functionality

junian · junian · commit 7d2dbab3dc98 · 2026-02-11T16:41:03.000+07:00
diff --git a/site/src/components/edit/toolbar/File.vue b/site/src/components/edit/toolbar/File.vue
@@ -29,13 +29,19 @@
       <span i-ri:markdown-fill text-base />
       <span>{{ $t("toolbar.file.export_md") }}</span>
     </li>
+
+    <li class="dropdown-li space-x-1.5 rounded" role="button" @click="exportHtml">
+      <span i-mdi:language-html5 text-base />
+      <span>{{ $t("toolbar.file.export_html") }}</span>
+    </li>
   </ToolItem>
 </template>
 
 <script lang="ts" setup>
 import { downloadFile } from "@renovamen/utils";
 
 const { data } = useDataStore();
+const { styles } = useStyleStore();
 const saveName = computed(() => data.curResumeName.trim().replace(/\s+/g, "_"));
 
 const exportPDF = () => {
@@ -49,4 +55,71 @@ const exportPDF = () => {
 const exportMd = () => {
   downloadFile(`${saveName.value}.md`, data.mdContent);
 };
+
+const exportHtml = () => {
+  const html = renderMarkdown(data.mdContent);
+  
+  // Generate dynamic CSS based on current styles
+  const dynamicCss = `
+    /* Dynamic Styles */
+    body {
+      font-family: ${styles.fontEN.fontFamily || styles.fontEN.name}, ${styles.fontCJK.fontFamily || styles.fontCJK.name};
+      font-size: ${styles.fontSize}px;
+      background-color: white;
+      color: black;
+      margin: ${styles.marginV}px ${styles.marginH}px;
+    }
+    
+    :not(.resume-header-item) > a {
+      color: ${styles.themeColor};
+    }
+    
+    h1, h2, h3 {
+      color: ${styles.themeColor};
+    }
+    
+    h1, h2 {
+      border-bottom-color: ${styles.themeColor};
+    }
+    
+    p, li {
+      line-height: ${styles.lineHeight.toFixed(2)};
+    }
+    
+    h2, h3 {
+      line-height: ${(styles.lineHeight * 1.154).toFixed(2)};
+    }
+    
+    dl {
+      line-height: ${(styles.lineHeight * 1.038).toFixed(2)};
+    }
+    
+    h2 {
+      margin-top: ${styles.paragraphSpace}px;
+    }
+  `;
+  
+  // Combine backbone CSS with dynamic CSS
+  const fullCss = data.cssContent + dynamicCss;
+  
+  // Create complete HTML document
+  const htmlDocument = `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${data.curResumeName}</title>
+  <style>
+${fullCss}
+  </style>
+</head>
+<body>
+  <main id="vue-smart-pages-preview">
+${html}
+  </main>
+</body>
+</html>`;
+  
+  downloadFile(`${saveName.value}.html`, htmlDocument);
+};
 </script>
diff --git a/site/src/i18n/en.yaml b/site/src/i18n/en.yaml
@@ -39,6 +39,7 @@ toolbar:
     import: Import Markdown
     export_pdf: Export PDF
     export_md: Export Markdown
+    export_html: Export HTML
   correct_case:
     text: Correct Case
     desc: "Example: \"Github\" → \"GitHub\" <br> Note: the words only including uppercase or lowercase (\"GITHUB\" or \"github\") will be left untouched"
diff --git a/site/src/i18n/sp.yaml b/site/src/i18n/sp.yaml
@@ -39,6 +39,7 @@ toolbar:
     import: Importar Markdown
     export_pdf: Exportar PDF
     export_md: Exportar Markdown
+    export_html: Exportar HTML
   correct_case:
     text: Corregir Mayusculas
     desc: "Ejemplo: \"Github\" → \"GitHub\" <br> Nota: No se modificarán las palabras que sólo contengan mayúsculas o minúsculas (\"GITHUB\" or \"github\")"
diff --git a/site/src/i18n/zh-cn.yaml b/site/src/i18n/zh-cn.yaml
@@ -39,6 +39,7 @@ toolbar:
     import: 导入 Markdown
     export_pdf: 导出为 PDF
     export_md: 导出为 Markdown
+    export_html: 导出为 HTML
   correct_case:
     text: 专有名词大小写修正
     desc: "例如：\"Github\" → \"GitHub\" <br> 注意：不会修正全为大写或小写字母的单词（如 \"GITHUB\" 或 \"github\"）"
