使用vue+kkFileview组件实现各种类型文件预览

关于kkFileView

【参考】：https://kkfileview.keking.cn/zh-cn/docs/home.html

文档在线预览项目解决方案，项目使用流行的spring boot搭建，易上手和部署。万能的文件预览开源项目，基本支持主流文档格式预览

本项目介绍

项目使用Vue获取需要预览的项目文件列表，然后调用kkFileview预览接口实现文档在线预览。通过切换select option选项实现文件预览切换，非常贴近实际业务。

效果图

在这里插入图片描述

kkFileview部署

1、参考官方文档clone代码
2、找到启动类直接运行即可

前端代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>图片预览</title><script src="https://cdn.jsdelivr.net/npm/vue@2"></script><!-- 引入样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><!-- 引入组件库 --><script src="https://unpkg.com/element-ui/lib/index.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/js-base64@3.6.0/base64.min.js"></script><style>body {font-family: Arial, sans-serif;display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;background-color: #f4f4f9;}#app {text-align: center;background: white;padding: 20px;border-radius: 8px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);}img {max-width: 100%;height: auto;border-radius: 8px;}button {margin-top: 15px;padding: 10px 20px;font-size: 16px;color: white;background-color: #007bff;border: none;border-radius: 5px;cursor: pointer;transition: background-color 0.3s;}button:hover {background-color: #0056b3;}.preview iframe{padding:10px;width: 800px;height:600px;}</style>
</head>
<body><div id="app"><h1>图片预览</h1><div class="select-preview-list"><el-select v-model="selected" @change="loadImage"><el-option v-for="(item, index) in fileList" :key="index":value="item.fileName":label="item.fileName"></el-option></el-select></div><div class="preview"><iframe :src="previewUrl" frameborder="0" target="_blank" class="word-iframe"></iframe></div></div><script>new Vue({el: '#app',data() {return {previewUrl:'',imageUrl:'',fileList: [{"fileName":"test.png"},{"fileName":"test.docx"},{"fileName":"test.pdf"},{"fileName":"test.xls"}],selected : ''}},mounted(){this.loadImage(this.fileList[0].fileName)},methods: {loadImage(e) {this.selected = e;console.log(e);this.imageUrl = "http://localhost:19000/"+e;// 这里应该是调用你的后台服务获取图片预览 URLthis.previewUrl = 'http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(Base64.encode(this.imageUrl));}}})</script>
</body>
</html>