Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

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

  1. There are too many types to preview, and many require different ways to preview. Development costs are large.
  2. Formatting is not ideal.

And the demand of the blogger company is urgent, so the landlord found KKfile in the open source project.

1. Why choose KKFile

  1. Support various formats, Supports doc, DOCX, PPT, PPTX, XLS, XLSX, ZIP, RAR, MP4, MP3 and many types of text such as TXT, HTML, XML, Java, Properties, SQL, JS, MD, json, conf, INI, vue, PHP, PY, bat, Gitignore.
  2. Using Spring Boot development, easy to modify the source code.
  3. Docker image distribution package is provided to facilitate deployment in container environment.
  4. Supports various preview sources, such as common HTTP/HTTPS file download urls, HTTP/HTTPS file download stream urls, and FTP download urls
  5. Open source ！！！！ Free of charge. Thanks to the author here.

Deployment of 2.

Here you can download the Windows/Linux package directly. Address: gitee.com/kekingcn/fi…

1. Environmental requirements

  1. Java: 1.8 +
  2. OpenOffice or LiberOffice(built-in for Windows, automatically downloaded for CentOS or Ubuntu, and installed by yourself for MacOS)

There is no need to download OpenOffice under Linux. Note that Centos8 cannot install OpenOffice.

2. Change the configuration

The configuration file is in the following path. You can modify the configuration file according to your personal needs. If you have no special requirements, you can directly start the configuration file.

3. Start

1. Traditional startup mode

Enter the following folder, find the startup file can be started.

Window: Double-click startup.bat or cmd-type startup.bat

Linux :./startup.sh (CentOS Linux release 7.7.1908 (Core)

2. Start docker

Pull the mirror

docker pull keking/kkfileview
Copy the code

run

docker run -it -p 8012:8012 keking/kkfileview
Copy the code
3. Verify

Access IP address: 8012 to verify the success. You can view the uploaded files as follows.

In the process of use, there is no need to integrate into the original code (if you have the energy and ability to try). Provide functional interfaces as standalone services.

4. How to call it

Call it in the previous section of code as follows

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/base64.min.js"></script>

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

1. Call principle

  1. Gets a stream of files. Var url = ‘http://127.0.0.1:8080/file/test.txt’; Is an interface for downloading files (which needs to be implemented by itself) that returns a file stream when called.
  2. Will get the above documents circulated to http://127.0.0.1:8012/onlinePreview in the 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 nameif(fileName ! = null) {// Set File path File File = new File(commonFile + fileName);if(file.exists()) {// Set the HTTP response header response.reset(); try { OutputStream os = response.getOutputStream(); // Read the file InputStreamin= new FileInputStream(file); // copy the file ioutils.copy (in, os);
                    in.close();
                    os.close();
                    return "Download successful"; } catch (Exception e) { e.printStackTrace(); }}}return "Download failed";
    }
Copy the code
Public class FileMessageVO {/** * file path */ private String fileRoute; /** * download address */ private String fileDownloadUri; /** * fileType */ private String fileType; /** * file size */ private String size; /** * private String fullfilename; }Copy the code

Note: in the download interface, the filename must be fullfilename. Don’t ask why the hump isn’t working!

Example 3.

So how to call in the above conditions, please refer to the following example. Here is the foreground code.

// The following is the download interface provided by your business service, meaning download by file nameletUrl = ` http://39.103.xxx.xxx:8080/flowable/Download? fullfilename=${fileName}`; Window.open ()'http://127.0.0.1:8012/onlinePreview? url='+encodeURIComponent(Base64.encode(url)));
Copy the code

5. About exceptions

Please refer to the official documentation: kkfileview.keking.cn/zh-cn/docs/…

3. Modify the source code and package it

Due to the business needs of the developer, the file passed in is the md5 encrypted name without the path name, so the source code and interface need to be changed. The following is how the developer modified it.

1. Make sure the controller

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

According to the diagram analysis, each file has its own set of parsing processes (policy + factory mode), we need to modify these processes, the owner of the building here added a set of interfaces for encryption. (Why not modify the original interface, because I want to keep the original interface good)

2. The factory class

This is the factory class. Class to call based on file type (not modified)

3. FilePreview interface

As you can see from the core interface FilePreview, the parsing method of each file is integrated into FilePreview, so we rewrote the interface to suit our own needs.

4. Implementation of FilePreview interface

Now I can rewrite the process in the FilePreview implementation class. For example, the logic is to send in the suffix of the original file and then re-spell it for download.

5. Enable interception

When adding an interface, add the following configuration; otherwise, the interface cannot be accessed.

Pack 6.

Packaging will generate our JAR package and we’ll be happy to call it

7. Call

Don’t forget to change the interface name to the one we changed when using it.

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