cloud-web-corejs 1.0.54-dev.552 → 1.0.54-dev.554

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "cloud-web-corejs",
   "private": false,
-  "version": "1.0.54-dev.552",
+  "version": "1.0.54-dev.554",
   "scripts": {
     "dev": "vue-cli-service serve",
     "lint": "eslint --ext .js,.vue src",

package/src/components/luckysheet/README.md

@@ -2,32 +2,104 @@
 
 ## 主要改进内容
 
-### 1. 列宽处理优化
-- ✅ **自动列宽设置**: 根据原始数据的列宽配置自动设置Excel列宽
-- ✅ **默认列宽**: 当无配置时提供合理的默认列宽(15个字符宽度)
-- ✅ **宽度范围限制**: 列宽限制在8-100个字符范围内，避免过窄或过宽
+### 1. **列宽处理优化**
+- 添加了 `setColumnWidths` 函数，能够根据原始数据的列宽配置自动设置Excel列宽
+- 提供了合理的默认列宽(15个字符宽度)
+- 设置了列宽范围限制(8-100个字符)，避免显示异常
 
-### 2. 样式处理增强
-- ✅ **字体映射优化**: 改进了中文字体到Excel字体的映射
+### 2. **样式处理增强**
+- **字体映射优化**: 改进了中文字体到Excel字体的标准映射
   - 微软雅黑 → Microsoft YaHei
-  - 宋体 → SimSun
+  - 宋体 → SimSun  
   - 黑体 → SimHei
   - 楷体 → KaiTi
   - 仿宋 → FangSong
-- ✅ **颜色处理**: 支持RGBA颜色格式，正确处理透明度
-- ✅ **字体大小限制**: 限制在8-72pt范围内
-- ✅ **数字格式支持**: 添加了完整的数字格式转换支持
-
-### 3. 工作表属性完善
-- ✅ **工作簿元数据**: 添加创建者、修改时间等信息
-- ✅ **工作表属性**: 设置默认行高、标签颜色等
-- ✅ **页面设置**: 配置A4纸张、纵向布局等打印属性
-- ✅ **MIME类型优化**: 使用标准的Excel MIME类型
-
-### 4. 性能和稳定性提升
-- ✅ **错误处理**: 添加了完善的错误处理机制
-- ✅ **内存管理**: 正确释放URL对象避免内存泄漏
-- ✅ **异步处理**: 使用Promise处理异步操作
+- **颜色处理**: 完善了RGBA颜色格式支持，正确处理透明度
+- **字体大小**: 添加了8-72pt的范围限制
+- **数字格式**: 新增完整的数字格式转换支持
+
+### 3. **工作表属性完善**
+- 添加了工作簿元数据(创建者、修改时间等)
+- 设置了工作表属性(默认行高、标签颜色)
+- 配置了页面设置(A4纸张、纵向布局)
+- 使用了标准的Excel MIME类型
+
+### 4. **新增功能**
+- `setRowHeights`: 行高设置功能
+- `convertNumberFormat`: 数字格式转换
+- 更好的错误处理机制
+- 内存管理优化
+
+### 5. **Base64文件转换功能** ⭐ **新增**
+- **File转Base64**: `fileToBase64(file)` - 将File对象转换为Base64数据URL
+- **Base64转File**: `base64ToFile(base64, filename, mimeType)` - 将Base64数据转换回File对象
+- **Base64转Blob**: `base64ToBlob(base64, mimeType)` - 将Base64数据转换为Blob对象
+- **直接下载**: `downloadBase64File(base64, filename, mimeType)` - 直接下载Base64数据为文件
+- **MIME类型常量**: 提供常用的文件MIME类型映射
+
+### 6. **API接口保持兼容**
+- 保留了原有的三个主要导出函数
+- 添加了使用示例和详细文档
+- 提供了多种使用场景的支持
+
+## Base64转换功能使用说明
+
+### 基本用法
+
+```javascript
+import { 
+  fileToBase64, 
+  base64ToFile, 
+  base64ToBlob, 
+  downloadBase64File,
+  MIME_TYPES 
+} from './fileUtils.js';
+
+// File转Base64
+const base64 = await fileToBase64(file);
+
+// Base64转File
+const file = base64ToFile(base64, 'filename.xlsx', MIME_TYPES.EXCEL);
+
+// Base64转Blob
+const blob = base64ToBlob(base64, MIME_TYPES.EXCEL);
+
+// 直接下载
+downloadBase64File(base64, 'download.xlsx', MIME_TYPES.EXCEL);
+```
+
+### 在对话框中的应用
+
+对话框组件现在会在提交时自动进行双向转换：
+- 原始File对象 → Base64字符串
+- Base64字符串 → 转换后的File对象
+- 返回的数据包含：`file`、`base64`、`convertedFile` 三个版本
+
+### 支持的文件类型
+
+```javascript
+const MIME_TYPES = {
+  EXCEL: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+  PDF: 'application/pdf',
+  WORD: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+  IMAGE_JPEG: 'image/jpeg',
+  IMAGE_PNG: 'image/png',
+  IMAGE_GIF: 'image/gif',
+  TEXT: 'text/plain',
+  JSON: 'application/json'
+};
+```
+
+## 使用示例
+
+详细使用示例请参考 [fileConversionExample.js](./fileConversionExample.js) 文件。
+
+## 注意事项
+
+1. Base64转换会增加约33%的数据大小
+2. 大文件转换时注意内存使用
+3. 转换过程中会进行错误处理，失败时返回null
+4. 文件名和MIME类型参数可以根据实际需求自定义
 
 ## API 接口说明
 

package/src/components/luckysheet/colorTest.js

@@ -0,0 +1,54 @@
+import { exportExcel } from './export.js'
+
+// 测试数据 - 包含rgb()格式的颜色
+const testData = [{
+  name: '颜色测试工作表',
+  data: [
+    // 测试rgb()背景色
+    [{
+      v: '正确的候选人',
+      bg: 'rgb(106, 168, 79)',  // 绿色背景
+      fc: 'rgb(0, 0, 0)',       // 黑色字体
+      bl: 1,
+      ff: 5,
+      fs: 11
+    }],
+    // 测试rgb()背景色
+    [{
+      v: '当前的候选人',
+      bg: 'rgb(255, 255, 0)',   // 黄色背景
+      fc: 'rgb(0, 0, 0)',       // 黑色字体
+      bl: 1,
+      ff: 5,
+      fs: 11
+    }],
+    // 测试十六进制颜色
+    [{
+      v: '十六进制测试',
+      bg: '#ff9900',            // 橙色背景
+      fc: '#ffffff',            // 白色字体
+      bl: 1,
+      ff: 5,
+      fs: 11
+    }]
+  ],
+  config: {
+    columnlen: {0: 200},
+    rowlen: {0: 25, 1: 25, 2: 25}
+  }
+}]
+
+// 测试函数
+export async function testColorExport() {
+  try {
+    console.log('开始测试颜色导出...')
+    await exportExcel(testData, 'color-test')
+    console.log('颜色测试导出完成！')
+    return true
+  } catch (error) {
+    console.error('颜色测试导出失败:', error)
+    return false
+  }
+}
+
+export default { testColorExport }

package/src/components/luckysheet/dialog.vue

@@ -27,12 +27,18 @@
         <i class="el-icon-check el-icon"></i>
         {{ $t2("确 定", "system.button.confirm2") }}
       </el-button>
+      <!-- <el-button type="primary" @click="testBase64Download" class="button-sty">
+        <i class="el-icon-check el-icon"></i>
+        {{ $t1("测试base64下载") }}
+      </el-button> -->
     </span>
   </el-dialog>
 </template>
 
 <script>
 import luckysheet from "./view.vue";
+import { fileToBase64, base64ToFile } from "./fileUtils.js";
+import { saveAs } from "file-saver";
 
 export default {
   name: "luckysheetDialog",
@@ -84,39 +90,44 @@ export default {
       let luckysheetRef = this.$refs.luckysheet;
       let value = luckysheetRef.getValue();
       luckysheetRef.generateExcelFile((file) => {
-        this.fileToBase64Async(file).then((base64) => {
-          let response = {
-            data: JSON.stringify(value),
-            json: value,
-            file: file,
-            base64: base64,
-          };
-          let onConfirm = this.options.onConfirm;
-          if (onConfirm && typeof onConfirm === "function") {
-            let result = onConfirm(response, this.close);
-            if (result !== false) {
+        fileToBase64(file)
+          .then((base64) => {
+            let response = {
+              data: JSON.stringify(value),
+              json: value,
+              file: file,
+              base64: base64,
+              // convertedFile: convertedFile  // 添加转换后的file对象
+            };
+            let onConfirm = this.options.onConfirm;
+            if (onConfirm && typeof onConfirm === "function") {
+              let result = onConfirm(response, this.close);
+              if (result !== false) {
+                this.close();
+              }
+            } else {
               this.close();
             }
-          } else {
-            this.close();
-          }
-        });
+          })
+          .catch((error) => {
+            console.error("文件转换失败:", error);
+            this.$message.error("文件处理失败");
+          });
       });
     },
     /**
-     * file 转Base64 DataURL
-     * @param {File} file
-     * @returns
+     * 保留原有的fileToBase64Async方法以保持向后兼容
      */
     fileToBase64Async(file) {
-      return new Promise((resolve, reject) => {
-        let reader = new FileReader();
-        reader.readAsDataURL(file);
-        reader.onload = (e) => {
-          resolve(e.target.result);
-        };
-      });
-    },
+      return fileToBase64(file);
+    } /* ,
+    testBase64Download() {
+      let base64 = this.options.base64;
+      const fileName = `电子表格_${new Date().getTime()}.xlsx`;
+      const convertedFile = base64ToFile(base64, fileName);
+
+      saveAs(convertedFile, fileName);
+    }, */,
   },
 };
 </script>

