Online preview is a very common function in daily development. At the beginning of the research, bloggers chose to implement it themselves, but there are the following problems.

1. There are too many types to preview. Many types require different preview methods. The development cost is large.
2. The format adjustment is not ideal.

Moreover, the demand of blogger company is urgent, so the landlord found kkfile in the open source project

1. Why kkfile

1. It supports various formats, including doc, docx, ppt, pptx, xls, xlsx, zip, rar, mp4, mp3, and many text types, such as txt, html, xml, java, properties, sql, js, md, json, conf, ini, vue, php, py, bat, gitignore.
2. Using spring boot development, it is easy to modify the source code.
3. Provide Docker image distribution package to facilitate deployment in container environment.
4. Support various preview sources such as ordinary http/https file download url, http/https file download stream url and ftp download url
5. Open source!!!! free Thank the author here.

2. Deployment

You can download the windows / Linux package directly here.
Address: https://gitee.com/kekingcn/file-online-preview/releases

1. Environmental requirements

1. Java: 1.8+
2. OpenOffice or liberoffice (built-in under windows, automatic download and installation under CentOS or Ubuntu, self installation under MacOS)

It really needs less dependence. If it is openoffice under linux, it does not need to be downloaded. Note that CentOS 8 cannot install openoffice for the time being.

2. Change configuration

The configuration file is in the following path and can be modified according to the notes according to personal needs. If there are no special needs, you can start it directly.

3. Start

1. Traditional startup

Enter the following folder and find the startup file to start.

window: double click startup.bat or cmd - enter startup.bat

linux:./startup.sh (here I use CentOS Linux release 7.7.1908 (Core) to start, and the plug-ins required for the project will be automatically downloaded, such as openoffice)

2.docker startup

Pull image

docker pull keking/kkfileview

function

docker run -it -p 8012:8012 keking/kkfileview

3. Verification

Visit ip: 8012 to verify whether it is successful. You can view the uploaded file as follows.

In the process of use, it does not need to be integrated into the original code (if you have energy and ability, you can try). Provide functional interfaces in the form of independent services.

4. How to call

In the previous code, you can call it as follows

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/js-base64@3.6.0/base64.min.js"></script>

var url = 'http://127.0.0.1:8080/file/test.txt'; // The access address of the file to preview
window.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(Base64.encode(previewUrl)));

1. Calling principle

1. Gets the stream of the file. var url = ‘ http://127.0.0.1:8080/file/test.txt ’; It is an interface for downloading files (it needs to be implemented by itself). After calling, it will return the file stream.
2. Circulate the documents obtained above to http://127.0.0.1:8012/onlinePreview Interface.

2. Download Interface

    @GetMapping("/Download")
    public String onlineDownload(FileMessageVO fileMessageVO) throws UnsupportedEncodingException {
        String commonfile = "/home/common_files/";
        // Get HttpServletResponse
        HttpServletResponse response =
            ((ServletRequestAttributes)RequestContextHolder.getRequestAttributes()).getResponse();
        String fileName = fileMessageVO.getFullfilename();// file name
        if (fileName != null) {
            // Set file path
            File file = new File(commonfile + fileName);
            if (file.exists()) {
                // Set HTTP response header
                response.reset();
                try {
                    OutputStream os = response.getOutputStream();
                    // read file
                    InputStream in = new FileInputStream(file);
                    // copy file
                    IOUtils.copy(in, os);
                    in.close();
                    os.close();
                    return "Download succeeded";
                } catch (Exception e) {
                    e.printStackTrace();
                }
            }
        }
        return "Download failed";
    }

public class FileMessageVO {

    /**
     * File path
     */
    private String fileRoute;

    /**
     * Download address
     */
    private String fileDownloadUri;

    /**
     * file type
     */
    private String fileType;

    /**
     * file size
     */
    private String size;

    /**
     * Online preview field
     */
    private String fullfilename;
    }

Note here: in the download interface, the file name must use fullfilename. Don't ask why hump writing is not applicable!

3. Examples

How to call under the above conditions? Please refer to the following examples. The following is the foreground code.

//The following is the download interface provided by your business service, which means downloading through the file name
let url = `http://39.103.xxx.xxx:8080/flowable/Download?fullfilename=${fileName}`;
//Configure the online preview server below
window.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(Base64.encode(url)));

5. About exceptions

You can refer to the official documents: https://kkfileview.keking.cn/zh-cn/docs/faq.html

3. Modify the source code and package it

Because of the business requirements of the landlord company, the incoming file is the md5 encrypted name without path name, so the source code and interface need to be changed. The following describes how the landlord modifies it.

1. Determine the controller

According to the search, the preview interface is determined as follows:

According to the figure analysis, each file has its own set of parsing processes (policy + factory mode). We need to modify these processes. The landlord has added a set of interfaces here for encryption. (why not modify the original interface, because the landlord wants to keep the original interface easy to use)

2. Factory

This is the factory class. Determine the class to call according to the file type (not modified)

3.FilePreview interface

You can see the core interface FilePreview. The parsing methods of each file are integrated into FilePreview, so we have rewritten a set of interfaces according to our own needs.

4. Implementation of filepreview interface

Next, I can rewrite our process in the implementation class of the FilePreview interface (the above newly added interfaces are modified on the original file). For example, the logic of the landlord is to send in the suffix of the original file, and then spell and download it again.

5. Turn on interception

When adding an interface, you need to add the following configuration, otherwise you cannot access it.

6. Packing

Packaging will generate our jar package, and then we can call it happily

7. Call

When using, don't forget to change the interface name to the one we modified.

window.open('http://127.0.0.1:8012/onlinePreviewMd5?url='+encodeURIComponent(Base64.encode(previewUrl)));