简介

• 支持多种文件: png,apng,bmp,jpg,jpe,jpeg,gif,svg,webp,heif,mp4,webm,mov,docx,xlsx,pdf,pptx预览的vue3组件
• 其中docx,xlsx,pdf,ppt来自大佬@vue-office
• 对于@vue-office中pdf不兼容的浏览器使用embed进行兜底

安装

npm install @ansstory/file-viewer

使用示例

全局引入自动注册

import FileViewer from '@ansstory/file-viewer'
import '@ansstory/file-viewer/dist/file-viewer.css'
app.use(FileViewer, {
  // 全局配置
  name: 'FileViewer', // 组件名
  hiddenArrow: false, // 是否隐藏箭头
  hiddenFileName: false, // 是否隐藏文件名
  zIndex: 9999, // 弹窗的 z-index
  fileApi: '', // 内部已做兼容处理：非全地址则拼接代理
  infinite: false, // 是否可以无限循环预览
  zoomRate: 0.1, // 缩放比例
  maxScale: 6, // 最大缩放比例
  minScale: 0.2, // 最小缩放比例
  teleported: false, // 是否插入至 body 元素上
  // toolbar: true, // 是否显示工具栏
  toolbar: ['dArrowLeft', 'zoomOut', 'zoomIn', 'reset', 'rotateLeft', 'rotateRight', 'mirror', 'download', 'dArrowRight'], // 或者自定义工具栏
  displayFileName(url) {
    // 你可以在此重写预览的文件名
    // url = '/static/测试文件_4342343.pdf' // 默认展示：测试文件.pdf
    const lastSlashIndex = url.lastIndexOf('/')
    if (lastSlashIndex === -1) {
      return url
    }
    return url.substring(lastSlashIndex + 1)
  },
})

单文件引入

<script setup lang="ts">
  import { ref, useTemplateRef } from 'vue'
  import { FileViewer, type IFileViewerInstance } from '@ansstory/file-viewer'
  import '@ansstory/file-viewer/dist/file-viewer.css'
  // 逗号分割的字符串
  // const fileList = ref('https://test-jpfile1.oss-cn-shenzhen.aliyuncs.com/Bom/bom/2022/1/19/2022011911370824626513.pdf')
  // 或者
  const fileList = ref(['https://test-jpfile1.oss-cn-shenzhen.aliyuncs.com/Bom/bom/2022/1/19/2022011911370824626513.pdf'])
  const fileViewerRef = useTemplateRef<IFileViewerInstance>('fileViewerRef')
  const openFileViewer = () => {
    fileViewerRef.value?.open()
  }
</script>

<template>
  <button @click="openFileViewer">打开</button>
  <FileViewer ref="fileViewerRef" :urls="fileList" />
</template>