hxDocs

Appearance

Word 预览组件 ​

上次更新 2025年5月18日星期日 15:3:57 字数 0 字 时长 0 分钟

基本介绍 ​

📝 本组件提供两种 Word 文档预览方案：

方案一：基于 Microsoft Office Online Viewer ​

  • ✅ 支持 .docx 格式文件在线预览
  • ✅ 无需本地安装 Office 软件
  • ✅ 支持文档内容查看与缩放
  • ✅ 保持基本文档格式
  • ✅ 支持跨平台使用

使用示例 ​


查看代码
WordPreviewOffice.vue
vue
<template>
  <div class="word-preview-container">
    <iframe
      :src="`https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(
        url
      )}`"
      width="100%"
      height="600px"
      frameborder="0"
    ></iframe>
  </div>
</template>

<script setup>
import { watch } from "vue";

const props = defineProps({
  url: {
    type: String,
    required: true,
  },
});

// 监听url变化
watch(
  () => props.url,
  (newUrl) => {
    if (newUrl) {
      // 可以在这里添加一些处理逻辑
    }
  }
);
</script>

<style scoped>
.word-preview-container {
  width: 100%;
  height: 100%;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  overflow: hidden;
}
</style>

注意事项

  1. 仅支持 .docx 格式文件，不支持 .doc 等旧格式
  2. 文档中的部分复杂格式（如特殊字体、复杂表格等）可能无法完全还原
  3. 文档需通过公网可访问的 URL 进行加载

方案二：基于 WPS Web Office ​

  • ✅ 支持 .doc/.docx 格式文件在线预览
  • ✅ 提供更完整的文档格式支持
  • ✅ 支持文档编辑与批注功能
  • ✅ 提供丰富的 API 接口
  • ✅ 支持多人协作

使用示例 ​


查看代码
WordPreviewWPS.vue
vue
<template>
  <div class="word-preview-container">
    <iframe
      :src="`https://wwo.wps.cn/office/view/url?url=${encodeURIComponent(url)}`"
      width="100%"
      height="600px"
      frameborder="0"
    ></iframe>
  </div>
</template>

<script setup>
import { defineProps, watch } from "vue";

const props = defineProps({
  url: {
    type: String,
    required: true,
  },
});

// 监听url变化
watch(
  () => props.url,
  (newUrl) => {
    if (newUrl) {
      // 可以在这里添加一些处理逻辑
    }
  }
);
</script>

<style scoped>
.word-preview-container {
  width: 100%;
  height: 100%;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  overflow: hidden;
}
</style>

注意事项

  1. 文档需通过公网可访问的 URL 进行加载
  2. 部分浏览器可能需要启用第三方 Cookie 才能正常使用
  3. 文档编辑功能需要 WPS 企业版授权

方案三：基于 Mammoth.js 实现 ​

  • ✅ 轻量级解决方案，无需依赖第三方服务
  • ✅ 将 Word 文档转换为 HTML 进行展示
  • ✅ 支持自定义样式和内容处理
  • ✅ 适合简单的文档展示需求

使用示例 ​


查看代码
WordPreviewMammoth.vue
vue
<template>
  <div class="word-preview-container">
    <div ref="previewContent" class="mammoth-preview-content"></div>
  </div>
</template>

<script setup>
import mammoth from "mammoth";
import { onMounted, ref, watch } from "vue";

const props = defineProps({
  url: {
    type: String,
    required: true,
  },
});

const previewContent = ref(null);

// 加载并解析Word文档
const loadDocument = async (url) => {
  try {
    const response = await fetch(url);
    const arrayBuffer = await response.arrayBuffer();
    const result = await mammoth.convertToHtml({ arrayBuffer });
    previewContent.value.innerHTML = result.value;
  } catch (error) {
    console.error("文档加载失败:", error);
    previewContent.value.innerHTML = "<p>文档加载失败，请检查文件地址</p>";
  }
};

// 监听url变化
watch(
  () => props.url,
  (newUrl) => {
    if (newUrl) {
      loadDocument(newUrl);
    }
  }
);

// 组件挂载时加载文档
onMounted(() => {
  if (props.url) {
    loadDocument(props.url);
  }
});
</script>

<style scoped>
.word-preview-container {
  width: 100%;
  height: 100%;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  overflow: auto;
  padding: 16px;
}

.mammoth-preview-content {
  line-height: 1.6;
}

.mammoth-preview-content h1,
.mammoth-preview-content h2,
.mammoth-preview-content h3 {
  margin: 1.2em 0 0.6em;
}

.mammoth-preview-content p {
  margin: 0.8em 0;
}

.mammoth-preview-content table {
  border-collapse: collapse;
  margin: 1em 0;
}

.mammoth-preview-content td,
.mammoth-preview-content th {
  border: 1px solid #ddd;
  padding: 8px;
}
</style>

注意事项

  1. 仅支持 .docx 格式文件
  2. 复杂格式（如表格、图片等）可能无法完美转换
  3. 文档需通过公网可访问的 URL 进行加载
  4. 不支持文档编辑功能

方案四：基于 docx-preview 实现 ​

  • ✅ 纯前端解决方案，无需后端支持
  • ✅ 支持 .docx 文件直接预览
  • ✅ 保留文档原始格式和样式
  • ✅ 支持缩放、分页等查看功能

使用示例 ​


查看代码
WordPreviewDocx.vue
vue
<template>
  <div class="word-preview-container">
    <div ref="previewContainer" class="docx-preview-content"></div>
  </div>
</template>

<script setup>
import { renderAsync } from "docx-preview";
import { defineProps, onMounted, ref, watch } from "vue";

const props = defineProps({
  url: {
    type: String,
    required: true,
  },
});

const previewContainer = ref(null);

// 加载并渲染Word文档
const loadDocument = async (url) => {
  try {
    // 处理线上路径
    const finalUrl = url.startsWith("http")
      ? url
      : `${window.location.origin}${url}`;
    const response = await fetch(finalUrl);
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const blob = await response.blob();
    await renderAsync(blob, previewContainer.value);
  } catch (error) {
    console.error("文档加载失败:", error);
    if (previewContainer.value) {
      previewContainer.value.innerHTML = "<p>文档加载失败，请检查文件地址</p>";
    }
  }
};

// 监听url变化
watch(
  () => props.url,
  (newUrl) => {
    if (newUrl) {
      loadDocument(newUrl);
    }
  },
  { immediate: true }
);

// 组件挂载时加载文档
onMounted(() => {
  if (props.url) {
    loadDocument(props.url);
  }
});
</script>

<style scoped>
.word-preview-container {
  width: 100%;
  height: 100%;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  overflow: auto;
  padding: 16px;
}

.docx-preview-content {
  line-height: 1.6;
  font-family: Arial, sans-serif;
}

.docx-preview-content p {
  margin: 0.8em 0;
}

.docx-preview-content table {
  border-collapse: collapse;
  margin: 1em 0;
}

.docx-preview-content td,
.docx-preview-content th {
  border: 1px solid #ddd;
  padding: 8px;
}
</style>

注意事项

  1. 仅支持 .docx 格式文件
  2. 文档需通过公网可访问的 URL 进行加载
  3. 不支持文档编辑功能
  4. 部分复杂格式可能渲染效果不理想

上次更新:

关注公众号

Copyright © 2019-present Haixin Yang