feat: implement download functionality for document export in SuperDoc eSign

Author: caio-pizzol

demo/src/App.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useRef, useEffect, useCallback } from 'react';
 import SuperDocESign from '@superdoc-dev/esign';
-import type { SuperDocESignHandle, Status, AuditData, FieldInfo } from '@superdoc-dev/esign';
+import type { SuperDocESignHandle, Status, AuditData, FieldInfo, DownloadRequestData } from '@superdoc-dev/esign';
 import 'superdoc/dist/style.css';
 import './App.css';
 
@@ -115,6 +115,28 @@ export function App() {
         setAuditData(data);
     }, [log]);
 
+    const handleDownloadRequest = useCallback(async (data: DownloadRequestData) => {
+        log(`Download requested - ${data.fields.length} fields included`);
+
+        // Simulate sending to server for PDF conversion
+        // In production, you would send to your backend:
+        // const formData = new FormData();
+        // formData.append('document', data.blob, 'document.docx');
+        // formData.append('fields', JSON.stringify(data.fields));
+        // const response = await fetch('/api/convert-to-pdf', { method: 'POST', body: formData });
+        // const pdfBlob = await response.blob();
+
+        // For demo: just download the DOCX
+        const url = URL.createObjectURL(data.blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `agreement-${Date.now()}.docx`;
+        a.click();
+        URL.revokeObjectURL(url);
+
+        log('Download complete');
+    }, [log]);
+
     const handleReset = () => {
         esignRef.current?.reset();
         setIsAccepted(false);
@@ -286,7 +308,22 @@ export function App() {
                         <>
                             {/* Document Viewer */}
                             <div className="document-section">
-                                <label>Employment Agreement</label>
+                                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '8px' }}>
+                                    <label style={{ margin: 0 }}>Employment Agreement</label>
+                                    <a
+                                        href="#"
+                                        data-esign-download
+                                        style={{
+                                            color: '#6366f1',
+                                            textDecoration: 'none',
+                                            fontSize: '14px',
+                                            opacity: isReady ? 1 : 0.5,
+                                            pointerEvents: isReady ? 'auto' : 'none'
+                                        }}
+                                    >
+                                        Download
+                                    </a>
+                                </div>
                                 <SuperDocESign
                                     ref={esignRef}
                                     document="https://storage.googleapis.com/public_statichosting/word_documents/agreement_template.docx"
@@ -305,6 +342,7 @@ export function App() {
                                     onChange={handleStatusChange}
                                     onAccept={handleAccept}
                                     onFieldsDiscovered={handleFieldsDiscovered}
+                                    onDownloadRequest={handleDownloadRequest}
                                     className="document-container"
                                 />
                                 {!status.scroll && config.scroll && (

src/index.tsx

@@ -38,6 +38,11 @@ export interface FieldInfo {
   value?: any;
 }
 
+export interface DownloadRequestData {
+  blob: Blob;
+  fields: FieldInfo[];
+}
+
 export interface SuperDocESignProps {
   // Document
   document: string | File | Blob;
@@ -55,12 +60,14 @@ export interface SuperDocESignProps {
   // Element selectors (for finding signature/consent elements)
   signatureSelector?: string;
   consentSelector?: string;
+  downloadSelector?: string;
 
   // Callbacks
   onReady?: () => void;
   onChange?: (status: Status) => void;
   onAccept?: (data: AuditData) => void | Promise<void>;
   onFieldsDiscovered?: (fields: FieldInfo[]) => void;
+  onDownloadRequest?: (data: DownloadRequestData) => void | Promise<void>;
 
   // Style
   className?: string;
@@ -73,6 +80,7 @@ export interface SuperDocESignHandle {
   updateFields: (fields: FieldUpdate[]) => void;
   getStatus: () => Status;
   getFields: () => FieldInfo[];
+  requestDownload: () => Promise<DownloadRequestData | false>;
   superdoc: SuperDoc | null;
 }
 
@@ -84,10 +92,12 @@ const SuperDocESign = forwardRef<SuperDocESignHandle, SuperDocESignProps>(
       fields: initialFields = [],
       signatureSelector = "[data-esign-signature]",
       consentSelector = "[data-esign-consent]",
+      downloadSelector = "[data-esign-download]",
       onReady,
       onChange,
       onAccept,
       onFieldsDiscovered,
+      onDownloadRequest,
       className,
       style,
     },
@@ -452,6 +462,52 @@ const SuperDocESign = forwardRef<SuperDocESignHandle, SuperDocESignProps>(
       return Array.from(fields.values());
     }, [fields]);
 
+    const requestDownload = useCallback(async (): Promise<DownloadRequestData | false> => {
+      if (!superdocRef.current) return false;
+
+      try {
+        const result = await superdocRef.current.export({
+          exportType: ['docx'],
+          isFinalDoc: true,
+          triggerDownload: false,
+        });
+
+        if (!result) return false;
+
+        const downloadData: DownloadRequestData = {
+          blob: result,
+          fields: Array.from(fields.values()),
+        };
+
+        await onDownloadRequest?.(downloadData);
+        return downloadData;
+      } catch (error) {
+        console.error('Download request failed:', error);
+        return false;
+      }
+    }, [fields, onDownloadRequest]);
+
+    // Track download button clicks
+    useEffect(() => {
+      if (!isReady) return;
+
+      const handleDownloadClick = (e: Event) => {
+        e.preventDefault();
+        requestDownload();
+      };
+
+      const downloadElements = globalThis.document.querySelectorAll(downloadSelector);
+      downloadElements.forEach((el) => {
+        el.addEventListener('click', handleDownloadClick);
+      });
+
+      return () => {
+        downloadElements.forEach((el) => {
+          el.removeEventListener('click', handleDownloadClick);
+        });
+      };
+    }, [downloadSelector, isReady, requestDownload]);
+
     // Expose methods via ref
     useImperativeHandle(
       ref,
@@ -461,9 +517,10 @@ const SuperDocESign = forwardRef<SuperDocESignHandle, SuperDocESignProps>(
         updateFields,
         getStatus,
         getFields,
+        requestDownload,
         superdoc: superdocRef.current,
       }),
-      [accept, reset, updateFields, getStatus, getFields],
+      [accept, reset, updateFields, getStatus, getFields, requestDownload],
     );
 
     return <div ref={containerRef} className={className} style={style} />;