如何预览常见格式word、excel、ppt、图片等格式的文档

什么是 kkFileView / kkview

kk在线网址

• kkFileView 是一个基于 Spring Boot 的开源"文档 / 文件在线预览"中间件 / 服务。
• 它支持多种常见的文件格式，如 Office 文档（doc, xls, ppt 等）、PDF、图片、压缩包、音视频、CAD、markdown / 代码文件等。 ([kkFileView][2])
• 它暴露 REST 接口 + 提供前端接入方式，通过 Web 前端发起预览请求，并用 iframe、JS 等方式在浏览器中展示文件内容。

所以它本质上就是为 Web 端（浏览器）提供文件预览功能的。

---

如何在 Web 端接入 / 使用

以下是典型的接入流程 &注意事项：

1. 部署 kkFileView 服务

   • 你需要在后端部署 kkFileView，可能是独立服务或作为微服务存在。
   • 支持 Docker 部署，也支持直接启动 jar 包
   • 该服务内部可能依赖 LibreOffice / OpenOffice / 转换工具来做文档格式转换。

2. 暴露预览接口 / URL

   • kkFileView 提供一个预览接口（如 /onlinePreview?url=...），前端通过这个接口向服务请求预览。
   • 通常前端会把目标文件的 URL 或文件流地址做 base64 编码，然后传给 kkFileView 服务。

3. 前端嵌入预览展示

   • 在前端页面中常见做法是使用 <iframe> 显示 kkFileView 返回的内容 / 预览视图。
   • 或者通过 JS 动态打开一个新窗口或弹框加载预览 URL。
   • 对于 Office / PDF 等文件，kkFileView 内部可能将其转换为图片 / PDF / HTML + Canvas 等方式，以便在浏览器中渲染。

4. 配置 / 限制 /兼容性

   • 在 Linux 环境下，可能需要安装字体、配置字体路径，以防中文或特殊字符乱码。
   • 文件格式支持有一定范围，不是所有格式都能完美渲染，复杂格式可能有兼容问题。
   • 性能、并发、缓存、转换时延等是需要注意的点。

下面按"实现复杂度"实现有以下：

---

✅ 一、调用 kkFileView，使用iframe展示

1️⃣ 封装通用预览组件

<template>
  <div class="file-preview">
    <iframe
      v-if="previewUrl && useIframe"
      :src="previewUrl"
      frameborder="0"
      width="100%"
      height="100%"
    ></iframe>

    <div v-else-if="fileType === 'pdf'" class="pdf-viewer">
      <iframe :src="previewUrl" width="100%" height="100%" />
    </div>

    <div v-else-if="fileType === 'image'">
      <img :src="previewUrl" alt="预览图片" class="object-contain w-full h-full" />
    </div>

    <div v-else>
      <p>暂不支持该文件格式预览</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";

interface Props {
  fileUrl: string;
  useIframe?: boolean;
}

const props = defineProps<Props>();
const previewUrl = ref("");
const fileType = ref("");

watch(
  () => props.fileUrl,
  async (url) => {
    if (!url) return;
    // 请求后端获取 kkFileView 生成的预览链接
    const res = await fetch(`/api/preview?fileUrl=${encodeURIComponent(url)}`);
    const data = await res.json();
    previewUrl.value = data.previewUrl;
    fileType.value = data.fileType;
  },
  { immediate: true }
);
</script>

<style scoped>
.file-preview {
  width: 100%;
  height: 100vh;
  background: #f8f9fa;
}
</style>

🔹说明：

/api/preview 是你后端包装的 kkFileView 接口。

这样前端只需传入文件 URL 即可。

2️⃣ 后端（示例逻辑）

后端暴露 /api/preview，拼接 kkFileView 的接口：

// Node.js / Java 示例
app.get('/api/preview', (req, res) => {
  const { fileUrl } = req.query;
  const kkUrl = `http://kkfileview-server:8012/onlinePreview?url=${encodeURIComponent(fileUrl)}`;
  res.json({
    previewUrl: kkUrl,
    fileType: getFileType(fileUrl)
  });
});

