feat(toolbar): Extract HTML generation logic into reusable function

junian · junian · commit 7a3144d3ba61 · 2026-02-17T03:39:15.000+07:00
diff --git a/site/src/components/edit/toolbar/File.vue b/site/src/components/edit/toolbar/File.vue
@@ -49,24 +49,11 @@ const { data } = useDataStore();
 const { styles } = useStyleStore();
 const saveName = computed(() => data.curResumeName.trim().replace(/\s+/g, "_"));
 
-const exportPDF = () => {
-  const title = document.title;
-
-  document.title = saveName.value;
-  window.print();
-  document.title = title;
-};
-
-const exportMd = () => {
-  downloadFile(`${saveName.value}.md`, data.mdContent);
-};
-
-const exportHtml = () => {
+// Generate complete HTML document with styles
+const generateHtmlDocument = () => {
   const html = renderMarkdown(data.mdContent);
   
   // Get paper dimensions in pixels
-  const paperWidthMm = PAPER[styles.paper].w;
-  const paperHeightMm = PAPER[styles.paper].h;
   const paperWidthPx = getPaperPx(styles.paper, 'w');
   
   // Generate dynamic CSS based on current styles
@@ -165,92 +152,38 @@ ${html}
 </body>
 </html>`;
   
+  return htmlDocument;
+};
+
+const exportPDF = () => {
+  const title = document.title;
+
+  document.title = saveName.value;
+  window.print();
+  document.title = title;
+};
+
+const exportMd = () => {
+  downloadFile(`${saveName.value}.md`, data.mdContent);
+};
+
+const exportHtml = () => {
+  const htmlDocument = generateHtmlDocument();
   downloadFile(`${saveName.value}.html`, htmlDocument);
 };
 
 const exportDocx = async () => {
   try {
-    const html = renderMarkdown(data.mdContent);
-    
-    // Generate inline CSS for DOCX
-    const inlineCss = `
-      <style>
-        body {
-          font-family: ${styles.fontEN.fontFamily || styles.fontEN.name}, ${styles.fontCJK.fontFamily || styles.fontCJK.name};
-          font-size: ${styles.fontSize}pt;
-          line-height: ${styles.lineHeight.toFixed(2)};
-          color: #000000;
-        }
-        
-        a {
-          color: ${styles.themeColor};
-        }
-        
-        h1, h2, h3 {
-          color: ${styles.themeColor};
-        }
-        
-        h1 {
-          font-size: 2.5em;
-          letter-spacing: 0.1em;
-          text-align: center;
-          margin-bottom: 0.25em;
-          border-bottom: 1px solid ${styles.themeColor};
-        }
-        
-        h2, h3 {
-          margin-bottom: 0.25em;
-          margin-top: ${styles.paragraphSpace}px;
-          font-size: 1.2em;
-          border-bottom: 1px solid ${styles.themeColor};
-        }
-        
-        p, li {
-          line-height: ${styles.lineHeight.toFixed(2)};
-          margin: 0;
-        }
-        
-        ul, ol {
-          padding-left: 1.5em;
-          margin: 0.2em 0 1.0em 0;
-        }
-        
-        .resume-header {
-          text-align: center;
-        }
-        
-        .resume-header h1 {
-          text-align: center;
-          line-height: 1;
-          margin-bottom: 8px;
-        }
-        
-        .resume-header-item:not(.no-separator)::after {
-          content: " | ";
-        }
-      </style>
-    `;
-    
-    // Create HTML document for DOCX conversion
-    const docxHtml = `<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <title>${data.curResumeName}</title>
-  ${inlineCss}
-</head>
-<body>
-${html}
-</body>
-</html>`;
+    // Get the same HTML document used for HTML export
+    const htmlDocument = generateHtmlDocument();
     
     // Dynamic import of the libraries
     const { asBlob } = await import('html-docx-js-typescript');
     // @ts-ignore - file-saver types not available
     const { saveAs } = await import('file-saver');
     
     // Convert HTML to DOCX and save
-    asBlob(docxHtml).then(data => {
+    asBlob(htmlDocument).then(data => {
       saveAs(data, `${saveName.value}.docx`);
     });
   } catch (error) {
