Integrate kkFileView with Spring Boot for Seamless Multi-Format File Preview

Introduction

The online file preview feature allows users to view various file types directly in a web page without downloading them. This article introduces the open‑source kkFileView project, built on Spring Boot, which supports a wide range of formats such as PDF, Office documents, images, 3D models, and multimedia.

Supported File Formats

Office documents: doc, docx, xls, xlsx, ppt, pptx, csv, etc.

WPS Office files: wps, dps, et, ett, wpt

OpenOffice/LibreOffice files: odt, ods, odp, etc.

Visio diagrams: vsd, vsdx

Image files: wmf, emf, jpg, png, gif, bmp, svg, tif, tiff, webp

Photoshop files: psd, eps

PDF, OFD, RTF

ePub books

3D model files: obj, 3ds, stl, gltf, glb, fbx, etc.

CAD files: dwg, dxf, dwf, etc.

Text and code files: txt, xml, md, java, php, py, js, css

Compressed archives: zip, rar, jar, tar, gzip, 7z

Audio/Video: mp3, wav, mp4, flv, avi, mkv, etc.

Medical DICOM images: dcm

Draw.io diagrams

Step 1: Create a Spring Boot Project and Configure Resource Handler

Start a new Spring Boot 3.2.5 project and add a resource handler that maps a local directory to the /docs/** URL pattern.

@Component
public class ResourceConfig implements WebMvcConfigurer {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        // Configure a local directory, accessible via /docs/**
        registry
            .addResourceHandler("/docs/**")
            .addResourceLocations("file:///d:/documents/");
    }
}

Place the files you want to preview in the configured directory (e.g., d:/documents/).

Step 2: Run the kkFileView Service

Clone the kkFileView project from https://gitee.com/kekingcn/file-online-preview, build it, and start the main class cn.keking.ServerMain. The service runs on http://127.0.0.1:8012/, where you can see the supported formats and upload files for preview.

Step 3: Preview Files via kkFileView

To preview a file, encode its URL in Base64 and pass it to the kkFileView endpoint http://127.0.0.1:8012/onlinePreview?url=BASE64_URL. Example encoding snippets:

// 1.psd => http://localhost:8010/docs/1.psd
Base64: aHR0cDovL2xvY2FsaG9zdDo4MDEwL2RvY3MvMS5wc2Q=
// 8.dcm => http://localhost:8010/docs/8.dcm
Base64: aHR0cDovL2xvY2FsaG9zdDo4MDEwL2RvY3MvOC5kY20=
// 技能表.xlsx => http://localhost:8010/docs/技能表.xlsx
Base64: aHR0cDovL2xvY2FsaG9zdDo4MDEwL2RvY3Mv5oqA6IO96KGoLnhsc3g=
// 模板示例.docx => http://localhost:8010/docs/模板示例.docx
Base64: aHR0cDovL2xvY2FsaG9zdDo4MDEwL2RvY3Mv5qih5p2/56S65L6LLmRvY3g=

Replace xxx in the endpoint URL with the corresponding Base64 string to view the file.

Step 4: Backend Endpoint Example for Dynamic Files

If your application serves files via an ID, expose an endpoint that streams the file and add a fullfilename query parameter to indicate the file type. Then encode the full URL and preview it with kkFileView.

// Show PPT document
@GetMapping("/{id}")
public void stream(@PathVariable Long id, HttpServletResponse response) throws Exception {
    FileSystemResource resource = new FileSystemResource(new File("f:/documents/述职报告PPT.pptx"));
    response.addHeader("Cache-Control", "public, max-age=86400");
    response.setCharacterEncoding("UTF-8");
    response.setContentType(MediaType.APPLICATION_OCTET_STREAM_VALUE);
    response.addHeader("Content-Disposition",
        "attachment;filename=" + URLEncoder.encode("述职报告PPT.pptx", "UTF-8"));
    StreamUtils.copy(resource.getInputStream(), response.getOutputStream());
}

Access the endpoint at

http://localhost:8010/resourcestream/666?fullfilename=111.pptx

, encode the full URL, and use the kkFileView preview URL as described above.

Conclusion

Integrating kkFileView into a Spring Boot application provides a powerful, low‑effort solution for previewing a vast array of file types directly in the browser, improving collaboration and reducing the need for client‑side software installations.