1. 下载kkFileview:https://gitee.com/kekingcn/file-online-preview/releases
2. 启动服务
进入 bin 目录,双击 startup.bat 启动服务
3. 访问 http://127.0.0.1:8012 测试是否成功启动服务
4. 设置 Spring Boot 内置 tomcat 虚拟映射
@Configuration public class WebConfig implements WebMvcConfigurer { /** * 虚拟路径配置 * @param registry */ @Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler("/upload/**").addResourceLocations("file:F:/tomcat-upload/"); } }
5. 编写测试代码
<!-- 从数据库中获取的预览文件的虚拟路径 -->
<input type="hidden" th:value="${staticPath}" id="staticPath"/> <button type="button" onclick="kkFileview();"/>点击预览
/** * kkFileview 在线预览文档 */ function kkFileview() { var url = $("#staticPath").val(); var kkFileUrl = "http://localhost:8080/lcsin-blog"+url; //拼接预览文件的url window.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(kkFileUrl)); //交由kkFileview实现在线预览
}
6. 预览效果
使用图片预览效果
使用PDF预览效果
遇到的一些问题:
1. 管理员运行startup.bat 一闪而过,但服务未成功启动的。
解决方法:通过在cmd下编译bin目录里的kkFileView-2.1.2.jar成功启动服务,之后发现直接双击startup.bat 即可,无须以管理员身份运行
2. 预览页面报错,或者预览文件不存
问题原因:未正确传入接口参数或者预览文件的url拼接不正确导入传入的接口参数有误,应该传入预览文件的tomcat虚拟路径
传入的预览文件参数应该类似于:http://localhost:8080/项目名/预览文件的tomcat虚拟路径
其他问题可以在log目录下阅览kkFileView.log日志文件查看错误信息