package/src/components/luckysheet/export.js

@@ -312,22 +312,39 @@ var fillConvert = function(bg) {
     return {}
   }
   
-  // 处理透明度
-  let bgColor = bg.replace('#', '')
+  // 处理不同的颜色格式
+  let bgColor = bg;
+  
+  // 处理rgb()格式的颜色
+  if (bg.startsWith('rgb(')) {
+    const rgbMatch = bg.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
+    if (rgbMatch) {
+      const r = parseInt(rgbMatch[1]).toString(16).padStart(2, '0');
+      const g = parseInt(rgbMatch[2]).toString(16).padStart(2, '0');
+      const b = parseInt(rgbMatch[3]).toString(16).padStart(2, '0');
+      bgColor = `#${r}${g}${b}`;
+    }
+  }
+  
+  // 处理十六进制颜色格式
+  bgColor = bgColor.replace('#', '');
   if (bgColor.length === 8) {
     // 包含alpha通道，转换为ARGB
-    const alpha = bgColor.substring(0, 2)
-    const rgb = bgColor.substring(2)
-    bgColor = alpha + rgb
+    const alpha = bgColor.substring(0, 2);
+    const rgb = bgColor.substring(2);
+    bgColor = alpha + rgb;
   } else if (bgColor.length === 6) {
     // RGB格式，添加不透明的alpha通道
-    bgColor = 'FF' + bgColor
+    bgColor = 'FF' + bgColor;
+  } else if (bgColor.length === 3) {
+    // 简写格式 #RGB -> #RRGGBB
+    bgColor = 'FF' + bgColor.split('').map(c => c + c).join('');
   }
   
   let fill = {
     type: 'pattern',
     pattern: 'solid',
-    fgColor: { argb: bgColor }
+    fgColor: { argb: bgColor.toUpperCase() }
   }
   return fill
 }
