ti.sil/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2026-01-02 14:45:18 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

feat: Dynamically load xlsx to speed up page loading (#20203)

Browse source
This commit is contained in:
Shirasawa 2025-12-29 04:47:37 +08:00 committed by GitHub
parent 9a9b5ef699
commit 87e8d39a90
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 10 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/lib/apis/files/index.ts
View file

@ -252,7 +252,7 @@ export const getFileContentById = async (id: string) => {
}) })
.then(async (res) => { .then(async (res) => {
if (!res.ok) throw await res.json(); if (!res.ok) throw await res.json();
return await res.blob(); return await res.arrayBuffer();
}) })
.catch((err) => { .catch((err) => {
error = err.detail; error = err.detail;

28
src/lib/components/common/FileItemModal.svelte
View file

@ -1,12 +1,12 @@
<script lang="ts"> <script lang="ts">
import * as XLSX from 'xlsx'; import type { WorkBook } from 'xlsx';
import { getContext, onMount, tick } from 'svelte'; import { getContext, onMount, tick } from 'svelte';
import { formatFileSize, getLineCount } from '$lib/utils'; import { formatFileSize, getLineCount } from '$lib/utils';
import { WEBUI_API_BASE_URL } from '$lib/constants'; import { WEBUI_API_BASE_URL } from '$lib/constants';
import { getKnowledgeById } from '$lib/apis/knowledge'; 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 CodeBlock from '$lib/components/chat/Messages/CodeBlock.svelte';
import Markdown from '$lib/components/chat/Messages/Markdown.svelte'; import Markdown from '$lib/components/chat/Messages/Markdown.svelte';
@ -15,7 +15,6 @@
import Modal from './Modal.svelte'; import Modal from './Modal.svelte';
import XMark from '../icons/XMark.svelte'; import XMark from '../icons/XMark.svelte';
import Info from '../icons/Info.svelte';
import Switch from './Switch.svelte'; import Switch from './Switch.svelte';
import Tooltip from './Tooltip.svelte'; import Tooltip from './Tooltip.svelte';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
@ -33,7 +32,7 @@
let isExcel = false; let isExcel = false;
let selectedTab = ''; let selectedTab = '';
let excelWorkbook: XLSX.WorkBook | null = null; let excelWorkbook: WorkBook | null = null;
let excelSheetNames: string[] = []; let excelSheetNames: string[] = [];
let selectedSheet = ''; let selectedSheet = '';
let excelHtml = ''; let excelHtml = '';
@ -93,35 +92,26 @@
const loadExcelContent = async () => { const loadExcelContent = async () => {
try { try {
excelError = ''; excelError = '';
const response = await fetch(`${WEBUI_API_BASE_URL}/files/${item.id}/content`, { const [arrayBuffer, { read }] = await Promise.all([getFileContentById(item.id), import('xlsx')]);
headers: { excelWorkbook = read(arrayBuffer, { type: 'array' });
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' });
excelSheetNames = excelWorkbook.SheetNames; excelSheetNames = excelWorkbook.SheetNames;
if (excelSheetNames.length > 0) { if (excelSheetNames.length > 0) {
selectedSheet = excelSheetNames[0]; selectedSheet = excelSheetNames[0];
renderExcelSheet(); await renderExcelSheet();
} }
} catch (error) { } catch (error) {
console.error('Error loading Excel/CSV file:', 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; if (!excelWorkbook || !selectedSheet) return;
const worksheet = excelWorkbook.Sheets[selectedSheet]; const worksheet = excelWorkbook.Sheets[selectedSheet];
// Calculate row count // Calculate row count
const XLSX = await import('xlsx');
const range = XLSX.utils.decode_range(worksheet['!ref'] || 'A1:A1'); const range = XLSX.utils.decode_range(worksheet['!ref'] || 'A1:A1');
rowCount = range.e.r - range.s.r + 1; rowCount = range.e.r - range.s.r + 1;