feat: Added UI functions related to data-flow knowledge base #3221 (#10038)

### What problem does this PR solve?

feat: Added UI functions related to data-flow knowledge base #3221

### Type of change

- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/dataflow-result/components/document-preview/excel-preview.tsx

@@ -0,0 +1,25 @@
+import { useFetchExcel } from '@/pages/document-viewer/hooks';
+import classNames from 'classnames';
+
+interface ExcelCsvPreviewerProps {
+  className?: string;
+  url: string;
+}
+
+export const ExcelCsvPreviewer: React.FC<ExcelCsvPreviewerProps> = ({
+  className,
+  url,
+}) => {
+  // const url = useGetDocumentUrl();
+  const { containerRef } = useFetchExcel(url);
+
+  return (
+    <div
+      ref={containerRef}
+      className={classNames(
+        'relative w-full h-full p-4 bg-background-paper border border-border-normal rounded-md excel-csv-previewer',
+        className,
+      )}
+    ></div>
+  );
+};