前端文件预览

CDwenhuohuo2026-04-30 14:07

jit-viewer：这是一个专门用于前端文件预览的 JavaScript 库（通常支持 PDF、Office 文档、图片、视频等格式）·

0下载

复制代码

npm install jit-viewer
# 或
yarn add jit-viewer
或
pnpm install jit-viewer

1引入库

import { createViewer } from 'jit-viewer'

import 'jit-viewer/style.css'

2 初始化预览器

复制代码

onMounted(() => {
  if (!viewerRef.value) return

  // 文件名
  fileName.value = uri.value.split('/').pop()

  // 创建 Viewer 实例
viewerInstance = createViewer({
  target: viewerRef.value,      // ✅ 挂载点：HTML 元素
  file: getSeverAssetUrl(uri.value), // ✅ 文件地址：经过代理或拼接后的完整 URL
  theme: 'light',               // 主题
  toolbar: false,               // 隐藏库自带的工具栏（因为你在顶部自定义了按钮）
  width: '100%',
  height: '100%',
  onReady: () => console.log('Viewer ready'),
  onLoad: () => console.log('File loaded'),
  onError: (err) => console.error('Error:', err)
})

viewerInstance.mount() // ✅ 启动渲染
})