Vue3 + Capacitor项目无法预览Docx文件，求可行解决方案

直接上可行方案：Web端用mammoth.js把Docx转成HTML渲染，移动端借助Capacitor调用系统原生预览能力，完美解决跨平台兼容性问题，之前踩过的坑都给你填上。

步骤拆解 #

1. 安装依赖 #

npm install mammoth @capacitor/filesystem @capacitor/file-opener

2. 重构组件代码 #

<script setup>
import { defineProps, onBeforeMount, ref } from 'vue';
import PDF from 'pdf-vue3';
import mammoth from 'mammoth';
import { Filesystem, Directory } from '@capacitor/filesystem';
import { Capacitor } from '@capacitor/core';

const props = defineProps({
  pdfurl: String
});

const isPdf = ref(false);
const isWord = ref(false);
const wordHtml = ref('');
const isLoading = ref(false);

onBeforeMount(() => {
  if (props.pdfurl?.endsWith('.pdf')) isPdf.value = true;
  if (props.pdfurl?.endsWith('.docx')) isWord.value = true;
});

// 处理Docx预览逻辑
const loadDocx = async () => {
  isLoading.value = true;
  try {
    if (Capacitor.isNativePlatform()) {
      // 移动端：下载到缓存目录，调用系统原生预览
      const response = await fetch(props.pdfurl);
      const blob = await response.blob();
      const base64 = await blobToBase64(blob);
      
      const savedFile = await Filesystem.writeFile({
        path: `temp_doc_${Date.now()}.docx`,
        data: base64,
        directory: Directory.Cache
      });
      
      // 调用系统文件预览
      const { FileOpener } = await import('@capacitor/file-opener');
      await FileOpener.open({
        filePath: savedFile.uri,
        contentType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
      });
    } else {
      // Web端：用mammoth转HTML渲染
      const response = await fetch(props.pdfurl);
      const arrayBuffer = await response.arrayBuffer();
      const result = await mammoth.convertToHtml({ arrayBuffer });
      wordHtml.value = result.value;
    }
  } catch (error) {
    console.error('预览失败:', error);
    wordHtml.value = '文件预览失败，请检查链接是否有效';
  } finally {
    isLoading.value = false;
  }
};

// Blob转Base64工具函数
const blobToBase64 = (blob) => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onloadend = () => resolve(reader.result.split(',')[1]);
    reader.onerror = reject;
    reader.readAsDataURL(blob);
  });
};
</script>

<template>
  <PDF v-if="isPdf" :src="pdfurl" />
  
  <div v-if="isWord">
    <button v-if="!wordHtml && !isLoading" @click="loadDocx">点击预览Word文档</button>
    <div v-if="isLoading" class="loading">加载中...</div>
    <div v-if="wordHtml" v-html="wordHtml" class="docx-preview"></div>
  </div>
  
  <div v-else>
    该简历格式不支持预览
  </div>
</template>

<style scoped>
.loading {
  padding: 1rem;
  text-align: center;
}
.docx-preview {
  padding: 1rem;
  line-height: 1.6;
  white-space: pre-wrap;
}
</style>

3. 移动端收尾配置 #

• 同步Capacitor插件到原生项目：

npx cap sync

• Android端：在AndroidManifest.xml里添加权限（Android 13及以下需要）：

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" android:maxSdkVersion="32" />

• iOS端无需额外配置，系统会自动处理文件预览权限。

避坑提醒 #

• Web端：mammoth只能渲染基础格式（文本、图片、列表），复杂样式（比如页眉页脚、特殊表格）会丢失，适合轻量预览场景。
• 移动端：用系统原生预览是最稳定的方案，能完整保留Docx所有格式，比前端渲染靠谱多了。
• 注意文件链接要支持跨域，否则Web端会报CORS错误；如果是本地文件，要确保路径正确。

内容的提问来源于stack exchange，提问作者Damo