Vue 纯前端 Office 预览实战:Word / Excel / PPT / PDF 方案选型

# 按格式按需安装（Vue 3 项目）npm install @vue-office/docx vue-deminpm install @vue-office/excel vue-deminpm install @vue-office/pdf vue-deminpm install @vue-office/pptx vue-demi

/** 根据后缀动态渲染 docx / excel / pdf / pptx */<template>  <div class="office-preview" v-loading="loading">    <VueOfficeDocx  v-if="type==='docx'"  :src="buffer" @rendered="onRendered" @error="onError" />    <VueOfficeExcel v-if="type==='xlsx'"  :src="buffer" @rendered="onRendered" @error="onError" />    <VueOfficePdf   v-if="type==='pdf'"   :src="buffer" @rendered="onRendered" @error="onError" />    <VueOfficePptx  v-if="type==='pptx'"  :src="buffer" @rendered="onRendered" @error="onError" />  </div></template><script setup>import { ref, watch } from 'vue'import VueOfficeDocx from '@vue-office/docx'import VueOfficeExcel from '@vue-office/excel'import VueOfficePdf from '@vue-office/pdf'import VueOfficePptx from '@vue-office/pptx'import '@vue-office/docx/lib/index.css'import '@vue-office/excel/lib/index.css'const props = defineProps({ fileUrl: String, fileType: String })const buffer = ref(null)const loading = ref(false)const type = ref('')/** 拉取远程文件为 ArrayBuffer，供 vue-office 解析 */async function loadFile(url) {  loading.value = true  try {    const res = await fetch(url, { credentials: 'include' })    buffer.value = await res.arrayBuffer()    type.value = props.fileType  } finally {    loading.value = false  }}function onRendered() { /* 示例：预览完成，可关闭 loading */ }function onError(e) { console.error('预览失败', e) }watch(() => props.fileUrl, (url) => url && loadFile(url), { immediate: true })</script>

/** 将用户选择的 File 转为 ArrayBuffer 并识别后缀 */function handleUpload(file) {  const ext = file.name.split('.').pop()?.toLowerCase()  const reader = new FileReader()  reader.onload = () => {    buffer.value = reader.result    type.value = ext === 'doc' ? 'docx' : ext  // .doc 需后端转 docx  }  reader.readAsArrayBuffer(file)}