文件预览

介绍

FilePreview 是文件在线预览组件：图片走 vant ImagePreview 全屏缩放，其它文件（pdf/doc/xls/txt 等）通过 kkFileView 在线预览网关以 iframe 展示，并支持水印与下载。

引入

import Vue from 'vue';
import FilePreview from '@lambo-design-mobile/file-preview';

Vue.use(FilePreview);

代码演示

基础用法

通过 ref 调用 open(field, item) 打开预览：

<file-preview ref="preview" />
<van-cell title="预览附件" is-link @click="preview" />

export default {
    methods: {
        preview() {
            this.$refs.preview.open(
                { ossServerContext: '/ibp-upms-server', fileOnlinePreviewContext: '/file-online-preview' },
                { fileId: 'xxx', fileName: '测试.pdf' }
            );
        }
    }
}

图片预览

自动识别 jpg/png/gif 等图片扩展名，走全屏 ImagePreview。

水印

open(field, item) 的 field 可传 watermarkTxt 与 watermarkOptions（fontsize/color/alpha/angle 等，自动补齐 watermark 前缀），也可通过组件 prop 兜底。

Props

| 参数 | 说明 | 类型 | 默认值 | |------|------|------|--------| | visible | 是否显示 | boolean | false | | ossServerContext | 文件服务上下文 | string | ''（取 shared config upmsServerContext） | | watermarkTxt | 水印文本兜底 | string | '' | | watermarkOptions | 水印样式兜底 | object | {} |

Methods

| 方法名 | 说明 | 参数 | |--------|------|------| | open | 打开预览 | field: 字段配置，item: 文件条目（fileId/fileName 必填，fileUrl 可选） |