vue 阅览文档原生+onlyoffice

仟白

335人浏览 · 2026-06-17 17:07:00

仟白 · 2026-06-17 17:07:00 发布

主要阅览是简单的Image，mp4，mp3，pdf，doc，docx，ppt，pptx，xls，xlsx这几种文件

然后呢需要引入onlyoffice的插件和部署onlyoffice的服务这个阅览感觉还是很高的继承的开源不用特别的api是不收费的还是很不错的

文件可以单独找我要球球1446714867

安装

前端插件： npm i “@onlyoffice/document-editor-vue”: “^1.6.1”
服务部署： onlyoffice文档

下边是一个简单里例子
再下边有README.md文件可以看

app.vue

<template>
  <div class="container">
    <div class="preview-file">
      <PreviewFile :url="url" :type="type" :options="options" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs } from 'vue'
import PreviewFile from './previewFile/index.vue'
import type { PreviewFileState } from './previewFile/type'

const preview = reactive<PreviewFileState>({
  type: 'audio',
  url: 'xxxx.mp3',
  options: { themeColor: '#000000' },
})

const { url, type, options } = toRefs(preview)
</script>

<style scoped>
.preview-file {
  width: 800px;
  height: 600px;
  background: #fff;
}
</style>

previewFile

<template>
    <div class="preview-file">
        <div v-if="type === 'image'" class="preview-file-container preview-file-image">
            <slot name="image">
                <img ref="imageRef" class="preview-file-image-temp" :src="url" alt="图片异常，请检查图片地址"
                    @load="() => emit('imageLoad')" @error="(e: Event) => emit('imageError', e)" />
            </slot>
        </div>
        <div v-if="type === 'video'" class="preview-file-container preview-file-video">
            <slot name="video">
                <video ref="videoRef" class="preview-file-video-temp" :src="url" controls
                    controlsList="nodownload noplaybackrate noremoteplayback nofullscreen" disablePictureInPicture
                    :autoplay="_VideoAutoplay" :muted="_VideoMuted" @canplay="() => emit('videoCanplay')"
                    @error="(e: Event) => emit('videoError', e)"></video>
            </slot>
        </div>
        <div v-if="type === 'audio'" class="preview-file-container preview-file-audio">
            <slot name="audio">
                <AudioTemplate ref="audioTemplateRef" :url="url" :autoplay="_AudioAutoplay" :muted="_AudioMuted"
                    :theme-color="_AudioThemeColor" @canplay="() => emit('audioCanplay')"
                    @error="(e: Event) => emit('audioError', e)" />
            </slot>
        </div>
        <div v-if="type === 'pdf'" class="preview-file-container preview-file-pdf">
            <slot name="pdf">
                <iframe class="preview-file-pdf-temp" :src="_PdfUrl" frameborder="0"></iframe>
            </slot>
        </div>
        <div v-if="type === 'word'" class="preview-file-container preview-file-word">
            <div class="preview-file-word-temp">
                <slot name="word">
                    <DocumentEditor id="reviewDocEditor" :document-server-url="_onlyOfficeUrl"
                        :config="_OfficeEditorConfig" :events-on-error="onOnlyOfficeError" />
                </slot>
            </div>
        </div>
        <div v-else class="preview-file-container preview-file-default">
            <slot name="default">
                文件类型不支持
            </slot>
        </div>
    </div>
</template>
<script setup lang="ts">
import { computed, useTemplateRef, watch, ref } from 'vue'
import AudioTemplate from './audio.vue'
import { DocumentEditor } from '@onlyoffice/document-editor-vue'
import type {
    PreviewFileBindProps,
    PreviewFileEmits,
    Options,
    VideoMethods,
    VideoOptions,
    ImageOptions,
    AudioMethods,
    AudioOptions,
    PdfOptions,
    WordOptions,
} from './type'

const imageEl = useTemplateRef('imageRef')
const videoEl = useTemplateRef('videoRef')
const audioEl = useTemplateRef<InstanceType<typeof AudioTemplate>>('audioTemplateRef')

const props = defineProps<PreviewFileBindProps>()

const emit = defineEmits<PreviewFileEmits>()

