Browse Source

✨ feat(word-preview): 添加处理结果预览功能

- 添加处理结果预览卡片,展示第一个生成的文档
- 移除fileToBase64辅助函数,直接使用File对象处理图片

♻️ refactor(word-preview): 优化图片处理逻辑

- 简化图片处理流程,移除base64转换步骤
- 更新错误提示文本,从"转换图片失败"改为"处理图片失败"
yourname 4 months ago
parent
commit
d7424afdfd
1 changed files with 21 additions and 14 deletions
  1. 21 14
      src/client/admin-shadcn/pages/WordPreview.tsx

+ 21 - 14
src/client/admin-shadcn/pages/WordPreview.tsx

@@ -222,16 +222,6 @@ export default function WordPreview() {
     return mimeTypes[extension || ''] || 'image/jpeg';
   };
 
-  // File转Base64的辅助函数
-  const fileToBase64 = (file: File): Promise<string> => {
-    return new Promise((resolve, reject) => {
-      const reader = new FileReader();
-      reader.onload = () => resolve(reader.result as string);
-      reader.onerror = reject;
-      reader.readAsDataURL(file);
-    });
-  };
-
   // 替换Word字段并插入图片
   const replaceFieldsInWord = async (wordFile: File, excelRow: ExcelRow, rowIndex: number): Promise<Blob> => {
     try {
@@ -263,19 +253,18 @@ export default function WordPreview() {
         }
       });
 
-      // 处理图片字段 - 修复为base64格式
+      // 处理图片字段
       const folderIndex = (rowIndex + 1).toString();
       if (imageMappings[folderIndex]) {
         for (const [imageName, imageFile] of Object.entries(imageMappings[folderIndex])) {
           try {
-            const base64Data = await fileToBase64(imageFile);
             processedData[`image:${imageName}`] = {
-              data: base64Data,
+              data: imageFile,
               width: 200,
               height: 150
             };
           } catch (error) {
-            console.error(`转换图片失败: ${imageName}`, error);
+            console.error(`处理图片失败: ${imageName}`, error);
           }
         }
       }
@@ -691,6 +680,24 @@ export default function WordPreview() {
         </Card>
       )}
 
+      {/* 处理结果预览 */}
+      {processingResult && processingResult.generatedFiles.length > 0 && (
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <FileText className="h-5 w-5" />
+              处理结果预览
+            </CardTitle>
+            <CardDescription>
+              预览第一个生成的文档
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <WordViewer file={processingResult.generatedFiles[0].content} />
+          </CardContent>
+        </Card>
+      )}
+
       {/* 数据预览 */}
       {excelData.length > 0 && (
         <Card>