Resume Doc Download button added

.husky/pre-commit

@@ -1,6 +0,0 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
-yarn pretty-quick --staged
-yarn lint
-yarn test

package.json

@@ -28,6 +28,7 @@
     "dayjs": "^1.11.1",
     "export-from-json": "^1.6.0",
     "framer-motion": "^6.3.0",
+    "html-docx-js": "^0.3.1",
     "html-react-parser": "^3.0.1",
     "immer": "^9.0.12",
     "jodit": "^3.18.6",

src/modules/builder/nav-bar/NavBarLayout.tsx

@@ -26,6 +26,7 @@ import { useBasicDetails } from 'src/stores/basic';
 import { useEducations } from 'src/stores/education';
 import { useExperiences } from 'src/stores/experience';
 import { useVoluteeringStore } from 'src/stores/volunteering';
+import { ResumeDocDownload } from './components/ResumeDocDownload';
 
 const TOTAL_TEMPLATES_AVAILABLE = Object.keys(AVAILABLE_TEMPLATES).length;
 
@@ -153,6 +154,7 @@ const NavBarLayout = () => {
               onChange={handleFileChange}
             />
           </StyledButton>
+          <ResumeDocDownload />
           <PrintResume />
         </NavBarActions>
       </div>

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

@@ -0,0 +1,25 @@
+import { useEffect } from 'react';
+import { StyledButton } from '../atoms';
+import htmlDocx from 'html-docx-js/dist/html-docx';
+
+export const ResumeDocDownload = () => {
+  const handleDownloadDoc = () => {
+    const resumeContent = document.getElementById('resume-content'); // Adjust the ID according to your actual content
+    const fileName = `Resume_Builder_${Date.now()}.doc`;
+
+    const content = resumeContent.innerHTML;
+
+    const converted = htmlDocx.asBlob(content, { orientation: 'portrait' });
+
+    const link = document.createElement('a');
+    link.href = URL.createObjectURL(converted);
+    link.download = fileName;
+    link.click();
+  };
+
+  return (
+    <StyledButton onClick={handleDownloadDoc} variant="outlined">
+      Download as DOC
+    </StyledButton>
+  );
+};

src/modules/builder/resume/ResumeLayout.tsx

@@ -29,6 +29,7 @@ export const ResumeLayout = () => {
   return (
     <div className="mx-5 print:mx-0 mb-2 print:mb-0">
       <div
+        id="resume-content"
         style={{ transform: `scale(${zoom})` }}
         className="origin-top transition-all duration-300 ease-linear	print:!scale-100"
       >