// -------- v-bind参数 --------
/** 默认宽度为100%，高度为100% */
const width = computed(() => (props?.options as Options)?.width || '100%')
const height = computed(() => (props?.options as Options)?.height || '100%')
/** 图片默认适应方式为contain */
const _ImageFit = computed(() => (props?.options as ImageOptions)?.fit || 'contain')
/** 视频默认不自动播放，静音 */
const _VideoAutoplay = computed(() => (props?.options as VideoOptions)?.autoplay || false)
const _VideoMuted = computed(() => (props?.options as VideoOptions)?.muted || true)
/** 音频默认不自动播放，静音 */
const _AudioAutoplay = computed(() => (props?.options as AudioOptions)?.autoplay || false)
const _AudioMuted = computed(() => (props?.options as AudioOptions)?.muted || true)
const _AudioThemeColor = computed(() => (props?.options as AudioOptions)?.themeColor || '#409eff')
/** pdf iframe 地址，根据 showToolbar 拼接展示参数 */
const _PdfUrl = computed(() => {
    if (props.type !== 'pdf' || !props.url) return ''
    const { showToolbar } = (props.options as PdfOptions) ?? {}
    if (props.url.includes('#')) return props.url
    return `${props.url}${showToolbar ? '' : '#toolbar=0&navpanes=0'}`
})
/** word */
const _onlyOfficeUrl = computed(() => (props?.options as WordOptions)?.onlyOfficeUrl || '')
const _WordType = computed(() => {
    const { onlyType } = props?.options as WordOptions ?? {}
    if (['ppt', 'pptx'].includes(onlyType)) {
        return { fileType: onlyType, documentType: 'slide' }
    }
    if (['xls', 'xlsx'].includes(onlyType)) {
        return { fileType: onlyType, documentType: 'cell' }
    }
    return { fileType: onlyType || 'docx', documentType: 'word' }
})
const _OfficeEditorConfig = computed(() => {
    const { url, type } = props
    if (type !== 'word') return
    const { fileType, documentType } = _WordType.value
    const title = url || `document.${fileType}`
    return {
        document: {
            fileType,
            key: url.replace(/[^0-9a-zA-Z\-._=]/g, '').slice(0, 128),
            title,
            url: url,
            permissions: {
                chat: false,
                comment: false,
                copy: false,
                download: true,
                edit: false,
                fillForms: false,
                modifyContentControl: false,
                modifyFilter: false,
                print: true,
                review: false
            }

        },
        documentType,
        editorConfig: {
            // 用 edit 模式 + edit:false 只读，比 view 模式兼容性更好
            mode: 'edit',
            lang: 'zh-CN',
            user: {
                id: 'review-guest',
                name: '访客'
            }
        }
    } as any
})

// 方法
/** 视频方法 */
const videoMethods: Record<VideoMethods, () => void> = {
    play: () => {
        videoEl.value && videoEl.value.play()
    },
    pause: () => {
        videoEl.value && videoEl.value.pause()
    },
}
/** 音频方法 */
const audioMethods: Record<AudioMethods, () => void> = {
    play: () => {
        audioEl.value?.play()
    },
    pause: () => {
        audioEl.value?.pause()
    },
}
/** onlyOffice 错误 */
const onOnlyOfficeError = (error: Event) => {
    emit('onlyOfficeError', error)
}
/** 复制 url */
const copyUrl = () => {
    navigator.clipboard.writeText(props.url)
}
const EXPOSES = {
    videoMethods,
    audioMethods,
    copyUrl: copyUrl,
    imageEl,
    videoEl,
    audioEl,
}

defineExpose(EXPOSES)
</script>
<style scoped lang="scss">
.preview-file {
    width: v-bind(width);
    height: v-bind(height);
    overflow: hidden;
    user-select: none;

    &-container {
        width: 100%;
        height: 100%;
        display: flex;
        overflow: auto;
    }

    &-image {
        justify-content: center;
        align-items: center;

        .preview-file-image-temp {
            width: 100%;
            object-fit: v-bind(_ImageFit);
        }
    }

    &-video {
        justify-content: center;
        align-items: center;

        .preview-file-video-temp {
            width: 100%;
            height: 100%;

            &::-webkit-media-controls-overflow-button {
                display: none;
            }

            &::-webkit-media-controls-fullscreen-button {
                display: none;
            }
        }
    }

    &-audio {
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }

    &-pdf {
        width: 100%;
        height: 100%;

        .preview-file-pdf-temp {
            width: 100%;
            height: 100%;
        }
    }

    &-word {
        width: 100%;
        height: 100%;
        overflow: hidden;

        &-temp {
            width: calc(100% + 40px);
            height: calc(100% + 34px);
            margin: -34px 0 0 -40px;
        }
    }

    &-default {
        justify-content: center;
        align-items: center;
        font-size: 18px;
        color: #999;
    }
}
</style>

audio

<template>
    <div class="preview-file-audio-wrapper" :style="themeVars">
        <canvas ref="canvasRef" class="preview-file-audio-canvas"></canvas>
        <div class="preview-file-audio-toolbar">
            <button type="button" class="ctrl-btn play-btn" :title="isPlaying ? '暂停' : '播放'" @click="togglePlay">
                <svg v-if="!isPlaying" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M8 5v14l11-7z" />
                </svg>
                <svg v-else viewBox="0 0 24 24" fill="currentColor">
                    <path d="M6 5h4v14H6zm8 0h4v14h-4z" />
                </svg>
            </button>
            <div class="progress-panel">
                <span class="time-text">{{ formatTime(currentTime) }}</span>
                <div class="slider-track">
                    <input type="range" class="progress-slider" min="0" max="100" step="0.1" :value="progressPercent"
                        :style="{ '--progress': progressPercent + '%' }" @mousedown="isSeeking = true"
                        @touchstart="isSeeking = true" @input="onProgressInput" @change="onProgressChange" />
                </div>
                <span class="time-text">{{ formatTime(duration) }}</span>
            </div>
            <div class="volume-panel">
                <button type="button" class="ctrl-btn volume-btn" :title="isMuted ? '取消静音' : '静音'"
                    @click="toggleMute">
                    <svg v-if="isMuted || volume === 0" viewBox="0 0 24 24" fill="currentColor">
                        <path
                            d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z" />
                    </svg>
                    <svg v-else-if="volume < 0.5" viewBox="0 0 24 24" fill="currentColor">
                        <path
                            d="M18.5 12c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM5 9v6h4l5 5V4L9 9H5z" />
                    </svg>
                    <svg v-else viewBox="0 0 24 24" fill="currentColor">
                        <path
                            d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z" />
                    </svg>
                </button>
                <div class="slider-track">
                    <input type="range" class="volume-slider" min="0" max="100" :value="volumePercent"
                        :style="{ '--volume': volumePercent + '%' }" @input="onVolumeInput" />
                </div>
            </div>
        </div>
        <audio ref="audioRef" class="preview-file-audio-hidden" :src="url" :autoplay="autoplay" preload="metadata"
            crossorigin="anonymous" @canplay="onCanplay" @error="onError" @play="onPlay" @pause="onPause"
            @ended="onEnded" @timeupdate="onTimeUpdate" @loadedmetadata="onLoadedMetadata"></audio>
    </div>
