如何预览常见格式word、excel、ppt、图片等格式的文档
什么是 kkFileView / kkview
kk在线网址
- kkFileView 是一个基于 Spring Boot 的开源“文档 / 文件在线预览”中间件 / 服务。
- 它支持多种常见的文件格式，如 Office 文档（doc, xls, ppt 等）、PDF、图片、压缩包、音视频、CAD、markdown / 代码文件等。 ([kkFileView][2])
- 它暴露 REST 接口 + 提供前端接入方式，通过 Web 前端发起预览请求，并用 iframe、JS 等方式在浏览器中展示文件内容。
所以它本质上就是为 Web 端（浏览器）提供文件预览功能的。
如何在 Web 端接入 / 使用
以下是典型的接入流程 &注意事项：
-
部署 kkFileView 服务
- 你需要在后端部署 kkFileView，可能是独立服务或作为微服务存在。
- 支持 Docker 部署，也支持直接启动 jar 包
- 该服务内部可能依赖 LibreOffice / OpenOffice / 转换工具来做文档格式转换。
-
暴露预览接口 / URL
- kkFileView 提供一个预览接口（如
/onlinePreview?url=...），前端通过这个接口向服务请求预览。 - 通常前端会把目标文件的 URL 或文件流地址做 base64 编码，然后传给 kkFileView 服务。
- kkFileView 提供一个预览接口（如
-
前端嵌入预览展示
- 在前端页面中常见做法是使用
<iframe>显示 kkFileView 返回的内容 / 预览视图。 - 或者通过 JS 动态打开一个新窗口或弹框加载预览 URL。
- 对于 Office / PDF 等文件，kkFileView 内部可能将其转换为图片 / PDF / HTML + Canvas 等方式，以便在浏览器中渲染。
- 在前端页面中常见做法是使用
-
配置 / 限制 /兼容性
- 在 Linux 环境下，可能需要安装字体、配置字体路径，以防中文或特殊字符乱码。
- 文件格式支持有一定范围，不是所有格式都能完美渲染，复杂格式可能有兼容问题。
- 性能、并发、缓存、转换时延等是需要注意的点。
下面按“实现复杂度”实现有以下：
✅ 一、调用 kkFileView，使用iframe展示
1️⃣ 封装通用预览组件
<template><div class="file-preview"><iframev-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。
因此你可以：
- 后端调用 kkFileView 的转换接口（如
/file/preview）； - 自己拿到转换后的静态资源（HTML / 图片 / PDF）；
- 前端直接渲染这些资源，而不是 iframe。
举例：
// 前端请求后端接口
fetch('/api/file/preview?fileUrl=' + encodeURIComponent(fileUrl)).then(res => res.json()).then(data => {// data 里可能是 PDF URL 或 HTML URLif (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.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。