SuperPage交互-预览文件

使用预览文件交互可以全屏预览图片、PDF、Word、视频、音频类等资源文件。如点击预览按钮，即可预览相关文件资源，在预览界面点击右上角关闭按钮或按esc可以退出预览：

PC端	移动端

示例地址：PC端附件预览 (opens new window)、移动端附件预览 (opens new window)

使用预览文件

使用预览文件交互需要搭配载体组件，除使用按钮组件外，也可将该交互附于其他浮动展示数据的组件上，浮动出来的每行数据都会带有交互动作，如列表、浮动面板。

以列表为例介绍预览文件交互的使用方法，实现点击预览按钮，预览相关文件资源：

1. 添加预览文件交互：在列表的操作列的预览按钮添加预览文件交互
2. 设置交互属性：文件来源选择数据集，数据选择上传附件_富文本，附件字段选择存储路径

文件来源设置

系统内部提供了两种文件的存储方式，可以参考上传附件文档，除了来自系统内部之外，还可以是外网中的资源，均可以使用该交互实现文件的预览，文件来源下拉框提供了数据集和自定义两种选项。

预览来自数据集的文件

当文件资源以路径的形式存放在模型表的字段里，预览文件交互需要进行以下设置：

• 文件来源：下拉框中选择数据集
• 数据：下拉框中选择组件和交互的取数来源，可以是数据模型、临时的数据加工或者新建的数据集
• 附件字段：选择数据表中存储图片/附件路径的字段即可。在下拉框中，只显示数据表中字段角色为附件角色和图片角色的字段
• 数据范围：预览文件交互支持预览哪些符合条件的数据，在数据范围属性中提供了四种可选项，可以参考删除数据文档

预览自定义文件地址

当文件资源存放在元数据中或者来自系统外的页面时，可以参考网页文档，预览文件交互需要进行以下设置：

1. 文件来源：下拉框中选择自定义，这里的地址可以为系统内部地址，也可以是外网地址，主要是以下几种形式：

   • 相对地址：如../../public/audios/钢琴.mp3
   • 绝对地址:
     • 模块绝对地址：如/DEMO/ana/图表/图形/条形竞赛图.dash
     • 网页绝对地址：如http://172.23.126.107:8080/DEMO/public/audio/钢琴.mp3
   • 表达式：如${[path]}

2. 参数设置：可以根据需求设置地址参数，具体可参考URL参考文档，点击编辑参数即可设置参数，可设置多个，下拉列表中会显示在SuperPage中添加的全局参数

设置文件名

预览时文件名称显示在左上角，系统默认是元数据中的名称，也可以自定义文件名，在文件名属性中选择自定义即可，支持写表达式。

设置预览文件可下载

预览界面右上角提供了资源下载的入口，点击下载图标可以下载相关文件资源，如果不需要此功能，去掉允许下载勾选即可。

预览多个文件

可以预览多个文件，在预览界面右上角可以使用左右箭头切换上一张和下一张，实现思路如下：

1. 相关组件添加预览文件交互
2. 文件来源：不同的来源方式设置不同
   • 来自数据集的文件：数据集返回的是多条数据，且设置数据范围为当前查询结果
   • 自定义文件地址：多个文件地址使用换行符分割

以预览多张图片为例，点击预览多个图片按钮即可预览图片资源：