</template>

<script setup lang="ts">
import { computed, onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from 'vue'
import type { AudioEmits, AudioProps, AudioTheme } from './type'

const DEFAULT_AUDIO_PRIMARY = ''

const hexToRgb = (hex: string) => {
    const h = hex.replace('#', '')
    const normalized = h.length === 3
        ? h.split('').map((c) => c + c).join('')
        : h
    return {
        r: parseInt(normalized.slice(0, 2), 16),
        g: parseInt(normalized.slice(2, 4), 16),
        b: parseInt(normalized.slice(4, 6), 16),
    }
}

const rgbToHex = (r: number, g: number, b: number) => {
    const toHex = (n: number) => Math.round(n).toString(16).padStart(2, '0')
    return `#${toHex(r)}${toHex(g)}${toHex(b)}`
}

const mixWithWhite = (hex: string, whiteWeight: number) => {
    const { r, g, b } = hexToRgb(hex)
    const w = Math.min(1, Math.max(0, whiteWeight))
    return rgbToHex(
        r + (255 - r) * w,
        g + (255 - g) * w,
        b + (255 - b) * w,
    )
}

const lighten = (hex: string, amount: number) => mixWithWhite(hex, amount)

const rgba = (hex: string, alpha: number) => {
    const { r, g, b } = hexToRgb(hex)
    return `rgba(${r}, ${g}, ${b}, ${alpha})`
}

const buildAudioTheme = (primary: string): AudioTheme => ({
    primary,
    primaryLight: lighten(primary, 0.22),
    spectrumBottom: 'rgba(255, 255, 255, 0.95)',
    spectrumMid: rgba(primary, 0.5),
    spectrumTop: rgba(primary, 0.78),
    line: rgba(primary, 0.45),
    lineGlow: rgba(primary, 0.55),
    track: primary,
    trackBg: mixWithWhite(primary, 0.86),
    volumeTrackBg: mixWithWhite(primary, 0.82),
    panelBg: mixWithWhite(primary, 0.92),
    panelBorder: mixWithWhite(primary, 0.78),
    textMuted: '#8a96ad',
    iconMuted: '#6b7a99',
    iconHoverBg: mixWithWhite(primary, 0.88),
    btnShadow: rgba(primary, 0.32),
    btnShadowHover: rgba(primary, 0.42),
    thumbShadow: rgba(primary, 0.32),
})

const props = withDefaults(defineProps<AudioProps>(), {
    autoplay: false,
    muted: true,
    themeColor: DEFAULT_AUDIO_PRIMARY,
})

const theme = computed(() => buildAudioTheme(props.themeColor))

const themeVars = computed(() => ({
    '--audio-primary': theme.value.primary,
    '--audio-primary-light': theme.value.primaryLight,
    '--audio-track': theme.value.track,
    '--audio-track-bg': theme.value.trackBg,
    '--audio-volume-track-bg': theme.value.volumeTrackBg,
    '--audio-panel-bg': theme.value.panelBg,
    '--audio-panel-border': theme.value.panelBorder,
    '--audio-text-muted': theme.value.textMuted,
    '--audio-icon-muted': theme.value.iconMuted,
    '--audio-icon-hover-bg': theme.value.iconHoverBg,
    '--audio-btn-shadow': theme.value.btnShadow,
    '--audio-btn-shadow-hover': theme.value.btnShadowHover,
    '--audio-thumb-shadow': theme.value.thumbShadow,
}))

const emit = defineEmits<AudioEmits>()

const canvasRef = useTemplateRef<HTMLCanvasElement>('canvasRef')
const audioRef = useTemplateRef<HTMLAudioElement>('audioRef')

const isPlaying = ref(false)
const isMuted = ref(props.muted)
const isSeeking = ref(false)
const volume = ref(0.8)
const currentTime = ref(0)
const duration = ref(0)
const volumePercent = computed(() => Math.round(volume.value * 100))
const progressPercent = computed(() => {
    if (!duration.value) return 0
    return (currentTime.value / duration.value) * 100
})

const formatTime = (seconds: number) => {
    if (!seconds || !isFinite(seconds)) return '00:00'
    const m = Math.floor(seconds / 60)
    const s = Math.floor(seconds % 60)
    return `${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`
}

let audioContext: AudioContext | null = null
let analyser: AnalyserNode | null = null
let gainNode: GainNode | null = null
let sourceNode: MediaElementAudioSourceNode | null = null
let animationId = 0
let resizeObserver: ResizeObserver | null = null
let freqDataArray: Uint8Array | null = null
let smoothedValues: number[] | null = null

const getBarCount = (w: number) => Math.min(120, Math.max(64, Math.floor(w / 3)))

const getSpectrumValues = (freqData: Uint8Array, barCount: number) => {
    const values: number[] = []
    const minBin = 2
    const maxBin = freqData.length - 1
    const logMin = Math.log(minBin)
    const logMax = Math.log(maxBin)

    for (let i = 0; i < barCount; i++) {
        const start = Math.min(
            maxBin,
            Math.floor(Math.exp(logMin + (logMax - logMin) * (i / barCount))),
        )
        const end = Math.min(
            maxBin,
            Math.floor(Math.exp(logMin + (logMax - logMin) * ((i + 1) / barCount))),
        )

        let sum = 0
        let count = 0
        for (let j = start; j <= end; j++) {
            sum += freqData[j]
            count++
        }
        values.push(count ? sum / count / 255 : 0)
    }

    const peak = Math.max(...values, 0.1)
    return values.map((v, i) => {
        const bassAttenuation = 0.45 + 0.55 * (i / Math.max(barCount - 1, 1))
        return Math.pow((v / peak) * bassAttenuation, 0.72)
    })
}

const smoothAdjacent = (values: number[]) => {
    const next = [...values]
    for (let i = 0; i < values.length; i++) {
        const prev = values[Math.max(0, i - 1)]
        const curr = values[i]
        const following = values[Math.min(values.length - 1, i + 1)]
        next[i] = prev * 0.18 + curr * 0.64 + following * 0.18
    }
    return next
}

const interpolateFrame = (target: number[]) => {
    if (!smoothedValues || smoothedValues.length !== target.length) {
        smoothedValues = [...target]
        return smoothedValues
    }
    for (let i = 0; i < target.length; i++) {
        smoothedValues[i] = smoothedValues[i] * 0.72 + target[i] * 0.28
    }
    return smoothedValues
}

const createBarGradient = (
    ctx: CanvasRenderingContext2D,
    x: number,
    baselineY: number,
    topY: number,
    theme: AudioTheme,
) => {
    const gradient = ctx.createLinearGradient(x, baselineY, x, topY)
    gradient.addColorStop(0, theme.spectrumBottom)
    gradient.addColorStop(0.4, theme.spectrumMid)
    gradient.addColorStop(1, theme.spectrumTop)
    return gradient
}

const drawSpectrumVisualizer = (
    ctx: CanvasRenderingContext2D,
    w: number,
    h: number,
    values: number[],
    theme: AudioTheme,
    idle = false,
) => {
    const chartStartX = 0
    const chartWidth = w
    const baselineY = h - 6
    const topPadding = h * 0.05
    const gap = 3
    const barCount = values.length
    const barWidth = Math.max(2, (chartWidth - gap * (barCount - 1)) / barCount)
    const maxBarHeight = baselineY - topPadding

    ctx.save()

    if (idle) {
        ctx.beginPath()
        ctx.moveTo(chartStartX, baselineY)
        ctx.lineTo(chartStartX + chartWidth, baselineY)
        ctx.strokeStyle = theme.line
        ctx.shadowColor = theme.lineGlow
        ctx.shadowBlur = 8
        ctx.lineWidth = 1
        ctx.stroke()
    }

    if (!idle) {
        ctx.shadowBlur = 0

        for (let i = 0; i < barCount; i++) {
            const displayValue = Math.min(1, Math.max(0.05, values[i]) * 1.12)
            const barHeight = Math.min(maxBarHeight, Math.max(4, displayValue * maxBarHeight))
            const x = chartStartX + i * (barWidth + gap)
            const y = baselineY - barHeight
            const topRadius = Math.min(barWidth / 2, 3)

            ctx.fillStyle = createBarGradient(ctx, x, baselineY, y, theme)
            ctx.beginPath()
            ctx.roundRect(x, y, barWidth, barHeight, [topRadius, topRadius, 0, 0])
            ctx.fill()
        }
    }

    ctx.restore()
}

const drawIdle = () => {
    const canvas = canvasRef.value
    if (!canvas) return

    const ctx = canvas.getContext('2d')
    if (!ctx) return

    const dpr = window.devicePixelRatio || 1
    const w = canvas.width / dpr
    const h = canvas.height / dpr

    ctx.clearRect(0, 0, w, h)
    const barCount = getBarCount(w)
    drawSpectrumVisualizer(ctx, w, h, new Array(barCount).fill(0), theme.value, true)
}

const draw = () => {
    const canvas = canvasRef.value
    if (!canvas || !analyser || !freqDataArray) return

    const ctx = canvas.getContext('2d')
    if (!ctx) return

    analyser.getByteFrequencyData(freqDataArray as Uint8Array<ArrayBuffer>)

    const dpr = window.devicePixelRatio || 1
    const w = canvas.width / dpr
    const h = canvas.height / dpr

    ctx.clearRect(0, 0, w, h)

    const barCount = getBarCount(w)
    const raw = getSpectrumValues(freqDataArray, barCount)
    const values = interpolateFrame(smoothAdjacent(raw))
    drawSpectrumVisualizer(ctx, w, h, values, theme.value)

    animationId = requestAnimationFrame(draw)
}

const applyVolume = () => {
    if (!gainNode) return
    gainNode.gain.value = isMuted.value ? 0 : volume.value
}

const initAudioContext = () => {
    if (!audioRef.value || audioContext) return

    audioContext = new AudioContext()
    analyser = audioContext.createAnalyser()
    analyser.fftSize = 512
    analyser.minDecibels = -90
    analyser.maxDecibels = -10
    analyser.smoothingTimeConstant = 0.85
    gainNode = audioContext.createGain()
    sourceNode = audioContext.createMediaElementSource(audioRef.value)
    // 分析器放在增益之前，静音时仍能拿到完整频谱数据
    sourceNode.connect(analyser)
    analyser.connect(gainNode)
    gainNode.connect(audioContext.destination)
    freqDataArray = new Uint8Array(analyser.frequencyBinCount)
    applyVolume()
}

const resizeCanvas = () => {
    const canvas = canvasRef.value
    if (!canvas) return

    const { clientWidth, clientHeight } = canvas
    const dpr = window.devicePixelRatio || 1
    canvas.width = clientWidth * dpr
    canvas.height = clientHeight * dpr

    const ctx = canvas.getContext('2d')
    if (ctx) ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
}

const startVisualization = async () => {
    initAudioContext()
    if (audioContext?.state === 'suspended') {
        await audioContext.resume()
    }
    resizeCanvas()
    cancelAnimationFrame(animationId)
    draw()
}

const stopVisualization = () => {
    cancelAnimationFrame(animationId)
    animationId = 0
    smoothedValues = null
    resizeCanvas()
    drawIdle()
}

const togglePlay = async () => {
    if (!audioRef.value) return

    if (isPlaying.value) {
        audioRef.value.pause()
        return
    }

    initAudioContext()
    if (audioContext?.state === 'suspended') {
        await audioContext.resume()
    }
    await audioRef.value.play()
}

const toggleMute = () => {
    isMuted.value = !isMuted.value
    applyVolume()
}

const onVolumeInput = (e: Event) => {
    const val = Number((e.target as HTMLInputElement).value) / 100
    volume.value = val
    if (val > 0) isMuted.value = false
    applyVolume()
}

const onTimeUpdate = () => {
    if (!audioRef.value || isSeeking.value) return
    currentTime.value = audioRef.value.currentTime
}

const onLoadedMetadata = () => {
    if (!audioRef.value) return
    duration.value = audioRef.value.duration || 0
}

const onProgressInput = (e: Event) => {
    const percent = Number((e.target as HTMLInputElement).value)
    if (!duration.value) return
    currentTime.value = (percent / 100) * duration.value
}

const onProgressChange = (e: Event) => {
    const percent = Number((e.target as HTMLInputElement).value)
    if (!audioRef.value || !duration.value) return
    const time = (percent / 100) * duration.value
    audioRef.value.currentTime = time
    currentTime.value = time
    isSeeking.value = false
}

const onCanplay = () => {
    resizeCanvas()
    drawIdle()
    emit('canplay')
}

const onError = (e: Event) => {
    emit('error', e)
}

const onPlay = () => {
    isPlaying.value = true
    startVisualization()
}

const onPause = () => {
    isPlaying.value = false
    stopVisualization()
}

const onEnded = () => {
    isPlaying.value = false
    currentTime.value = 0
    stopVisualization()
}

const play = async () => {
    if (!audioRef.value) return
    initAudioContext()
    if (audioContext?.state === 'suspended') {
        await audioContext.resume()
    }
    await audioRef.value.play()
}

const pause = () => {
    audioRef.value?.pause()
}

watch(() => props.muted, (val) => {
    isMuted.value = val
    applyVolume()
})

watch(() => props.themeColor, () => {
    resizeCanvas()
    if (isPlaying.value) return
    drawIdle()
}, { deep: true })

watch(() => props.url, () => {
    currentTime.value = 0
    duration.value = 0
    isPlaying.value = false
    smoothedValues = null
    stopVisualization()
})

onMounted(() => {
    const canvas = canvasRef.value
    if (!canvas) return

    resizeObserver = new ResizeObserver(() => {
        resizeCanvas()
        if (isPlaying.value) return
        drawIdle()
    })
    resizeObserver.observe(canvas)
    resizeCanvas()
    drawIdle()
})

onBeforeUnmount(() => {
    resizeObserver?.disconnect()
    resizeObserver = null
    stopVisualization()
    sourceNode?.disconnect()
    gainNode?.disconnect()
    analyser?.disconnect()
    audioContext?.close()
    audioContext = null
    analyser = null
    gainNode = null
    sourceNode = null
    freqDataArray = null
    smoothedValues = null
})

defineExpose({
    audioEl: audioRef,
    play,
    pause,
})
</script>

<style scoped lang="scss">
.preview-file-audio-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 16px 20px 20px;
    box-sizing: border-box;
    pointer-events: all;
}

