文件上传单元格

SpreadJS 提供文件上传单元格类型的功能

SpreadJS 提供文件上传单元格类型，允许上传任何文件或图片。对于图片上传，它接受 .jpg, .jpeg, .png, .gif, .bmp, .svg, .ico, .webp 格式。SpreadJS 将这些上传的文件存储为对象。

默认情况下，文件上传单元格类型会显示默认的上传按钮。然而，在上传图片后，它会显示图片的缩略图；在上传其他文件时，它会显示与文件扩展名相关的文件图标及文件名。

一旦在文件上传单元格类型中上传了文件或图片，当鼠标悬停在单元格上时，会出现一个蒙层，提示必须先删除现有文件才能上传新文件。

以下图片展示了第一列作为文件上传单元格类型，并上传了一名学生的照片。

参考以下代码示例来设置文件上传单元格类型

// 设置 FileUpload 单元格类型
const fileUpload = new GC.Spread.Sheets.CellTypes.FileUpload();
for (var i = 1; i < 7; i++)
    activeSheet.getCell(i, 0).cellType(fileUpload);

可以通过使用 FileUpload 类的 maxSize 和 accept 方法来指定最大文件大小和类型（格式）限制。如果上传的文件超过最大文件大小，会触发 invalidOperation 事件。

参考以下代码示例来设置文件的最大大小和文件类型。

// 设置文件的最大大小和文件类型限制
fileUpload.maxSize(3072);
fileUpload.accept('image/png, image/jpeg');

// 使用 invalidOperation 事件，如果上传的文件超过最大文件大小
spread.bind(GC.Spread.Sheets.Events.InvalidOperation, (e, args) => {
    if (args.invalidType === GC.Spread.Sheets.InvalidOperationType.sizeLimitExceeded) {
        alert(args.message);
    }
});

自定义文件上传操作

你可以在文件上传单元格类型中对上传的图片进行预览、下载和清除操作，对上传的文件进行下载和清除操作。然而，SpreadJS 允许你使用 isPreviewEnabled 和 isDownloadEnabled 方法隐藏特定的按钮列表。

以下图片展示了包含预览和清除操作的蒙层。

参考以下代码示例来禁用下载按钮。

// 设置自定义操作
buttonfileUpload.isDownloadEnabled(false);

修改内置文件图标

SpreadJS 提供默认内置文件图标，最大大小为 20px。然而，它允许你使用 builtInFileIcons spread 选项为非图片文件修改内置文件图标。设置自定义内置文件图标时，键是文件扩展名，值是文件的 base64 编码字符串。

以下图片展示了自定义的文本文件图标。

参考以下代码示例来修改 .txt 文件的 builtInFileIcons 选项。

// 自定义 .txt 文件图标
spread.options.builtInFileIcons['txt'] = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAT1JREFUOE9jZGBgYPh5iq2bgYGhBMTGBZglik+zyLWbocszQg34j08zSI5JOJqBkZl/H4vCBGdktTADfjIwMLDhMwRsAIcSw/9frzazKk72g6kl2QCwxl/Pl7MoTosCMYk2gJFDnYFJ0I+BgYkDYvmvZ7NYFKenE20AWNM/ZgYGRla4T9nNPzGSZgBaILGb/Rp2BjDx2jEwCUcx/P/7keH/z7sM/17NYmCWqgH7nJFNhuH/rycMf5+1IAIRWxiw6t9l+H1RmYGRVZyB1eARw99nzQx/n7YwsGjsYvhzww0lGLEGIovyMoY/d6MYGDk1GVjUtzMw/HrC8PuaDQOL2haGP7d8CBvAJBTM8O/dWgZm6RqwzSAvgJwN8t6/z4dwGkAwM2HLJ3Av/DjJ1sXIyFBKKEei5ELG/31spr+LAddTgREw5iFTAAAAAElFTkSuQmCC";

注意：当包含文件上传单元格类型的 SpreadJS 实例导出为 SSJSON 格式时，上传的文件会转换为 base64 数据并直接存储在单元格中；而导出为 SJS 格式时，上传的文件会存储在嵌入目录中。

使用 SpreadJS 设计器

你可以通过选择“样式”选项卡中的“单元格编辑器 > 单元格类型 > 文件上传”选项来使用 SpreadJS 设计器设置文件上传单元格类型。

使用文件上传选项卡设置边距、文件类型、大小限制和操作。

你还可以从 Spread 设置对话框的“设置 > 常规”选项中添加新图标或选择现有文件图标。