# 新建 Vue 3 項(xiàng)目（可選）
npm create vue@latest my-doc-preview
cd my-doc-preview

# 核心庫（必裝）
npm install vue-office

# PDF 預(yù)覽組件
npm install vue-office-pdf

# Word（.docx）預(yù)覽組件
npm install vue-office-word

# Excel（.xlsx/.xls）預(yù)覽組件
npm install vue-office-excel

<template>
  <div class="preview-container">
    <!-- Word 文檔預(yù)覽 -->
    <vue-office-word :src="docSrc" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
// 引入 Word 預(yù)覽組件
import VueOfficeWord from 'vue-office-word';

// 文檔源（本地/遠(yuǎn)程 URL 或二進(jìn)制流）
const docSrc = ref('/sample.docx'); // 示例：本地 public 目錄下的文件
// 或遠(yuǎn)程 URL：'https://example.com/remote.docx'
// 或二進(jìn)制流（需后端配合返回 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 或二進(jìn)制流
const props = defineProps({
  src: {
    type: [String, Object], // 字符串（URL/Blob URL）或二進(jìn)制流（Blob）
    required: true
  }
});

// 自動(dòng)識(shí)別文件類型（根據(jù) URL 后綴或二進(jìn)制流類型）
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>動(dòng)態(tài)文檔預(yù)覽</h2>
    <document-preview :src="currentSrc" />
    <!-- 切換文檔示例 -->
    <div class="controls">
      <button @click="currentSrc = '/sample.docx'">預(yù)覽 Word</button>
      <button @click="currentSrc = '/sample.xlsx'">預(yù)覽 Excel</button>
      <button @click="currentSrc = '/sample.pdf'">預(yù)覽 PDF</button>
    </div>
  </div>
</template>

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

const currentSrc = ref('/sample.docx'); // 默認(rèn)預(yù)覽 Word
</script>

<template>
  <div>
    <button @click="loadDocument">加載遠(yuǎn)程文檔</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('');

// 加載遠(yuǎn)程文檔（以 PDF 為例）
const loadDocument = async () => {
  try {
    const response = await axios.get('/api/document/pdf', {
      responseType: 'blob', // 關(guān)鍵：指定響應(yīng)類型為 blob
    });
    // 將二進(jìn)制流轉(zhuǎn)換為 Blob URL
    docSrc.value = URL.createObjectURL(response.data);
  } catch (error) {
    console.error('加載失敗:', error);
  }
};
</script>

/* 全局覆蓋 Excel 預(yù)覽樣式 */
.vue-office-excel .excel-table td {
  padding: 12px 8px;
  font-size: 14px;
}