.preview-file-audio-canvas {
    flex: 1;
    width: 100%;
    min-height: 0;
    background: transparent;
    display: block;
}

.preview-file-audio-toolbar {
    flex-shrink: 0;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 12px;
}

.time-text {
    flex-shrink: 0;
    width: 36px;
    font-size: 11px;
    color: var(--audio-text-muted);
    font-variant-numeric: tabular-nums;
    text-align: center;
    user-select: none;
}

.progress-panel {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 10px;
    background: var(--audio-panel-bg);
    border: 1px solid var(--audio-panel-border);
    border-radius: 10px;
    overflow: hidden;
}

.slider-track {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    padding: 0 6px;
}

.progress-slider {
    width: 100%;
    min-width: 0;
    height: 3px;
    appearance: none;
    background: linear-gradient(
        to right,
        var(--audio-track) var(--progress, 0%),
        var(--audio-track-bg) var(--progress, 0%)
    );
    border-radius: 99px;
    outline: none;
    cursor: pointer;

    &::-webkit-slider-thumb {
        appearance: none;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: #fff;
        border: 2px solid var(--audio-primary);
        box-shadow: 0 1px 3px var(--audio-thumb-shadow);
        cursor: pointer;
        transition: transform 0.15s;
    }

    &:hover::-webkit-slider-thumb {
        transform: scale(1.1);
    }

    &::-moz-range-thumb {
        width: 12px;
        height: 12px;
        border: 2px solid var(--audio-primary);
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 1px 3px var(--audio-thumb-shadow);
        cursor: pointer;
    }

    &::-moz-range-track {
        height: 3px;
        background: var(--audio-track-bg);
        border-radius: 99px;
    }

    &::-moz-range-progress {
        height: 3px;
        background: var(--audio-track);
        border-radius: 99px;
    }
}

