@bdsoft/fileviewer

文档预览组件，封装 @file-viewer/vue3，并默认接入 @file-viewer/preset-office。

纯前端解析、无需服务端转码，适用于 Word / Excel / PowerPoint / PDF / Markdown / 图片等常见文件预览场景。

安装

pnpm add @bdsoft/fileviewer

注册（main.js）

import { useFileViewer } from '@bdsoft/fileviewer'

app.use(useFileViewer)

注册后即可在任意页面直接使用全局组件 <BdFileViewer>（或底层 <file-viewer>）。组件入口已引入 @file-viewer/vue3/dist/file-viewer3.css，业务项目无需额外引入样式文件。

使用

<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>

默认配置

BdFileViewer 会为底层 file-viewer 默认补充以下配置：

{
  preset: officePreset,
  rendererMode: 'replace',
  theme: 'light',
  styleIsolation: 'shadow',
  toolbar: {
    theme: false
  }
}

这些默认值可以通过 options 覆盖。比如需要开启主题切换按钮：

<BdFileViewer
  :url="url"
  :options="{ toolbar: { theme: true } }"
/>

属性（Props）

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

除 height 外，其余属性/事件均透传给底层 @file-viewer/vue3 组件。