@@ -361,23 +378,38 @@ var fontConvert = function(
     }
   }
   
-  // 处理字体颜色
-  let fontColor = fc.replace('#', '')
+  // 处理字体颜色，支持rgb()格式
+  let fontColor = fc || '#000000';
+  if (fontColor.startsWith('rgb(')) {
+    const rgbMatch = fontColor.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
+    if (rgbMatch) {
+      const r = parseInt(rgbMatch[1]).toString(16).padStart(2, '0');
+      const g = parseInt(rgbMatch[2]).toString(16).padStart(2, '0');
+      const b = parseInt(rgbMatch[3]).toString(16).padStart(2, '0');
+      fontColor = `#${r}${g}${b}`;
+    }
+  }
+  
+  // 处理十六进制颜色格式
+  fontColor = fontColor.replace('#', '');
   if (fontColor.length === 8) {
     // 包含alpha通道
-    const alpha = fontColor.substring(0, 2)
-    const rgb = fontColor.substring(2)
-    fontColor = alpha + rgb
+    const alpha = fontColor.substring(0, 2);
+    const rgb = fontColor.substring(2);
+    fontColor = alpha + rgb;
   } else if (fontColor.length === 6) {
     // RGB格式
-    fontColor = 'FF' + fontColor
+    fontColor = 'FF' + fontColor;
+  } else if (fontColor.length === 3) {
+    // 简写格式 #RGB -> #RRGGBB
+    fontColor = 'FF' + fontColor.split('').map(c => c + c).join('');
   }
 
   let font = {
     name: typeof ff === 'number' ? luckyToExcel[ff] : ff,
     family: 2, // 修改为更通用的字体族
     size: Math.max(8, Math.min(72, fs)), // 限制字体大小范围
-    color: { argb: fontColor },
+    color: { argb: fontColor.toUpperCase() },
     bold: luckyToExcel.num2bl(bl),
     italic: luckyToExcel.num2bl(it),
     underline: luckyToExcel.num2bl(ul),

package/src/components/luckysheet/fileConversionExample.js

@@ -0,0 +1,127 @@
+/**
+ * Base64和File转换功能使用示例
+ */
+
+import { 
+  fileToBase64, 
+  base64ToFile, 
+  base64ToBlob, 
+  downloadBase64File,
+  MIME_TYPES 
+} from './fileUtils.js';
+
+// 示例1: File转Base64
+async function exampleFileToBase64() {
+  try {
+    // 假设有一个File对象
+    const fileInput = document.querySelector('input[type="file"]');
+    const file = fileInput.files[0];
+    
+    if (file) {
+      const base64 = await fileToBase64(file);
+      console.log('转换后的Base64:', base64);
+      return base64;
+    }
+  } catch (error) {
+    console.error('File转Base64失败:', error);
+  }
+}
+
+// 示例2: Base64转File
+function exampleBase64ToFile(base64String) {
+  try {
+    // 将Base64转换回File对象
+    const file = base64ToFile(
+      base64String, 
+      'example.xlsx', 
+      MIME_TYPES.EXCEL
+    );
+    
+    if (file) {
+      console.log('转换后的File对象:', file);
+      console.log('文件名:', file.name);
+      console.log('文件大小:', file.size);
+      console.log('文件类型:', file.type);
+      return file;
+    }
+  } catch (error) {
+    console.error('Base64转File失败:', error);
+  }
+}
+
+// 示例3: Base64转Blob
+function exampleBase64ToBlob(base64String) {
+  try {
+    const blob = base64ToBlob(base64String, MIME_TYPES.EXCEL);
+    if (blob) {
+      console.log('转换后的Blob对象:', blob);
+      return blob;
+    }
+  } catch (error) {
+    console.error('Base64转Blob失败:', error);
+  }
+}
+
+// 示例4: 直接下载Base64文件
+function exampleDownloadBase64File(base64String) {
+  try {
+    downloadBase64File(
+      base64String,
+      'downloaded-file.xlsx',
+      MIME_TYPES.EXCEL
+    );
+    console.log('文件开始下载...');
+  } catch (error) {
+    console.error('下载失败:', error);
+  }
+}
+
+// 示例5: 在Luckysheet对话框中的实际应用
+function exampleInDialogUsage() {
+  // 模拟对话框提交时的数据处理
+  const mockResponse = {
+    data: '{"sheet1":[[{"v":"测试数据"}]]}',
+    json: [{ sheet1: [[{ v: "测试数据" }]] }],
+    file: new File([], 'test.xlsx'), // 模拟的原始File对象
+    base64: 'data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,UEsDBAoAAAAAALJ...' // 模拟的Base64数据
+  };
+  
+  // 进行双向转换验证
+  const convertedFile = base64ToFile(mockResponse.base64, 'converted.xlsx');
+  const reConvertedBase64 = fileToBase64(convertedFile);
+  
+  console.log('原始File:', mockResponse.file);
+  console.log('转换后的File:', convertedFile);
+  console.log('重新转换的Base64:', reConvertedBase64);
+  
+  return {
+    original: mockResponse,
+    converted: convertedFile,
+    reconverted: reConvertedBase64
+  };
+}
+
+// 导出所有示例函数
+export {
+  exampleFileToBase64,
+  exampleBase64ToFile,
+  exampleBase64ToBlob,
+  exampleDownloadBase64File,
+  exampleInDialogUsage
+};
+
+// 默认导出
+export default {
+  fileToBase64,
+  base64ToFile,
+  base64ToBlob,
+  downloadBase64File,
+  MIME_TYPES,
+  examples: {
+    fileToBase64: exampleFileToBase64,
+    base64ToFile: exampleBase64ToFile,
+    base64ToBlob: exampleBase64ToBlob,
+    downloadBase64File: exampleDownloadBase64File,
+    inDialogUsage: exampleInDialogUsage
+  }
+};

package/src/components/luckysheet/fileUtils.js

@@ -0,0 +1,147 @@
+/**
+ * 文件转换工具类
+ * 提供常用的文件格式转换功能
+ */
+
+/**
+ * File对象转Base64 DataURL
+ * @param {File|Blob} file 文件对象
+ * @returns {Promise<string>} 返回Base64字符串的Promise
+ */
+export function fileToBase64(file) {
+  return new Promise((resolve, reject) => {
+    if (!file) {
+      reject(new Error('文件对象不能为空'));
+      return;
+    }
+    
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      resolve(e.target.result);
+    };
+    reader.onerror = (error) => {
+      reject(error);
+    };
+    reader.readAsDataURL(file);
+  });
+}
+
+/**
+ * Base64 DataURL转File对象
+ * @param {string} base64 Base64数据URL字符串
+ * @param {string} filename 文件名
+ * @param {string} mimeType 文件MIME类型，默认为Excel类型
+ * @returns {File|null} 返回File对象，失败时返回null
+ */
+export function base64ToFile(base64, filename, mimeType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
+  try {
+    if (!base64 || !filename) {
+      console.warn('Base64或文件名不能为空');
+      return null;
+    }
+    
+    // 移除Base64数据URL的前缀，获取纯Base64数据
+    const base64Data = base64.replace(/^data:.*?;base64,/, '');
+    
+    // 将base64转换为二进制数组
+    const byteCharacters = atob(base64Data);
+    const byteNumbers = new Array(byteCharacters.length);
+    
+    for (let i = 0; i < byteCharacters.length; i++) {
+      byteNumbers[i] = byteCharacters.charCodeAt(i);
+    }
+    
+    const byteArray = new Uint8Array(byteNumbers);
+    
+    // 创建Blob对象
+    const blob = new Blob([byteArray], { type: mimeType });
+    
+    // 创建File对象
+    const file = new File([blob], filename, { 
+      type: mimeType,
+      lastModified: Date.now()
+    });
+    
+    return file;
+  } catch (error) {
+    console.error('Base64转File失败:', error);
+    return null;
+  }
+}
+
+/**
+ * Base64转Blob对象
+ * @param {string} base64 Base64数据URL字符串
+ * @param {string} mimeType 文件MIME类型
+ * @returns {Blob|null} 返回Blob对象，失败时返回null
+ */
+export function base64ToBlob(base64, mimeType = 'application/octet-stream') {
+  try {
+    if (!base64) {
+      console.warn('Base64不能为空');
+      return null;
+    }
+    
+    const base64Data = base64.replace(/^data:.*?;base64,/, '');
+    const byteCharacters = atob(base64Data);
+    const byteNumbers = new Array(byteCharacters.length);
+    
+    for (let i = 0; i < byteCharacters.length; i++) {
+      byteNumbers[i] = byteCharacters.charCodeAt(i);
+    }
+    
+    const byteArray = new Uint8Array(byteNumbers);
+    const blob = new Blob([byteArray], { type: mimeType });
+    
+    return blob;
+  } catch (error) {
+    console.error('Base64转Blob失败:', error);
+    return null;
+  }
+}
+
+/**
+ * 下载Base64数据为文件
+ * @param {string} base64 Base64数据URL
+ * @param {string} filename 下载的文件名
+ * @param {string} mimeType 文件MIME类型
+ */
+export function downloadBase64File(base64, filename, mimeType) {
+  try {
+    const file = base64ToFile(base64, filename, mimeType);
+    if (file) {
+      const url = URL.createObjectURL(file);
+      const link = document.createElement('a');
+      link.href = url;
+      link.download = filename;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      URL.revokeObjectURL(url);
+    }
+  } catch (error) {
+    console.error('下载Base64文件失败:', error);
+  }
+}
+
+/**
+ * 常用文件MIME类型映射
+ */
+export const MIME_TYPES = {
+  EXCEL: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+  PDF: 'application/pdf',
+  WORD: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+  IMAGE_JPEG: 'image/jpeg',
+  IMAGE_PNG: 'image/png',
+  IMAGE_GIF: 'image/gif',
+  TEXT: 'text/plain',
+  JSON: 'application/json'
+};
+
+export default {
+  fileToBase64,
+  base64ToFile,
+  base64ToBlob,
+  downloadBase64File,
+  MIME_TYPES
+};

package/src/components/luckysheet/view.vue

@@ -160,8 +160,8 @@ export default {
 
               // 这里可以使用file对象进行上传等操作
               // 例如：uploadFile(file);
-              const fileName = `电子表格_${new Date().getTime()}.xlsx`;
-              saveAs(file, fileName);
+              // const fileName = `电子表格_${new Date().getTime()}.xlsx`;
+              // saveAs(file, fileName);
             })
             .catch((error) => {
               console.error("生成Excel文件对象失败:", error);