HaierUI Plus

Appearance

Return to top
On this page

FilePreview 文件预览（齐思博）

基础用法

同时支持文件下载及预览。

需要设置name属性和url属性，接收String，目前文件预览只支持word，ppt，excel。如果非上面几种类型文件则不展示预览
文件:
文件模板
预览

文件-自定义下载事件:
文件模板
预览

文件-不展示预览:
文件模板

文件小尺寸:
文件模板
预览
<template>
  <div>
    文件: <h-file-preview :name="name" :url="url"></h-file-preview>
    <br />
    文件-自定义下载事件: <h-file-preview :name="name" :url="url" :customDownload="true" @download="fnDownloadTemplate"></h-file-preview>
    <br />
    文件-不展示预览: <h-file-preview :name="name" :url="url" :noPreview="true"></h-file-preview>
    <br />
    文件小尺寸: <h-file-preview :name="name" :url="url" :size="'mini'"></h-file-preview>
  </div>
</template>

<script setup>
import {
  ref
} from 'vue';
const name = ref('文件模板');
const url = ref('https://bd-cookbook-ys.oss-cn-beijing.aliyuncs.com/ys-knowledge/template/%E9%9A%90%E7%A7%81%E5%90%88%E8%A7%84%E8%87%AA%E6%9F%A5%E6%B8%85%E5%8D%95.xlsx');

const noPreview = ref(true);
const customDownload = ref(true);
const fnDownloadTemplate = () => {
  console.log('下载模板');
}

</script>

Attributes

参数说明类型可选值默认值
name文件名称string——
downname下载文件的名称string—如果不传默认使用name作为下载文件名
url文件地址（预览仅支持word，ppt，excel）string——
size尺寸stringnormal / mininormal
noPreview不显示预览boolean—false
customDownload自定义下载事件boolean—false

Events

方法名说明参数
download下载事件（customDownload设置为true时生效）function()