feat: implement document loading from remote URLs via URL parameters, enhancing user experience and multi-format support in README

Author: chaxus

index.ts

@@ -35,7 +35,7 @@ const events: Record<string, MessageHandler<any, unknown>> = {
     // Hide the control panel when rendering office
     hideControlPanel();
     fileChunks.push(data);
-      if (fileChunks.length >= data.totalChunks) {
+    if (fileChunks.length >= data.totalChunks) {
       const { removeLoading } = showLoading();
       try {
         const file = await MessageCodec.decodeFileChunked(fileChunks);
@@ -70,7 +70,7 @@ const events: Record<string, MessageHandler<any, unknown>> = {
 
 Platform.init(events);
 
-const { file } = getAllQueryString();
+const { file, src } = getAllQueryString();
 
 const onCreateNew = async (ext: string) => {
   // Note: Loading is now shown in the menu button click handler
@@ -704,12 +704,96 @@ createControlPanel();
 window.hideControlPanel = hideControlPanel;
 window.showControlPanel = showControlPanel;
 
-if (!file) {
+// Function to open document from URL
+const openDocumentFromUrl = async (url: string, fileName?: string) => {
+  const { removeLoading } = showLoading();
+  try {
+    hideControlPanel();
+
+    // Fetch the file from URL
+    console.log('Fetching document from URL:', url);
+    // eslint-disable-next-line n/no-unsupported-features/node-builtins
+    const response = await fetch(url);
+
+    if (!response.ok) {
+      throw new Error(`Failed to fetch document: ${response.status} ${response.statusText}`);
+    }
+
+    // Get file name from URL or Content-Disposition header, or use provided name
+    let finalFileName = fileName;
+    if (!finalFileName) {
+      // Try to get filename from Content-Disposition header
+      const contentDisposition = response.headers.get('Content-Disposition');
+      if (contentDisposition) {
+        const filenameMatch = contentDisposition.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/);
+        if (filenameMatch && filenameMatch[1]) {
+          finalFileName = filenameMatch[1].replace(/['"]/g, '');
+        }
+      }
+
+      // If still no filename, extract from URL
+      if (!finalFileName) {
+        try {
+          const urlObj = new URL(url);
+          const pathname = urlObj.pathname;
+          finalFileName = pathname.split('/').pop() || 'document';
+          // Remove query parameters if any
+          finalFileName = finalFileName.split('?')[0];
+        } catch {
+          finalFileName = 'document';
+        }
+      }
+    }
+
+    // Get file blob
+    const blob = await response.blob();
+    const file = new File([blob], finalFileName, { type: blob.type });
+
+    // Set document object
+    setDocmentObj({
+      fileName: finalFileName,
+      file: file,
+      url: window.URL.createObjectURL(file),
+    });
+
+    // Initialize and open document
+    await initX2T();
+    const { fileName: docFileName, file: fileBlob } = getDocmentObj();
+    await handleDocumentOperation({ file: fileBlob, fileName: docFileName, isNew: !fileBlob });
+
+    // Show menu guide after document is loaded
+    setTimeout(() => {
+      showMenuGuide();
+    }, 1000);
+  } catch (error) {
+    console.error('Error opening document from URL:', error);
+    alert(`Failed to open document: ${error instanceof Error ? error.message : 'Unknown error'}`);
+    showControlPanel();
+  } finally {
+    removeLoading();
+  }
+};
+
+// Check for file or src parameter in URL
+// Both parameters support opening document from URL
+// Priority: file > src (for backward compatibility)
+// Examples:
+//   ?file=https://example.com/doc.docx
+//   ?src=https://example.com/doc.docx
+//   ?file=doc1.docx&src=doc2.xlsx (will use file: doc1.docx)
+const documentUrl = file || src;
+if (documentUrl) {
+  // Decode URL if it's encoded
+  try {
+    const decodedUrl = decodeURIComponent(documentUrl);
+    // Open document from URL
+    openDocumentFromUrl(decodedUrl);
+  } catch (error) {
+    // If decoding fails, try using original URL
+    console.warn('Failed to decode URL, using original:', error);
+    openDocumentFromUrl(documentUrl);
+  }
+} else {
   // Don't automatically open document dialog, let user choose
   // onOpenDocument();
-} else {
-  setDocmentObj({
-    fileName: Math.random().toString(36).substring(2, 15),
-    url: file,
-  });
 }

lib/x2t.ts

@@ -542,11 +542,7 @@ class X2TConverter {
         const xlsxFileName = `${sanitizedBase}.xlsx`;
         this.x2tModule!.FS.writeFile(`/working/${binFileName}`, bin);
 
-        const params = this.createConversionParams(
-          `/working/${binFileName}`,
-          `/working/${xlsxFileName}`,
-          '',
-        );
+        const params = this.createConversionParams(`/working/${binFileName}`, `/working/${xlsxFileName}`, '');
 
         this.x2tModule!.FS.writeFile('/working/params.xml', params);
         this.executeConversion('/working/params.xml');
@@ -880,10 +876,10 @@ async function handleSaveDocument(event: SaveEvent) {
   if (event.data && event.data.data) {
     const { data, option } = event.data;
     const { fileName } = getDocmentObj() || {};
-    
+
     // Determine target format from editor's output format
     let targetFormat = c_oAscFileType2[option.outputformat];
-    
+
     // Only force CSV format if the original file is CSV
     // This check ensures XLSX and other file types are not affected
     // CSV files are converted to XLSX internally, so editor may return XLSX format
@@ -895,7 +891,7 @@ async function handleSaveDocument(event: SaveEvent) {
       // This ensures XLSX files are saved as XLSX, not CSV
       console.log(`Saving as ${targetFormat} format (original file: ${fileName})`);
     }
-    
+
     // Create download
     await convertBinToDocumentAndDownload(data.data, fileName, targetFormat);
   }
@@ -956,9 +952,7 @@ async function queueEditorOperation<T>(operation: () => Promise<T>): Promise<T>
   try {
     await Promise.race([
       editorOperationQueue,
-      new Promise((_, reject) => 
-        setTimeout(() => reject(new Error('Editor operation queue timeout')), 30000)
-      )
+      new Promise((_, reject) => setTimeout(() => reject(new Error('Editor operation queue timeout')), 30000)),
     ]);
   } catch (error) {
     // If timeout, log warning but continue (previous operation may have failed)
@@ -969,18 +963,18 @@ async function queueEditorOperation<T>(operation: () => Promise<T>): Promise<T>
       throw error;
     }
   }
-  
+
   // Create a new promise for this operation
   let resolveOperation: () => void;
   let rejectOperation: (error: any) => void;
   const operationPromise = new Promise<void>((resolve, reject) => {
     resolveOperation = resolve;
     rejectOperation = reject;
   });
-  
+
   // Update the queue
   editorOperationQueue = operationPromise;
-  
+
   try {
     const result = await operation();
     resolveOperation!();
@@ -1079,22 +1073,22 @@ function createEditorInstance(config: {
 }) {
   return queueEditorOperation(async () => {
     const { fileName, fileType, binData, media } = config;
-    
+
     // Check if there's an existing editor that needs cleanup
     const hasExistingEditor = !!window.editor;
-    
+
     // Clean up old editor instance properly
     if (window.editor) {
       try {
         console.log('Destroying previous editor instance...');
         window.editor.destroyEditor();
-        
+
         // When switching between document types, especially from/to PPT,
         // we need more time for cleanup. PPT editors are particularly resource-intensive.
         // Use longer delay when switching editors or when dealing with presentations
         const isPresentation = fileType === 'pptx' || fileType === 'ppt';
-        const destroyDelay = (hasExistingEditor && isPresentation) ? 400 : hasExistingEditor ? 250 : 150;
-        
+        const destroyDelay = hasExistingEditor && isPresentation ? 400 : hasExistingEditor ? 250 : 150;
+
         // Wait a bit for destroy to complete
         await new Promise((resolve) => setTimeout(resolve, destroyDelay));
       } catch (error) {
@@ -1116,69 +1110,69 @@ function createEditorInstance(config: {
     // This is especially important when switching between different document types
     // When switching editors, especially involving PPT, we need more time
     const isPresentation = fileType === 'pptx' || fileType === 'ppt';
-    const cleanupDelay = (hasExistingEditor && isPresentation) ? 400 : hasExistingEditor ? 250 : 150;
+    const cleanupDelay = hasExistingEditor && isPresentation ? 400 : hasExistingEditor ? 250 : 150;
     await new Promise((resolve) => setTimeout(resolve, cleanupDelay));
 
     const editorLang = getOnlyOfficeLang();
     console.log('Creating new editor instance for:', fileName, 'type:', fileType);
 
     try {
       window.editor = new window.DocsAPI.DocEditor('iframe', {
-    document: {
-      title: fileName,
-      url: fileName, // Use file name as identifier
-      fileType: fileType,
-      permissions: {
-        edit: true,
-        chat: false,
-        protect: false,
-      },
-    },
-    editorConfig: {
-      lang: editorLang,
-      customization: {
-        help: false,
-        about: false,
-        hideRightMenu: true,
-        features: {
-          spellcheck: {
-            change: false,
+        document: {
+          title: fileName,
+          url: fileName, // Use file name as identifier
+          fileType: fileType,
+          permissions: {
+            edit: true,
+            chat: false,
+            protect: false,
           },
         },
-        anonymous: {
-          request: false,
-          label: 'Guest',
+        editorConfig: {
+          lang: editorLang,
+          customization: {
+            help: false,
+            about: false,
+            hideRightMenu: true,
+            features: {
+              spellcheck: {
+                change: false,
+              },
+            },
+            anonymous: {
+              request: false,
+              label: 'Guest',
+            },
+          },
         },
-      },
-    },
-    events: {
-      onAppReady: () => {
-        // Set media resources
-        if (media) {
-          window.editor?.sendCommand({
-            command: 'asc_setImageUrls',
-            data: { urls: media },
-          });
-        }
-
-        // Load document content
-        window.editor?.sendCommand({
-          command: 'asc_openDocument',
-          // @ts-expect-error binData type is handled by the editor
-          data: { buf: binData },
-        });
-      },
-      onDocumentReady: () => {
-        console.log(`${t('documentLoaded')}${fileName}`);
-        // Note: For CSV files, the save dialog may show XLSX format,
-        // but the actual save will be forced to CSV format in handleSaveDocument
-      },
-      onSave: handleSaveDocument,
-      // writeFile
-      // TODO: writeFile - handle when pasting images from external sources
-      writeFile: handleWriteFile,
-    },
-  });
+        events: {
+          onAppReady: () => {
+            // Set media resources
+            if (media) {
+              window.editor?.sendCommand({
+                command: 'asc_setImageUrls',
+                data: { urls: media },
+              });
+            }
+
+            // Load document content
+            window.editor?.sendCommand({
+              command: 'asc_openDocument',
+              // @ts-expect-error binData type is handled by the editor
+              data: { buf: binData },
+            });
+          },
+          onDocumentReady: () => {
+            console.log(`${t('documentLoaded')}${fileName}`);
+            // Note: For CSV files, the save dialog may show XLSX format,
+            // but the actual save will be forced to CSV format in handleSaveDocument
+          },
+          onSave: handleSaveDocument,
+          // writeFile
+          // TODO: writeFile - handle when pasting images from external sources
+          writeFile: handleWriteFile,
+        },
+      });
     } catch (error) {
       console.error('Error creating editor instance:', error);
       throw error;