feat: 添加文档转PDF转换功能

- 后端添加 PDF 转换服务,支持 Word(docx)、Excel(xlsx)、文本(txt)、Markdown(md) 格式转换为 PDF
- 使用 reportlab 库,支持中文字体(simhei.ttf)
- 添加 FastAPI 接口:POST /api/v1/pdf/convert 单文件转换,POST /api/v1/pdf/convert/batch 批量转换
- 前端添加 PdfConverter 页面,支持拖拽上传、转换进度显示、批量下载
- 转换流程:所有格式先转为 Markdown,再通过 Markdown 转 PDF,保证输出一致性
- DOCX 解析使用 zipfile 直接读取 XML,避免 python-docx 的兼容性问题的
This commit is contained in:
dj
2026-04-20 00:00:30 +08:00
parent 581e2b0ae0
commit be302839ee
12 changed files with 1200 additions and 3 deletions

View File

@@ -8,7 +8,8 @@ import {
Menu,
ChevronRight,
Sparkles,
Clock
Clock,
FileDown
} from 'lucide-react';
import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';
@@ -19,6 +20,7 @@ const navItems = [
{ name: '文档中心', path: '/documents', icon: FileText },
{ name: '智能填表', path: '/form-fill', icon: TableProperties },
{ name: '智能助手', path: '/assistant', icon: MessageSquareCode },
{ name: '文档转PDF', path: '/pdf-converter', icon: FileDown },
{ name: '任务历史', path: '/task-history', icon: Clock },
];

View File

@@ -1153,6 +1153,120 @@ export const backendApi = {
}
},
// ==================== PDF 转换 API ====================
/**
* 将文件转换为 PDF
*/
/**
* PDF转换并直接下载使用XHR支持IDM拦截
*/
async convertAndDownloadPdf(file: File): Promise<void> {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open('POST', `${BACKEND_BASE_URL}/pdf/convert`);
xhr.onload = function() {
if (xhr.status >= 200 && xhr.status < 300) {
// 创建 blob 并触发下载
const blob = xhr.response;
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `${file.name.replace(/\.[^.]+$/, '')}.pdf`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
resolve();
} else {
reject(new Error(`转换失败: ${xhr.status}`));
}
};
xhr.onerror = function() {
reject(new Error('网络错误'));
};
const formData = new FormData();
formData.append('file', file);
xhr.responseType = 'blob';
xhr.send(formData);
});
},
/**
* PDF转换返回Blob
*/
async convertToPdf(file: File): Promise<Blob> {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open('POST', `${BACKEND_BASE_URL}/pdf/convert`);
xhr.onload = function() {
if (xhr.status >= 200 && xhr.status < 300) {
resolve(xhr.response);
} else {
reject(new Error(`转换失败: ${xhr.status}`));
}
};
xhr.onerror = function() {
reject(new Error('网络错误'));
};
const formData = new FormData();
formData.append('file', file);
xhr.responseType = 'blob';
xhr.send(formData);
});
},
/**
* 批量将文件转换为 PDF
*/
async batchConvertToPdf(files: File[]): Promise<Blob> {
const formData = new FormData();
files.forEach(file => formData.append('files', file));
const url = `${BACKEND_BASE_URL}/pdf/convert/batch`;
try {
const response = await fetch(url, {
method: 'POST',
body: formData,
});
if (!response.ok) {
const error = await response.json();
throw new Error(error.detail || '批量PDF转换失败');
}
return await response.blob();
} catch (error) {
console.error('批量PDF转换失败:', error);
throw error;
}
},
/**
* 获取支持的 PDF 转换格式
*/
async getPdfSupportedFormats(): Promise<{
success: boolean;
formats: string[];
}> {
const url = `${BACKEND_BASE_URL}/pdf/formats`;
try {
const response = await fetch(url);
if (!response.ok) throw new Error('获取支持的格式失败');
return await response.json();
} catch (error) {
console.error('获取支持的格式失败:', error);
return { success: false, formats: ['docx', 'xlsx', 'txt', 'md'] };
}
}
};
// ==================== AI 分析 API ====================
@@ -1805,5 +1919,6 @@ export const aiApi = {
console.error('获取会话列表失败:', error);
return { success: false, conversations: [] };
}
}
},
};

View File

