From 87e8d39a9035a3e5f02b959d223098553ef2e726 Mon Sep 17 00:00:00 2001
From: Shirasawa <764798966@qq.com>
Date: Mon, 29 Dec 2025 04:47:37 +0800
Subject: [PATCH] feat: Dynamically load xlsx to speed up page loading (#20203)

---
 src/lib/apis/files/index.ts                   |  2 +-
 .../components/common/FileItemModal.svelte    | 28 ++++++-------------
 2 files changed, 10 insertions(+), 20 deletions(-)

diff --git a/src/lib/apis/files/index.ts b/src/lib/apis/files/index.ts
index 07042c4ade..44af669fa1 100644
--- a/src/lib/apis/files/index.ts
+++ b/src/lib/apis/files/index.ts
@@ -252,7 +252,7 @@ export const getFileContentById = async (id: string) => {
 	})
 		.then(async (res) => {
 			if (!res.ok) throw await res.json();
-			return await res.blob();
+			return await res.arrayBuffer();
 		})
 		.catch((err) => {
 			error = err.detail;
diff --git a/src/lib/components/common/FileItemModal.svelte b/src/lib/components/common/FileItemModal.svelte
index 33a9d3b3f4..709d622624 100644
--- a/src/lib/components/common/FileItemModal.svelte
+++ b/src/lib/components/common/FileItemModal.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-	import * as XLSX from 'xlsx';
+	import type { WorkBook } from 'xlsx';
 
 	import { getContext, onMount, tick } from 'svelte';
 
 	import { formatFileSize, getLineCount } from '$lib/utils';
 	import { WEBUI_API_BASE_URL } from '$lib/constants';
 	import { getKnowledgeById } from '$lib/apis/knowledge';
-	import { getFileById } from '$lib/apis/files';
+	import { getFileById, getFileContentById } from '$lib/apis/files';
 
 	import CodeBlock from '$lib/components/chat/Messages/CodeBlock.svelte';
 	import Markdown from '$lib/components/chat/Messages/Markdown.svelte';
@@ -15,7 +15,6 @@
 
 	import Modal from './Modal.svelte';
 	import XMark from '../icons/XMark.svelte';
-	import Info from '../icons/Info.svelte';
 	import Switch from './Switch.svelte';
 	import Tooltip from './Tooltip.svelte';
 	import dayjs from 'dayjs';
@@ -33,7 +32,7 @@
 	let isExcel = false;
 
 	let selectedTab = '';
-	let excelWorkbook: XLSX.WorkBook | null = null;
+	let excelWorkbook: WorkBook | null = null;
 	let excelSheetNames: string[] = [];
 	let selectedSheet = '';
 	let excelHtml = '';
@@ -93,35 +92,26 @@
 	const loadExcelContent = async () => {
 		try {
 			excelError = '';
-			const response = await fetch(`${WEBUI_API_BASE_URL}/files/${item.id}/content`, {
-				headers: {
-					Authorization: `Bearer ${localStorage.token}`
-				}
-			});
-
-			if (!response.ok) {
-				throw new Error('Failed to fetch Excel file');
-			}
-
-			const arrayBuffer = await response.arrayBuffer();
-			excelWorkbook = XLSX.read(arrayBuffer, { type: 'array' });
+			const [arrayBuffer, { read }] = await Promise.all([getFileContentById(item.id), import('xlsx')]);
+			excelWorkbook = read(arrayBuffer, { type: 'array' });
 			excelSheetNames = excelWorkbook.SheetNames;
 
 			if (excelSheetNames.length > 0) {
 				selectedSheet = excelSheetNames[0];
-				renderExcelSheet();
+				await renderExcelSheet();
 			}
 		} catch (error) {
 			console.error('Error loading Excel/CSV file:', error);
-			excelError = 'Failed to load Excel/CSV file. Please try downloading it instead.';
+			excelError = $i18n.t('Failed to load Excel/CSV file. Please try downloading it instead.');
 		}
 	};
 
-	const renderExcelSheet = () => {
+	const renderExcelSheet = async () => {
 		if (!excelWorkbook || !selectedSheet) return;
 
 		const worksheet = excelWorkbook.Sheets[selectedSheet];
 		// Calculate row count
+		const XLSX = await import('xlsx');
 		const range = XLSX.utils.decode_range(worksheet['!ref'] || 'A1:A1');
 		rowCount = range.e.r - range.s.r + 1;