Added Button to download resume in docx format

package.json

@@ -63,6 +63,7 @@
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-storybook": "^0.5.8",
+    "html-docx-js-typescript": "^0.1.5",
     "husky": "^7.0.0",
     "jest": "^27.5.1",
     "postcss": "^8.4.12",

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

@@ -153,7 +153,8 @@ const NavBarLayout = () => {
               onChange={handleFileChange}
             />
           </StyledButton>
-          <PrintResume />
+          <PrintResume format="doc" />
+          <PrintResume format="pdf" />
         </NavBarActions>
       </div>
       <Toast

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

@@ -1,8 +1,12 @@
-import { useEffect } from 'react';
-
+import { FC, useEffect } from 'react';
 import { StyledButton } from '../atoms';
+import { asBlob } from 'html-docx-js-typescript';
+
+type P = {
+  format: 'doc' | 'pdf';
+};
 
-export const PrintResume = () => {
+export const PrintResume: FC<P> = ({ format }) => {
   useEffect(() => {
     globalThis?.addEventListener('beforeprint', () => {
       globalThis.document.title = `Resume_Builder_${Date.now()}`;
@@ -13,9 +17,28 @@ export const PrintResume = () => {
     });
   }, []);
 
+  const downloadDocs = () => {
+    const data = globalThis.document.getElementById('resume')?.innerHTML || '';
+    asBlob(data).then((inBlob) => {
+      let blob;
+      if (inBlob instanceof Buffer) {
+        blob = new Blob([inBlob.buffer], { type: 'application/octet-stream' });
+      } else {
+        blob = inBlob;
+      }
+      const fileName = `Resume_${Date.now()}.docx`;
+      const link = document.createElement('a');
+      link.href = URL.createObjectURL(blob);
+      link.download = fileName;
+      link.click();
+    });
+  };
+
+  const downloadFunction = format === 'pdf' ? globalThis?.print : downloadDocs;
+  const buttonText = format === 'pdf' ? 'Download as PDF' : 'Download as DOCX';
   return (
-    <StyledButton onClick={globalThis?.print} variant="outlined">
-      Download as PDF
+    <StyledButton onClick={downloadFunction} variant="outlined">
+      {buttonText}
     </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"
         style={{ transform: `scale(${zoom})` }}
         className="origin-top transition-all duration-300 ease-linear	print:!scale-100"
       >