Vue、React 与原生 Web 接入

所有框架包都只负责生命周期和 DOM 挂载，文件识别、格式能力和错误状态由同一个 ViewerEngine 提供。

import { createAllFormatEngine } from '@previewdock/preset-all'

export const engine = createAllFormatEngine({
  assetBaseUrl: '/previewdock/',
})

Vue 3

pnpm add vue @previewdock/vue @previewdock/preset-all

<PreviewDock :engine="engine" :source="file" locale="zh-CN" />

Vue 2.6 / 2.7

pnpm add @previewdock/vue2 @previewdock/preset-all

import Vue from 'vue'
import PreviewDock from '@previewdock/vue2'
Vue.use(PreviewDock)

Vue 2 使用同样的 engine、source、file-name、mime-type、locale 属性和 ready/error/status 事件。

React 16.8–19

pnpm add react @previewdock/react @previewdock/preset-all

import PreviewDock from '@previewdock/react'

export function FilePreview({ file }) {
  return <PreviewDock engine={engine} source={file} locale="zh-CN" style={{ height: 720 }} />
}

原生 JS / Web Component

pnpm add @previewdock/web @previewdock/preset-all

import { mountPreviewDock } from '@previewdock/web'

const viewer = mountPreviewDock(document.querySelector('#viewer'), {
  engine,
  source: file,
  locale: 'zh-CN',
})

await viewer.dispose()

Custom Element 使用 registerPreviewDockElement() 注册；通过元素的 engine、source 属性传入对象，通过 src、file-name、mime-type 和 locale attribute 传入字符串配置。