.ctrl-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;

    &:active {
        transform: scale(0.94);
    }

    svg {
        display: block;
    }
}

.play-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    background: linear-gradient(145deg, var(--audio-primary-light) 0%, var(--audio-primary) 100%);
    color: #fff;
    box-shadow: 0 2px 10px var(--audio-btn-shadow);

    svg {
        width: 20px;
        height: 20px;
    }

    &:hover {
        box-shadow: 0 4px 14px var(--audio-btn-shadow-hover);
    }
}

.volume-panel {
    flex-shrink: 0;
    width: 128px;
    display: flex;
    align-items: center;
    gap: 4px;
    height: 40px;
    padding: 0 8px;
    background: var(--audio-panel-bg);
    border: 1px solid var(--audio-panel-border);
    border-radius: 10px;
    overflow: hidden;
}

.volume-btn {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--audio-icon-muted);

    svg {
        width: 16px;
        height: 16px;
    }

    &:hover {
        background: var(--audio-icon-hover-bg);
        color: var(--audio-primary);
    }
}

.volume-slider {
    width: 100%;
    min-width: 0;
    height: 3px;
    appearance: none;
    background: linear-gradient(
        to right,
        var(--audio-track) var(--volume, 0%),
        var(--audio-volume-track-bg) var(--volume, 0%)
    );
    border-radius: 99px;
    outline: none;
    cursor: pointer;

    &::-webkit-slider-thumb {
        appearance: none;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: #fff;
        border: 2px solid var(--audio-primary);
        box-shadow: 0 1px 3px var(--audio-thumb-shadow);
        cursor: pointer;
        transition: transform 0.15s;
    }

    &:hover::-webkit-slider-thumb {
        transform: scale(1.1);
    }

    &::-moz-range-thumb {
        width: 12px;
        height: 12px;
        border: 2px solid var(--audio-primary);
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 1px 3px var(--audio-thumb-shadow);
        cursor: pointer;
    }

    &::-moz-range-track {
        height: 3px;
        background: var(--audio-volume-track-bg);
        border-radius: 99px;
    }

    &::-moz-range-progress {
        height: 3px;
        background: var(--audio-track);
        border-radius: 99px;
    }
}