✅ 二、调用 kkFileView，但自定义前端展示

kkFileView 的本质是：

后端接收文件 → 转换成 HTML / 图片 / PDF → 输出可预览的 URL。

因此你可以：

1. 后端调用 kkFileView 的转换接口（如 /file/preview）；
2. 自己拿到转换后的静态资源（HTML / 图片 / PDF）；
3. 前端直接渲染这些资源，而不是 iframe。

举例：

// 前端请求后端接口
fetch('/api/file/preview?fileUrl=' + encodeURIComponent(fileUrl))
  .then(res => res.json())
  .then(data => {
    // data 里可能是 PDF URL 或 HTML URL
    if (data.type === 'pdf') {
      // 用 PDF.js 渲染
      renderPdf(data.previewUrl);
    } else if (data.type === 'imageList') {
      // 图片形式：循环展示
      data.images.forEach(src => {
        const img = document.createElement('img');
        img.src = src;
        document.body.appendChild(img);
      });
    }
  });

这种方式不依赖 <iframe>，可以完全由你掌控前端样式、交互和懒加载逻辑。

👉 缺点：需要你了解 kkFileView 的具体输出格式和文件类型支持。

---

✅ 三、直接使用前端文件预览库（不依赖 kkFileView）

如果你只是想"在网页上预览多种文件"，其实现在有一些成熟的前端方案：

文件类型	前端方案	说明
PDF	PDF.js	Mozilla 出品，可自定义 UI、分页、搜索等。
Office (doc/xls/ppt)	OnlyOffice Docs / Web Office	OnlyOffice 支持预览和编辑，可自建服务。
图片/音视频	<img>, <video>, <audio>	原生标签即可。
Markdown / Code	marked.js + highlight.js	渲染 md / 代码文件。
压缩包	JSZip	可浏览 zip 内容树。

👉 如果你的场景是"前端项目中多格式预览"，可以用一个统一的组件封装不同的文件类型。

---

✅ 四、混合方案（kkFileView + 前端库）

这种方案结合了两者的优点：

• kkFileView 负责 后端文件格式转换（比如把 docx 转成 pdf / 图片）；
• 前端用 PDF.js 或自定义 viewer 渲染内容，样式、交互可控。

举例：

const kkPreviewUrl = '/onlinePreview?url=' + encodeURIComponent(fileUrl);
fetch(kkPreviewUrl)
  .then(res => res.json())
  .then(({ previewFileUrl, fileType }) => {
    if (fileType === 'pdf') {
      renderPdf(previewFileUrl); // 使用 pdf.js
    } else if (fileType === 'image') {
      renderImages(previewFileUrl);
    }
  });

这种方式已经被一些企业内部系统采用，比如"文档中心"、"OA 系统"等。

---

✅ 五、嵌入 WebAssembly 引擎（高级玩法）

如果你需要在浏览器本地解析文档，可以使用 WASM 版本的渲染库，比如：

• PDFium / MuPDF WASM：本地解析 PDF；
• docxjs / xlsx-populate：在浏览器端解析 Word/Excel；
• Aspose.Words / Cells for JavaScript（商业库）：支持 doc/xls/ppt → HTML；
• 甚至有用 LibreOffice + WebAssembly 做纯前端预览的方案（实验性）。

这种方式不依赖服务器转换，安全性高，但初始加载体积较大。

---

总结推荐 💡

目标	推荐方式
想快速集成、少写代码	✅ 用 kkFileView + iframe（方式①）
想要定制交互 / 样式	✅ kkFileView 转换 + 自己渲染（方式②）
想完全前端预览	✅ PDF.js / OnlyOffice / docx.js 等（方式③）
对安全性要求高 / 不想上传文件	✅ WebAssembly 渲染（方式⑤）

说明：

1、后端要安装字体，不然doc格式的文档展示乱码；

2、配置文件中baseurl要写一下，不然返回的地址可能是http的，而不是https。