微软在线预览把我坑了三次,最后我把 Office 渲染搬回了前端

https://view.officeapps.live.com/op/embed.aspx?src=<encodeURIComponent(fileUrl)>

pnpm add @vue-office/docx @vue-office/excel @vue-office/pptx

typeViewerKind = "pdf" | "docx" | "excel" | "pptx" | "office" | "image" | "text" | "unsupported";const LOCAL_OFFICE: ViewerKind[] = ["docx", "excel", "pptx"]; // 本地渲染const LEGACY_OFFICE = ["doc", "ppt"]; // 97-2003 老格式，无前端解析库const viewerKind = computed<ViewerKind>(() => {  consttype = fileType.value;  if (type === "pdf") return"pdf";  if (type === "docx") return"docx";  if (type === "xls" || type === "xlsx") return"excel";  if (type === "pptx") return"pptx";  if (LEGACY_OFFICE.includes(type)) return"office";  // ... image / text / unsupported});

// 本地渲染失败（chunk 加载 / 文件拉取 / 解析）时自动降级在线预览const localRenderFailed = ref(false);watch(encodedUrl, () => (localRenderFailed.value = false)); // 换文件时复位const fallbackToOffice = (e?: unknown) => {  if (e) console.error("[knowledgeBase/preview] 本地渲染失败，降级在线预览：", e);   localRenderFailed.value = true; };// 实际生效的预览方式：仅本地渲染类会降级const effectiveKind = computed<ViewerKind>(() =>   localRenderFailed.value && LOCAL_OFFICE.includes(viewerKind.value) ? "office" : viewerKind.value );

const lazyViewer = (loader: () => Promise<{ default: Component }>) =>  defineAsyncComponent(async () => {    try {      return (awaitloader()).default;     } catch (e) {      fallbackToOffice(e);      return () => null; // 返回空渲染组件，模板随 effectiveKind 切走     }   });const VueOfficeDocx = lazyViewer(() => import("@vue-office/docx/lib/index.css").then(() => import("@vue-office/docx")));const VueOfficeExcel = lazyViewer(() => import("@vue-office/excel/lib/index.css").then(() => import("@vue-office/excel")));const VueOfficePptx = lazyViewer(() => import("@vue-office/pptx")); // pptx 无独立样式文件

<VueOfficeDocxv-if="effectiveKind === 'docx'"class="kb-office-local":src="encodedUrl"@rendered="stopLoading"@error="fallbackToOffice"/><VueOfficeExcelv-else-if="effectiveKind === 'excel'"class="kb-office-local":src="encodedUrl"@rendered="stopLoading"@error="fallbackToOffice"/><VueOfficePptxv-else-if="effectiveKind === 'pptx'"class="kb-office-local":src="encodedUrl"@rendered="stopLoading"@error="fallbackToOffice"/><!-- doc / ppt 与降级路径：维持原在线预览 --><iframev-else-if="effectiveKind === 'office'"class="kb-file-frame":src="officeUrl"@load="stopLoading"@error="stopLoading"></iframe>

.kb-office-local {  width: 100%;  height: 72vh;   // 固定高度必须给：Excel 的表格画布按容器高度初始化，无高度会渲染成 0  overflow: auto; // docx/pptx 长内容在容器内滚动  background: #ffffff;  border-radius: 10px; }

// docx-preview 仅在文档带 pgMar 时写 padding 内联样式，// 故本条只对缺失页边距的文档生效（正常文档的内联优先级更高）.kb-office-local :deep(.docx-wrapper > section.docx) {  padding: 72pt90pt; // Word 默认页边距：上下 2.54cm，左右 3.18cm}

if (LOCAL_OFFICE.includes(effectiveKind.value)) {   console.info(`[knowledgeBase/preview] ${fileType.value} → vue-office 前端本地渲染`); } elseif (effectiveKind.value === "office") {  const reason = LOCAL_OFFICE.includes(viewerKind.value) ? "本地渲染失败降级" : "97-2003 老格式无前端解析库";   console.info(`[knowledgeBase/preview] ${fileType.value} → 微软在线预览（${reason}）`); }