# zylFileViewer - 文件浏览

# 用途

可用于需要纯前端在线浏览文件的场景（支持格式：pptx,docx,xlsx,pdf,mp4,纯文本和图片）。

# 注意事项

示例代码中文件查看器的地址 viewerUrl 属性值为演示地址，切勿直接用于生产。

本组件基于自主研发的关联组件生态 @zuiyouliao/vue-file-viewer (opens new window) 开发，若本组件库提供的该组件不满足您的需求，您也可以查阅上方提供的文档链接进行独立安装部署和使用。

为节省组件库体积，本组件库不会包含查看器相关内核代码，您需要配合以下安装步骤进行私有化部署。

安装步骤：

1、您需要自行前往文件查看器源码处下载编译构建后的产物 file-viewer (opens new window) 。
2、将下载后的 file-viewer 文件夹整个放在项目公共文件夹中作为外部公共资源使用。（以 vue-cli 为例，放置在项目 public 文件夹下；其他框架自行选择合适的公共路径放置）
3、使用部署后的地址填入 viewerUrl 属性作为文件查看器的地址（可以是相对路径，需要确认打包前后路径是否一致）

# 基础用法

复制代码<template>
  <div>
    <el-button type="text" @click="showFileViewer = true">
      点击打开文件浏览
    </el-button>
    <zyl-file-viewer
      v-model="showFileViewer"
      viewerUrl="https://file-viewer.me7.cn/file-viewer/index.html"
      :fileList="fileList"
    ></zyl-file-viewer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showFileViewer: false,
      fileList: [
        'https://file-viewer.me7.cn/fileTest/pdf.pdf',
        'https://file-viewer.me7.cn/fileTest/word.docx',
        'https://file-viewer.me7.cn/fileTest/pic.png'
      ]
    }
  },
  methods: {}
}
</script>

# 属性

value / v-model	是否显示文件浏览	Boolean	true 显示 / false 不显示	false
viewerUrl	文件查看器的地址（必传，采用外部iframe浏览，节省构建时间）	String	——	——
fileList	文件浏览的列表	Array	——	[]
dialogTitle	弹出窗的标题	String	——	文件浏览
dialogWidth	弹出窗的宽度	String	——	80%
dialogHeight	弹出窗的高度（取决于轮播图高度）	String	——	500px
initialIndex	初始化显示第几张	Number	——	0
useOfficeMicroOnline	是否开启使用微软提供的office文件在线访问接口（需联网，内网无效，隐私文件不推荐开启；可选，默认false关闭）	Boolean	true 开启 / false 关闭	false

# 事件

change(index)

切换查看文件的回调

index 返回文件列表的当前所在索引下标

← zylUploadFile - 增强上传组件 zylRemoteSelect - 远程搜索分页选择器 →