add Download as DOCX/DOC button

package.json

@@ -23,12 +23,15 @@
     "@mui/material": "^5.6.1",
     "@mui/x-date-pickers": "^5.0.0-alpha.2",
     "@splidejs/splide": "^4.0.1",
+    "@types/file-saver": "^2.0.7",
     "@vercel/analytics": "^0.1.6",
     "color": "^4.2.3",
     "dayjs": "^1.11.1",
     "export-from-json": "^1.6.0",
+    "file-saver": "^2.0.5",
     "framer-motion": "^6.3.0",
     "html-react-parser": "^3.0.1",
+    "html-to-docx": "^1.8.0",
     "immer": "^9.0.12",
     "jodit": "^3.18.6",
     "next": "^13.1.6",
@@ -70,5 +73,8 @@
     "pretty-quick": "^3.1.3",
     "tailwindcss": "^3.0.23",
     "typescript": "4.6.3"
+  },
+  "browser": {
+    "fs": false
   }
 }

src/modules/builder/nav-bar/components/PrintResume.tsx

@@ -1,8 +1,12 @@
 import { useEffect } from 'react';
-
+import { useTemplates } from 'src/stores/useTemplate';
 import { StyledButton } from '../atoms';
+import { saveAs } from 'file-saver';
+import HTMLtoDOCX from 'html-to-docx';
 
 export const PrintResume = () => {
+  const templateIndex = useTemplates((state) => state.activeTemplate.id);
+
   useEffect(() => {
     globalThis?.addEventListener('beforeprint', () => {
       globalThis.document.title = `Resume_Builder_${Date.now()}`;
@@ -13,9 +17,38 @@ export const PrintResume = () => {
     });
   }, []);
 
+  const downloadAsPDF = () => {
+    globalThis?.print();
+  };
+
+  const downloadAsDOCX = async () => {
+    const resumeElement = document.querySelector(`#${templateIndex}_template`);
+
+    if (!resumeElement) {
+      console.error('resumeElement not found');
+      return;
+    }
+
+    try {
+      const docxBuffer = await HTMLtoDOCX(resumeElement.innerHTML);
+
+      const blob = new Blob([docxBuffer], {
+        type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+      });
+      saveAs(blob, `Resume_Builder_${Date.now()}.docx`);
+    } catch (error) {
+      console.error('Error converting to DOCX:', error);
+    }
+  };
+
   return (
-    <StyledButton onClick={globalThis?.print} variant="outlined">
-      Download as PDF
-    </StyledButton>
+    <>
+      <StyledButton onClick={downloadAsPDF} variant="outlined">
+        Download as PDF
+      </StyledButton>
+      <StyledButton onClick={downloadAsDOCX} variant="outlined">
+        Download as DOC/DOCX
+      </StyledButton>
+    </>
   );
 };

src/templates/modern/MordernTemplate.tsx

@@ -14,7 +14,7 @@ export default function MordernTemplate() {
   const resumeData = useContext(StateContext);
 
   return (
-    <div className="p-2">
+    <div className="p-2" id="modern_template">
       <BasicIntro
         name={resumeData.basics.name}
         label={resumeData.basics.label}

src/templates/professional/ProfessionalTemplate.tsx

@@ -49,7 +49,7 @@ export default function ProfessionalTemplate() {
   const achievements = resumeData.activities.achievements;
 
   return (
-    <ResumeContainer>
+    <ResumeContainer id="professional_template">
       <LeftSection>
         <Section
           title={resumeData.basics?.name}