@bdsoft/fileviewer

文档预览组件，封装 @flyfish-group/file-viewer3。

纯前端解析、无需服务端转码，内置 74+ 文件扩展名映射，覆盖 Word / Excel / PowerPoint / PDF / OFD / CAD / Markdown / 图片 / 音视频 等格式。

安装

pnpm add @bdsoft/fileviewer

注册（main.js）

import { useFileViewer } from '@bdsoft/fileviewer'

app.use(useFileViewer)

注册后即可在任意页面直接使用全局组件 <BdFileViewer>（或底层 <file-viewer>）。

使用

<template>
  <!-- 预览远程文件（注意：远程地址需目标侧配置 CORS） -->
  <BdFileViewer :url="url" height="600px" />

  <!-- 预览本地文件（File 对象，优先级高于 url） -->
  <BdFileViewer :file="file" height="80vh" />
</template>

<script setup>
import { ref } from 'vue'

const url = ref('https://example.com/demo.pdf')
const file = ref(null) // 由 <input type="file"> 等途径获取的 File 对象
</script>

属性（Props）

| 参数名 | 类型 | 默认值 | 说明 | | ---------- | ---------------- | -------- | ------------------------------------------------------------ | | url | String | - | 远程文件地址（需目标侧支持 CORS） | | file | File | - | 本地文件对象，优先级高于 url | | fileName | String | - | 可选，显示用文件名 / 用于推断类型 | | options | Object | - | 透传给底层组件的配置（如 watermark / toolbar / hooks）| | height | String | Number | 600px | 预览容器高度（数字按 px 处理）。底层组件填充父级，必须给高度 |

除 height 外，其余属性/事件均透传给底层 @flyfish-group/file-viewer3 组件，详见其官方文档。