.preview-file-audio-hidden {
    display: none;
}
</style>

README.md

# PreviewFile 文件预览组件

统一预览图片、视频、音频、PDF、Office 文档（Word / PPT / Excel）的 Vue 3 组件。
预览ppt | pptx | doc | docx | xls | xlsx需要安装插件 与 部署 onlyOffice服务
前端插件： npm i "@onlyoffice/document-editor-vue": "^1.6.1"
服务部署： <a href="https://api.onlyoffice.com/zh-CN/docs/docs-api/get-started/basic-concepts/">onlyoffice文档</a>

## 快速开始

```vue
<template>
  <PreviewFile :url="url" :type="type" :options="options" />
</template>

<script setup lang="ts">
import { reactive, toRefs } from 'vue'
import PreviewFile from './previewFile/index.vue'
import type { PreviewFileState } from './previewFile/type'

const preview = reactive<PreviewFileState>({
  type: 'image',
  url: 'https://example.com/photo.jpg',
  options: { fit: 'contain' },
})

const { url, type, options } = toRefs(preview)
</script>

Props

参数	类型	必填	说明
`type`	`'image' \| 'video' \| 'audio' \| 'pdf' \| 'word'`	是	预览类型
`url`	`string`	是	文件地址（远程 URL 或 `blob:` URL）
`options`	见下方各类型说明	否（`word` 必填）	类型相关配置

组件容器默认宽高为 100%，可通过 options.width / options.height 覆盖。

各 type 说明与 options

公共 options（所有类型可选）

字段	类型	默认值	说明
`width`	`string`	`'100%'`	组件宽度
`height`	`string`	`'100%'`	组件高度

`image` — 图片

使用 <img> 渲染，直接传入图片 URL。

字段	类型	默认值	说明
`fit`	`'contain' \| 'cover'`	`'contain'`	`object-fit` 适应方式

<PreviewFile
  type="image"
  url="https://example.com/photo.jpg"
  :options="{ fit: 'contain', width: '800px', height: '600px' }"
  @imageLoad="onLoad"
  @imageError="onError"
/>

`video` — 视频

使用原生 <video> 播放，已禁用下载、倍速、远程播放、画中画、全屏等控件。

字段	类型	默认值	说明
`autoplay`	`boolean`	`false`	是否自动播放
`muted`	`boolean`	`true`	是否静音（自动播放时建议保持 `true`）

<PreviewFile
  type="video"
  url="https://example.com/video.mp4"
  :options="{ autoplay: false, muted: true }"
  @videoCanplay="onCanplay"
  @videoError="onError"
/>

通过 ref 可调用 videoMethods.play() / videoMethods.pause()。

`audio` — 音频

自定义播放器，基于 Web Audio API 实现频谱可视化，并提供进度条、音量控制。

字段	类型	默认值	说明
`autoplay`	`boolean`	`false`	是否自动播放
`muted`	`boolean`	`true`	是否静音
`themeColor`	`string`	`'#409eff'`	主题色（控制按钮、频谱、进度条等）

themeColor 会自动推导出一组 CSS 变量（主色、浅色、轨道、面板背景等），用于播放器 UI 与频谱渐变。

<PreviewFile
  type="audio"
  url="https://example.com/music.mp3"
  :options="{ themeColor: '#67c23a' }"
  @audioCanplay="onCanplay"
  @audioError="onError"
/>

通过 ref 可调用 audioMethods.play() / audioMethods.pause()。

`pdf` — PDF

使用 <iframe> 内嵌浏览器 PDF 查看器。

字段	类型	默认值	说明
`showToolbar`	`boolean`	`undefined`（显示工具栏）	设为 `false` 时隐藏工具栏和导航面板

<PreviewFile
  type="pdf"
  :url="pdfBlobUrl"
  :options="{ showToolbar: false }"
/>

PDF 必须使用 Blob URL

OSS 等存储返回的 PDF 常带 Content-Disposition: attachment 响应头，浏览器会直接触发下载而非内嵌预览。需要先用 fetch 拿到 Blob，再 URL.createObjectURL 转成 blob: 地址传给组件。

项目内已提供工具函数 fetchBlobUrl：

import { onBeforeUnmount, ref } from 'vue'
import { fetchBlobUrl } from './previewFile/utils'

const pdfBlobUrl = ref('')

// 加载 PDF
pdfBlobUrl.value = await fetchBlobUrl(
  'https://your-oss.com/file.pdf',
  '/api' // 本地开发时代理前缀，见下方「工具函数」
)

// 组件卸载时释放内存
onBeforeUnmount(() => {
  if (pdfBlobUrl.value.startsWith('blob:')) {
    URL.revokeObjectURL(pdfBlobUrl.value)
  }
})

也可手动处理：

const response = await fetch(fileUrl)
const blob = await response.blob()
const blobUrl = URL.createObjectURL(blob)
// 将 blobUrl 传给 PreviewFile 的 url

showToolbar: false 时，组件会自动在 URL 后拼接 #toolbar=0&navpanes=0（若 URL 已含 # 则不再拼接）。

`word` — Office 文档（OnlyOffice）

通过 OnlyOffice Document Editor 只读预览 Word / PPT / Excel。编辑器以 mode: 'edit' 加载，并通过 permissions.edit: false 等权限限制为只读，兼容性优于纯 view 模式。

字段	类型	必填	说明
`onlyOfficeUrl`	`string`	是	OnlyOffice Document Server 地址
`onlyType`	`'doc' \| 'docx' \| 'ppt' \| 'pptx' \| 'xls' \| 'xlsx'`	是	文件类型，决定编辑器模式

onlyType 与 OnlyOffice documentType 映射：

onlyType	documentType	说明
`doc` / `docx`	`word`	Word 文档
`ppt` / `pptx`	`slide`	演示文稿
`xls` / `xlsx`	`cell`	电子表格

<PreviewFile
  type="word"
  url="https://example.com/demo.pptx"
  :options="{
    onlyOfficeUrl: 'http://your-onlyoffice-server:5006',
    onlyType: 'pptx',
    width: '100%',
    height: '600px',
  }"
  @onlyOfficeError="onOnlyOfficeError"
/>

url 必须是 OnlyOffice 服务端能访问到的文件地址（公网或内网可达）。

插槽（Slots）

每种预览类型均提供具名插槽，可在保留外层容器样式的前提下自定义内部渲染内容。未提供插槽时使用内置默认模板。

插槽名	说明
`image`	自定义图片预览区域
`video`	自定义视频播放器
`audio`	自定义音频播放器
`pdf`	自定义 PDF iframe
`word`	自定义 OnlyOffice 编辑器
`default`	不支持的 `type` 时的占位内容（默认文案：「文件类型不支持」）

<PreviewFile type="image" :url="imageUrl">
  <template #image>
    <img :src="imageUrl" alt="自定义图片" style="max-width: 100%" />
  </template>
</PreviewFile>

事件

事件名	触发时机	参数
`imageLoad`	图片加载完成	—
`imageError`	图片加载失败	`Event`
`videoCanplay`	视频可播放	—
`videoError`	视频加载失败	`Event`
`audioCanplay`	音频可播放	—
`audioError`	音频加载失败	`Event`
`onlyOfficeError`	OnlyOffice 编辑器报错	`Event`

模板中可使用 camelCase（@imageLoad）或 kebab-case（@image-load），二者等价。

暴露方法（defineExpose）

通过 ref 获取组件实例后可调用：

名称	说明
`videoMethods.play()`	播放视频
`videoMethods.pause()`	暂停视频
`audioMethods.play()`	播放音频
`audioMethods.pause()`	暂停音频
`copyUrl()`	复制当前 `url` 到剪贴板
`imageEl`	图片 DOM 引用
`videoEl`	视频 DOM 引用
`audioEl`	音频子组件（`audio.vue`）实例引用

<script setup lang="ts">
import { useTemplateRef } from 'vue'

const previewRef = useTemplateRef('previewRef')

const play = () => previewRef.value?.videoMethods.play()
</script>

<template>
  <PreviewFile ref="previewRef" type="video" :url="videoUrl" />
</template>

TypeScript 类型

type 要能切换五种类型，options 只提示当前 type 对应的字段——父组件用 { url, type, options } 判别联合，这是 TypeScript 唯一能联动校验的写法。

推荐写法：`reactive` + `toRefs`

状态用 PreviewFileState 对象存（type 与 options 联动），模板仍分开传参：

<template>
  <PreviewFile :url="url" :type="type" :options="options" />
</template>

<script setup lang="ts">
import { reactive, toRefs } from 'vue'
import PreviewFile from './previewFile/index.vue'
import type { PreviewFileState } from './previewFile/type'
import { setPreviewFile } from './previewFile/type'

const preview = reactive<PreviewFileState>({
  type: 'audio',
  url: 'https://example.com/music.mp3',
  options: { themeColor: '#000000' },  // ✅ 只校验 AudioOptions
})

const { url, type, options } = toRefs(preview)

// 切换：通过 preview 整体赋值，type 与 options 严格联动
setPreviewFile(preview, {
  type: 'video',
  url: 'https://example.com/video.mp4',
  options: { autoplay: true, muted: false },  // ✅ VideoOptions
})

setPreviewFile(preview, {
  type: 'pdf',
  url: pdfBlobUrl,
  options: { showToolbar: false },  // ✅ PdfOptions
})

setPreviewFile(preview, {
  type: 'word',
  url: 'https://example.com/demo.ppt',
  options: {
    onlyOfficeUrl: 'http://10.45.164.9:5006',
    onlyType: 'ppt',
  },  // ✅ WordOptions
})

// ❌ type 为 word 时 options 不能写 themeColor
setPreviewFile(preview, {
  type: 'word',
  url: '...',
  options: { themeColor: '#000' },
})
</script>

原理： PreviewFileState 是判别联合，type: 'video' 时整包对象的 options 只能是 VideoOptions，写 themeColor 会报错。

修改 options 时，通过 preview 判断 type 收窄：

if (preview.type === 'audio') {
  preview.options  // AudioOptions | undefined
}

各 type 对应的 options 类型

type	options 类型	字段
`image`	`ImageOptions`	`fit?`, `width?`, `height?`
`video`	`VideoOptions`	`autoplay?`, `muted?`, `width?`, `height?`
`audio`	`AudioOptions`	`autoplay?`, `muted?`, `themeColor?`, `width?`, `height?`
`pdf`	`PdfOptions`	`showToolbar?`, `width?`, `height?`
`word`	`WordOptions`（必填）	`onlyOfficeUrl`, `onlyType`, `width?`, `height?`

为什么不建议三个独立 ref

url / type / options 各写一个 ref() 时，TypeScript 无法根据 type 收窄 options。请用 reactive<PreviewFileState> 存状态，再 toRefs 拆开给模板。

常用类型导入

import type {
  PreviewFileState,
  PreviewFileType,
  PreviewFileStateByType,
  PreviewFileBindProps,
  PreviewFileEmits,
  ImageOptions,
  VideoOptions,
  AudioOptions,
  PdfOptions,
  WordOptions,
  AudioProps,
  AudioTheme,
} from './type'

import { setPreviewFile } from './type'

文件结构

previewFile/
├── index.vue    # 主组件入口
├── audio.vue    # 音频播放器子组件（频谱可视化 + 控制栏）
├── type.ts      # TypeScript 类型定义
├── utils.ts     # 代理 / Blob URL 工具
└── README.md

依赖

依赖	用途
`vue` ^3.5	组件框架
`@onlyoffice/document-editor-vue`	`word` 类型 Office 文档预览
`sass`	组件样式（scoped SCSS）

word 类型还需单独部署 OnlyOffice Document Server，并将服务地址传入 options.onlyOfficeUrl。

加入AMD AI开发者计划！

免费领 150 小时云算力，进群参与显卡、AI PC 幸运抽奖

更多推荐

Qwen3.8-Flash-Next 本地部署完全指南：125B MoE 6B 激活，训练成本仅前代 1/9

AMD开发者中国社区

别再给AI工具充会员了！2026本地搭建全栈AI工作台，全套代码开箱即用

针对市面上 AI 工具订阅成本高、云端上传敏感数据存在泄密风险，以及多数开发者仅停留在调用第三方 API 的现状，本文带来一套可离线运行的个人 AI 全栈工作台完整实战教程。教程基于 Python 开源技术栈，仅需 8G 显存即可部署，全程附带可直接运行的代码，依次落地四大核心能力：基于 vLLM 搭建兼容 OpenAI 协议的本地大模型服务，结合分页注意力与投机解码，推理速度相比原生 Trans