Vue实现Word/Excel/PDF文件预览的详细步骤

# 新建 Vue 3 项目（可选）
npm create vue@latest my-doc-preview
cd my-doc-preview

# 核心库（必装）
npm install vue-office

# PDF 预览组件
npm install vue-office-pdf

# Word（.docx）预览组件
npm install vue-office-word

# Excel（.xlsx/.xls）预览组件
npm install vue-office-excel

<template>
  <div class="preview-container">
    <!-- Word 文档预览 -->
    <vue-office-word :src="docSrc" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
// 引入 Word 预览组件
import VueOfficeWord from 'vue-office-word';

// 文档源（本地/远程 URL 或二进制流）
const docSrc = ref('/sample.docx'); // 示例：本地 public 目录下的文件
// 或远程 URL：'https://example.com/remote.docx'
// 或二进制流（需后端配合返回 Blob）：通过接口获取后赋值为 Blob URL
</script>

<style scoped>
.preview-container {
  width: 100%;
  height: 80vh; /* 自定义高度 */
  border: 1px solid #eee;
}
</style>

<template>
  <vue-office-pdf :src="pdfSrc" />
</template>

<script setup>
import VueOfficePdf from 'vue-office-pdf';
const pdfSrc = ref('/sample.pdf');
</script>

<template>
  <vue-office-excel :src="excelSrc" />
</template>

<script setup>
import VueOfficeExcel from 'vue-office-excel';
const excelSrc = ref('/sample.xlsx');
</script>

<template>
  <div class="document-preview">
    <vue-office-pdf v-if="fileType === 'pdf'" :src="src" />
    <vue-office-word v-else-if="fileType === 'docx'" :src="src" />
    <vue-office-excel v-else-if="fileType === 'xlsx'" :src="src" />
    <div v-else class="unsupported">不支持的文件类型：{{ fileType }}</div>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import VueOfficePdf from 'vue-office-pdf';
import VueOfficeWord from 'vue-office-word';
import VueOfficeExcel from 'vue-office-excel';

// 接收文件 URL 或二进制流
const props = defineProps({
  src: {
    type: [String, Object], // 字符串（URL/Blob URL）或二进制流（Blob）
    required: true
  }
});

// 自动识别文件类型（根据 URL 后缀或二进制流类型）
const fileType = computed(() => {
  if (props.src instanceof Blob) {
    return props.src.type.split('/')[1]; // 如 'application/pdf' → 'pdf'
  }
  const ext = props.src.split('.').pop().toLowerCase();
  const map = { pdf: 'pdf', docx: 'docx', xlsx: 'xlsx' };
  return map[ext] || 'unknown';
});
</script>

<style scoped>
.document-preview {
  width: 100%;
  min-height: 500px;
  border: 1px solid #eee;
}
.unsupported {
  padding: 20px;
  text-align: center;
  color: #ff4d4f;
}
</style>

<template>
  <div>
    <h2>动态文档预览</h2>
    <document-preview :src="currentSrc" />
    <!-- 切换文档示例 -->
    <div class="controls">
      <button @click="currentSrc = '/sample.docx'">预览 Word</button>
      <button @click="currentSrc = '/sample.xlsx'">预览 Excel</button>
      <button @click="currentSrc = '/sample.pdf'">预览 PDF</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import DocumentPreview from './DocumentPreview.vue';

const currentSrc = ref('/sample.docx'); // 默认预览 Word
</script>

<template>
  <div>
    <button @click="loadDocument">加载远程文档</button>
    <document-preview :src="docSrc" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';
import DocumentPreview from './DocumentPreview.vue';

const docSrc = ref('');

// 加载远程文档（以 PDF 为例）
const loadDocument = async () => {
  try {
    const response = await axios.get('/api/document/pdf', {
      responseType: 'blob', // 关键：指定响应类型为 blob
    });
    // 将二进制流转换为 Blob URL
    docSrc.value = URL.createObjectURL(response.data);
  } catch (error) {
    console.error('加载失败:', error);
  }
};
</script>

/* 全局覆盖 Excel 预览样式 */
.vue-office-excel .excel-table td {
  padding: 12px 8px;
  font-size: 14px;
}