diff --git a/web/package-lock.json b/web/package-lock.json
index 880a1c9b4..ed94049b2 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -45,6 +45,7 @@
         "@tanstack/react-query": "^5.40.0",
         "@tanstack/react-query-devtools": "^5.51.5",
         "@tanstack/react-table": "^8.20.5",
+        "@types/papaparse": "^5.5.1",
         "@uiw/react-markdown-preview": "^5.1.3",
         "@xyflow/react": "^12.3.6",
         "ahooks": "^3.7.10",
@@ -73,6 +74,7 @@
         "mammoth": "^1.7.2",
         "next-themes": "^0.4.6",
         "openai-speech-stream-player": "^1.0.8",
+        "papaparse": "^5.5.3",
         "pptx-preview": "^1.0.5",
         "rc-tween-one": "^3.0.6",
         "react": "^18.2.0",
@@ -10632,6 +10634,15 @@
       "integrity": "sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==",
       "peer": true
     },
+    "node_modules/@types/papaparse": {
+      "version": "5.5.1",
+      "resolved": "https://registry.npmmirror.com/@types/papaparse/-/papaparse-5.5.1.tgz",
+      "integrity": "sha512-esEO+VISsLIyE+JZBmb89NzsYYbpwV8lmv2rPo6oX5y9KhBaIP7hhHgjuTut54qjdKVMufTEcrh5fUl9+58huw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/parse-json": {
       "version": "4.0.2",
       "resolved": "https://registry.npmmirror.com/@types/parse-json/-/parse-json-4.0.2.tgz",
@@ -27413,6 +27424,12 @@
       "resolved": "https://registry.npmmirror.com/pako/-/pako-1.0.11.tgz",
       "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw=="
     },
+    "node_modules/papaparse": {
+      "version": "5.5.3",
+      "resolved": "https://registry.npmmirror.com/papaparse/-/papaparse-5.5.3.tgz",
+      "integrity": "sha512-5QvjGxYVjxO59MGU2lHVYpRWBBtKHnlIAcSe1uNFCkkptUh63NFRj0FJQm7nR67puEruUci/ZkjmEFrjCAyP4A==",
+      "license": "MIT"
+    },
     "node_modules/param-case": {
       "version": "3.0.4",
       "resolved": "https://registry.npmmirror.com/param-case/-/param-case-3.0.4.tgz",
diff --git a/web/package.json b/web/package.json
index f183c8008..051c4b9d7 100644
--- a/web/package.json
+++ b/web/package.json
@@ -58,6 +58,7 @@
     "@tanstack/react-query": "^5.40.0",
     "@tanstack/react-query-devtools": "^5.51.5",
     "@tanstack/react-table": "^8.20.5",
+    "@types/papaparse": "^5.5.1",
     "@uiw/react-markdown-preview": "^5.1.3",
     "@xyflow/react": "^12.3.6",
     "ahooks": "^3.7.10",
@@ -86,6 +87,7 @@
     "mammoth": "^1.7.2",
     "next-themes": "^0.4.6",
     "openai-speech-stream-player": "^1.0.8",
+    "papaparse": "^5.5.3",
     "pptx-preview": "^1.0.5",
     "rc-tween-one": "^3.0.6",
     "react": "^18.2.0",
diff --git a/web/src/components/document-preview/csv-preview.tsx b/web/src/components/document-preview/csv-preview.tsx
index 45b05454e..fa1cf1ed8 100644
--- a/web/src/components/document-preview/csv-preview.tsx
+++ b/web/src/components/document-preview/csv-preview.tsx
@@ -2,6 +2,7 @@ import message from '@/components/ui/message';
 import { Spin } from '@/components/ui/spin';
 import request from '@/utils/request';
 import classNames from 'classnames';
+import Papa from 'papaparse';
 import React, { useEffect, useRef, useState } from 'react';
 
 interface CSVData {
@@ -20,14 +21,17 @@ const CSVFileViewer: React.FC<FileViewerProps> = ({ url }) => {
   const containerRef = useRef<HTMLDivElement>(null);
   // const url = useGetDocumentUrl();
   const parseCSV = (csvText: string): CSVData => {
-    console.log('Parsing CSV data:', csvText);
-    const lines = csvText.split('\n');
-    const headers = lines[0].split(',').map((header) => header.trim());
-    const rows = lines
-      .slice(1)
-      .map((line) => line.split(',').map((cell) => cell.trim()));
+    const result = Papa.parse<string[]>(csvText, {
+      header: false,
+      skipEmptyLines: false,
+    });
 
-    return { headers, rows };
+    const rows = result.data as string[][];
+
+    const headers = rows[0];
+    const dataRows = rows.slice(1);
+
+    return { headers, rows: dataRows };
   };
 
   useEffect(() => {