ti.sil/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2026-01-02 06:35:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

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) => {
if (!res.ok) throw await res.json();
return await res.blob();
return await res.arrayBuffer();
})
.catch((err) => {
error = err.detail;

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

@ -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;