@@ -0,0 +1,446 @@
/**
* PDF 转换页面
* 支持将 Word、Excel、Txt、Markdown 格式转换为 PDF
*/
import React, { useState, useCallback } from 'react';
import { useDropzone } from 'react-dropzone';
import {
FileText,
Upload,
Download,
FileSpreadsheet,
File as FileIcon,
Loader2,
CheckCircle,
AlertCircle,
Trash2,
FileDown,
X,
Copy
} from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Label } from '@/components/ui/label';
import { toast } from 'sonner';
import { cn } from '@/lib/utils';
import { backendApi } from '@/db/backend-api';
type FileState = {
file: File;
status: 'pending' | 'converting' | 'success' | 'failed';
progress: number;
pdfBlob?: Blob;
error?: string;
};
const SUPPORTED_FORMATS = [
{ ext: 'docx', name: 'Word 文档', icon: FileText, color: 'blue' },
{ ext: 'xlsx', name: 'Excel 表格', icon: FileSpreadsheet, color: 'emerald' },
{ ext: 'txt', name: '文本文件', icon: FileIcon, color: 'gray' },
{ ext: 'md', name: 'Markdown', icon: FileText, color: 'purple' },
];
const PdfConverter: React.FC = () => {
const [files, setFiles] = useState<FileState[]>([]);
const [converting, setConverting] = useState(false);
const [convertedCount, setConvertedCount] = useState(0);
const onDrop = useCallback((acceptedFiles: File[]) => {
const newFiles: FileState[] = acceptedFiles.map(file => ({
file,
status: 'pending',
progress: 0,
}));
setFiles(prev => [...prev, ...newFiles]);
}, []);
const { getRootProps, getInputProps, isDragActive } = useDropzone({
onDrop,
accept: {
'application/vnd.openxmlformats-officedocument.wordprocessingml.document': ['.docx'],
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': ['.xlsx'],
'application/vnd.ms-excel': ['.xls'],
'text/markdown': ['.md'],
'text/plain': ['.txt'],
},
multiple: true,
});
const handleConvert = async () => {
if (files.length === 0) {
toast.error('请先上传文件');
return;
}
setConverting(true);
setConvertedCount(0);
const pendingFiles = files.filter(f => f.status === 'pending' || f.status === 'failed');
let successCount = 0;
for (let i = 0; i < pendingFiles.length; i++) {
const fileState = pendingFiles[i];
const fileIndex = files.findIndex(f => f.file === fileState.file);
// 更新状态为转换中
setFiles(prev => prev.map((f, idx) =>
idx === fileIndex ? { ...f, status: 'converting', progress: 10 } : f
));
try {
// 获取 PDF blob
const pdfBlob = await backendApi.convertToPdf(fileState.file);
// 触发下载
const url = URL.createObjectURL(pdfBlob);
const a = document.createElement('a');
a.href = url;
a.download = `${fileState.file.name.replace(/\.[^.]+$/, '')}.pdf`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
// 保存 blob 以便批量下载
setFiles(prev => prev.map((f, idx) =>
idx === fileIndex ? { ...f, status: 'success', progress: 100, pdfBlob } : f
));
successCount++;
setConvertedCount(successCount);
toast.success(`${fileState.file.name} 下载已开始`);
} catch (error: any) {
setFiles(prev => prev.map((f, idx) =>
idx === fileIndex ? { ...f, status: 'failed', error: error.message || '转换失败' } : f
));
}
}
setConverting(false);
toast.success(`转换完成:${successCount}/${pendingFiles.length} 个文件`);
};
const handleDownload = (fileState: FileState) => {
if (!fileState.pdfBlob) return;
const url = URL.createObjectURL(fileState.pdfBlob);
const link = document.createElement('a');
link.href = url;
link.download = `${fileState.file.name.replace(/\.[^.]+$/, '')}.pdf`;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(url);
};
const handleDownloadAll = async () => {
const successFiles = files.filter(f => f.status === 'success' && f.pdfBlob);
if (successFiles.length === 0) {
toast.error('没有可下载的文件');
return;
}
if (successFiles.length === 1) {
handleDownload(successFiles[0]);
return;
}
// 多个文件,下载 ZIP
try {
const zipBlob = await backendApi.batchConvertToPdf(
successFiles.map(f => f.file)
);
const url = URL.createObjectURL(zipBlob);
const link = document.createElement('a');
link.href = url;
link.download = 'converted_pdfs.zip';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(url);
toast.success('ZIP 下载开始');
} catch (error: any) {
toast.error(error.message || '下载失败');
}
};
const handleRemove = (index: number) => {
setFiles(prev => prev.filter((_, i) => i !== index));
};
const handleClear = () => {
setFiles([]);
setConvertedCount(0);
};
const getFileIcon = (filename: string) => {
const ext = filename.split('.').pop()?.toLowerCase();
const format = SUPPORTED_FORMATS.find(f => f.ext === ext);
if (!format) return FileIcon;
return format.icon;
};
const getFileColor = (filename: string) => {
const ext = filename.split('.').pop()?.toLowerCase();
const format = SUPPORTED_FORMATS.find(f => f.ext === ext);
return format?.color || 'gray';
};
const colorClasses: Record<string, string> = {
blue: 'bg-blue-500/10 text-blue-500',
emerald: 'bg-emerald-500/10 text-emerald-500',
purple: 'bg-purple-500/10 text-purple-500',
gray: 'bg-gray-500/10 text-gray-500',
};
return (
<div className="space-y-8 pb-10">
<section className="flex flex-col md:flex-row md:items-center justify-between gap-4">
<div className="space-y-1">
<h1 className="text-3xl font-extrabold tracking-tight"> PDF</h1>
<p className="text-muted-foreground"> WordExcelMarkdown PDF </p>
</div>
{files.length > 0 && (
<div className="flex gap-2">
<Button variant="outline" onClick={handleClear}>
<Trash2 size={18} className="mr-2" />
</Button>
<Button onClick={handleDownloadAll} disabled={files.filter(f => f.status === 'success').length === 0}>
<Download size={18} className="mr-2" />
({files.filter(f => f.status === 'success').length})
</Button>
</div>
)}
</section>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
{/* 左侧:上传区域 */}
<div className="lg:col-span-1 space-y-6">
{/* 上传卡片 */}
<Card className="border-none shadow-md">
<CardHeader className="pb-4">
<CardTitle className="flex items-center gap-2">
<Upload className="text-primary" size={20} />
</CardTitle>
<CardDescription></CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<div
{...getRootProps()}
className={cn(
"border-2 border-dashed rounded-2xl p-8 transition-all duration-300 flex flex-col items-center justify-center text-center cursor-pointer group",
isDragActive ? "border-primary bg-primary/5" : "border-muted-foreground/20 hover:border-primary/50 hover:bg-primary/5",
converting && "opacity-50 pointer-events-none"
)}
>
<input {...getInputProps()} />
<div className="w-14 h-14 rounded-xl bg-primary/10 text-primary flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
{converting ? <Loader2 className="animate-spin" size={28} /> : <Upload size={28} />}
</div>
<p className="font-semibold text-sm">
{isDragActive ? '释放以开始上传' : '点击或拖拽文件到这里'}
</p>
<div className="mt-4 flex flex-wrap justify-center gap-2">
{SUPPORTED_FORMATS.map(format => (
<Badge key={format.ext} variant="outline" className={cn("text-xs", colorClasses[format.color])}>
{format.name}
</Badge>
))}
</div>
</div>
{/* 转换按钮 */}
{files.length > 0 && (
<Button
onClick={handleConvert}
disabled={converting || files.filter(f => f.status === 'pending' || f.status === 'failed').length === 0}
className="w-full bg-gradient-to-r from-primary to-purple-600 hover:from-primary/90 hover:to-purple-600/90"
>
{converting ? (
<>
<Loader2 className="mr-2 animate-spin" size={16} />
... ({convertedCount}/{files.filter(f => f.status === 'pending' || f.status === 'failed').length})
</>
) : (
<>
<FileDown className="mr-2" size={16} />
({files.filter(f => f.status === 'pending' || f.status === 'failed').length})
</>
)}
</Button>
)}
</CardContent>
</Card>
{/* 格式说明 */}
<Card className="border-none shadow-md">
<CardHeader className="pb-4">
<CardTitle className="flex items-center gap-2">
<FileText className="text-primary" size={20} />
</CardTitle>
</CardHeader>
<CardContent>
<div className="space-y-3">
{SUPPORTED_FORMATS.map(format => {
const Icon = format.icon;
return (
<div key={format.ext} className="flex items-center gap-3 p-2 rounded-lg hover:bg-muted/30 transition-colors">
<div className={cn("w-8 h-8 rounded flex items-center justify-center", colorClasses[format.color])}>
<Icon size={16} />
</div>
<div className="flex-1">
<p className="text-sm font-medium">.{format.ext.toUpperCase()}</p>
<p className="text-xs text-muted-foreground">{format.name}</p>
</div>
</div>
);
})}
</div>
</CardContent>
</Card>
</div>
{/* 右侧:文件列表 */}
<div className="lg:col-span-2 space-y-6">
<Card className="border-none shadow-md">
<CardHeader>
<div className="flex items-center justify-between">
<div className="space-y-1">
<CardTitle className="flex items-center gap-2">
<FileIcon className="text-primary" size={20} />
</CardTitle>
<CardDescription>
{files.length} {files.filter(f => f.status === 'success').length}
</CardDescription>
</div>
</div>
</CardHeader>
<CardContent>
{files.length === 0 ? (
<div className="text-center py-12 text-muted-foreground">
<FileIcon size={48} className="mx-auto mb-4 opacity-30" />
<p></p>
</div>
) : (
<div className="space-y-3">
{files.map((fileState, index) => {
const Icon = getFileIcon(fileState.file.name);
const color = getFileColor(fileState.file.name);
return (
<div
key={index}
className="flex items-center gap-4 p-4 rounded-xl border bg-card hover:bg-muted/30 transition-colors"
>
<div className={cn("w-10 h-10 rounded-lg flex items-center justify-center shrink-0", colorClasses[color])}>
<Icon size={20} />
</div>
<div className="flex-1 min-w-0">
<p className="font-semibold truncate">{fileState.file.name}</p>
<div className="flex items-center gap-2">
<span className="text-xs text-muted-foreground">
{(fileState.file.size / 1024).toFixed(1)} KB
</span>
{fileState.status === 'pending' && (
<Badge variant="secondary" className="text-xs"></Badge>
)}
{fileState.status === 'converting' && (
<Badge variant="default" className="text-xs bg-blue-500"></Badge>
)}
{fileState.status === 'success' && (
<Badge variant="default" className="text-xs bg-emerald-500"></Badge>
)}
{fileState.status === 'failed' && (
<Badge variant="destructive" className="text-xs"></Badge>
)}
</div>
{fileState.status === 'converting' && (
<div className="mt-1 h-1 bg-muted rounded-full overflow-hidden">
<div
className="h-full bg-primary transition-all duration-300"
style={{ width: `${fileState.progress}%` }}
/>
</div>
)}
{fileState.error && (
<p className="text-xs text-destructive mt-1">{fileState.error}</p>
)}
</div>
<div className="flex items-center gap-2 shrink-0">
{fileState.status === 'success' && (
<>
<Button variant="ghost" size="icon" onClick={() => handleDownload(fileState)}>
<Download size={18} className="text-emerald-500" />
</Button>
<Button
variant="ghost"
size="icon"
onClick={() => {
// 复制下载链接到剪贴板
if (fileState.pdfBlob) {
const url = URL.createObjectURL(fileState.pdfBlob);
navigator.clipboard.writeText(url);
toast.success('链接已复制');
}
}}
>
<Copy size={18} />
</Button>
</>
)}
{(fileState.status === 'pending' || fileState.status === 'failed') && (
<Button
variant="ghost"
size="icon"
onClick={() => handleRemove(index)}
className="text-destructive hover:bg-destructive/10"
>
<X size={18} />
</Button>
)}
</div>
</div>
);
})}
</div>
)}
</CardContent>
</Card>
{/* 使用说明 */}
<Card className="border-none shadow-md bg-gradient-to-br from-primary/5 to-purple-500/5">
<CardHeader className="pb-4">
<CardTitle className="flex items-center gap-2">
<FileText className="text-primary" size={20} />
使
</CardTitle>
</CardHeader>
<CardContent>
<div className="space-y-3 text-sm text-muted-foreground">
<div className="flex gap-3">
<div className="w-6 h-6 rounded-full bg-primary/10 text-primary flex items-center justify-center shrink-0 text-xs font-bold">1</div>
<p> Word(.docx)Excel(.xlsx)(.txt)Markdown(.md) </p>
</div>
<div className="flex gap-3">
<div className="w-6 h-6 rounded-full bg-primary/10 text-primary flex items-center justify-center shrink-0 text-xs font-bold">2</div>
<p> PDF </p>
</div>
<div className="flex gap-3">
<div className="w-6 h-6 rounded-full bg-primary/10 text-primary flex items-center justify-center shrink-0 text-xs font-bold">3</div>
<p> PDF 使</p>
</div>
</div>
</CardContent>
</Card>
</div>
</div>
</div>
);
};
export default PdfConverter;

View File

@@ -4,6 +4,7 @@ import Documents from '@/pages/Documents';
import TemplateFill from '@/pages/TemplateFill';
import InstructionChat from '@/pages/InstructionChat';
import TaskHistory from '@/pages/TaskHistory';
import PdfConverter from '@/pages/PdfConverter';
import MainLayout from '@/components/layouts/MainLayout';
export const routes = [
@@ -31,6 +32,10 @@ export const routes = [
path: '/task-history',
element: <TaskHistory />,
},
{
path: '/pdf-converter',
element: <PdfConverter />,
},
],
},
{

View File

@@ -23,7 +23,6 @@
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true,
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
},