SpringBoot实现文件内容对比

     背景

        在上一篇博客中，我实践了WORD转换成PDF/TXT的实现方式，本周接到一个新的需求，恰好就用上了这个成果。需求如下：客户提供一个WORD范本给用户，用户范本进行修改后，再反馈给客户。反馈的成果多种多样，可以是WORD，PDF或TXT，然后客户希望有一个文件对比的功能，将范本和用户修改的内容进行比对，以此来找出用户修改了哪些内容。不出所料，这个光荣而艰巨的任务又落到了雷袭的头上。

     代码实践 

        这个小需求其实没多少技术含量，就当是一个练手小游戏吧。参考了网上的诸多实践后，我决定这么规划：后台提供接口，将范本和用户提交的文件转换成TXT，并获取TXT内容。前端得到后台的TXT内容后，通过JS函数分析比对内容，并将新增，修改，删除的内容分类展示出来，以下是代码实践。

        1、在原来的后端代码的基础上，增加一个转换方法，对上传的文件进行转换，输出文件内容。

package com.leixi.fileTrans.utils;

import com.aspose.words.Document;
import com.aspose.words.SaveFormat;
import com.leixi.fileTrans.pojo.FileResponse;
import org.apache.pdfbox.Loader;
import org.apache.pdfbox.io.RandomAccessRead;
import org.apache.pdfbox.pdmodel.PDDocument;
import org.apache.pdfbox.text.PDFTextStripper;
import org.springframework.web.multipart.MultipartFile;

import java.io.BufferedReader;
import java.io.BufferedWriter;
import java.io.File;
import java.io.FileOutputStream;
import java.io.FileReader;
import java.io.IOException;
import java.io.OutputStreamWriter;
import java.util.UUID;

/**
 *
 * @author leixiyueqi
 * @since 2024/09/03 19:39
 */
public class FileUtils {

    private static final String outPath = "D:\\upload\\";

    public static FileResponse compareFile(MultipartFile leftFile, MultipartFile rightFile) throws Exception {
        String leftPath = transFileToTxt(leftFile);
        String rightPath = transFileToTxt(rightFile);
        FileResponse fileResponse = new FileResponse();
        fileResponse.setFileLeftStr(readText(leftPath));
        fileResponse.setFileRightStr(readText(rightPath));
        return fileResponse;
    }


    private static String transFileToTxt(MultipartFile file) throws Exception {
        String fileName =file.getOriginalFilename();
        String suffix = fileName.substring(fileName.lastIndexOf(".") + 1);
        String filePath = outPath + UUID.randomUUID() + ".txt";
        switch (suffix) {
            case "doc":
            case "docx":
                 transDocToTxt(file, filePath); break;
            case "txt":
                 file.transferTo(new File(filePath));break;
            case "pdf":
                 transPdfToTxt(file, filePath);break;
            default:
                throw new RuntimeException("不支持的文件类型");
        }
        return filePath;
    }

    private static void transDocToTxt(MultipartFile file, String filePath) throws Exception {
        Document doc = new Document(file.getInputStream());
        doc.save(filePath, SaveFormat.TEXT);
    }

    public static void transPdfToTxt(MultipartFile file, String filePath) throws Exception {
        BufferedWriter wr = null;
        File output = new File(filePath);
        PDDocument pd = Loader.loadPDF(file.getBytes());
        pd.save("CopyOf" + file.getName().split("\\.")[0] + ".pdf");
        PDFTextStripper stripper = new PDFTextStripper();
        wr = new BufferedWriter(new OutputStreamWriter(new FileOutputStream(output)));
        stripper.writeText(pd, wr);
        if (pd != null) {
            pd.close();
        }
        wr.close();
    }

    private static String readText(String filePath) {
        StringBuilder contentBuilder = new StringBuilder();

        try (BufferedReader br = new BufferedReader(new FileReader(filePath))) {
            String currentLine;

            while ((currentLine = br.readLine()) != null) {
                String[] arr = currentLine.split("\\|\\|");
                if (arr.length > 1) {
                    contentBuilder.append(arr[1]);
                } else {
                    contentBuilder.append(currentLine);
                }
                contentBuilder.append(System.lineSeparator()); // 添加换行符
            }
            return contentBuilder.toString();
        } catch (IOException e) {
            throw new RuntimeException("读取文件失败", e);
        }
    }
}

        2、添加一个Controller方法

    @PostMapping("/compare")
    public Object compare(@RequestParam(value = "leftFile") MultipartFile leftFile,
                          @RequestParam(value = "rightFile") MultipartFile rightFile) throws Exception{
        FileResponse response = FileUtils.compareFile(leftFile, rightFile);
        return response;
    }

        3、在resources/static下添加一个compare.html文件，内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document Comparison</title>
    <style>
    .wrap {
        background-color: #fff;
        border-radius: 4px;
        padding: 10px;
    }
    .top {
        margin: 0 -10px;
        display: flex;
        align-items: center;
        padding-left: 20px;
    }
    .text-view-box {
        height: 100%;
        min-height: 600px;
        margin: 0px -10px;
        width: calc(100% + 18px);
        position: relative;
        background: #fff;
        border-radius: 8px;
        padding: 10px;
        overflow: hidden;
    }

    .text-march-box {
        width: 100%;
        display: flex;
        overflow: hidden;
        justify-content: space-between;
    }

    .text-march-box._01 {
        margin: 0px 10px 10px 10px;
        padding-bottom: 10px;
        border-bottom: 1px solid #dcdfe6;
        width: calc(100% - 20px);
    }

    .text-march-box._02 {
        height: calc(100% - 80px);
        overflow-y: auto;
        overflow-x: hidden;
    }

    .text-march-box._02::-webkit-scrollbar {
        width: 3px;
        height: 3px;
    }

    .text-view-item {
        height: 100%;
        margin: 0px 10px;
        width: 50%;
        box-sizing: border-box;
        display: flex;
    }

    .c_warning {
        color: #409eff;
    }

    .text-view-name {
        padding-bottom: 10px;
        position: relative;
        color: #1f2424;
        font-size: 15px;
        font-weight: bold;
    }

    .file-name {
        font-size: 13px;
        padding-bottom: 10px;
        display: flex;
        align-items: center;
    }

    .source-text {
        border: 1px solid #dcdfe6;
        border-radius: 2px;
        padding: 10px;
        font-size: 14px;
        color: #606266;
        background: #f2f6fc;
        min-height: 100%;
        width: 100%;
        font-family: fangsong;
        line-height: 20px;
    }
    
    .spin-box {
        position: absolute;
        top: 0px;
        width: 50%;
        left: 0px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .spin-box._02 {
        right: 0px;
        left: auto;
    }

    body {
        font-family: Arial, sans-serif;
        background-color: #f4f4f9;
        margin: 0;
        padding: 20px;
    }

    label {
        font-weight: bold;
        color: #333333;
    }

    input[type="file"] {
        padding: 10px;
        border-radius: 4px;
        outline: none;
        transition: border-color 0.3s;
    }

    input[type="file"]:focus {
        border-color: #007bff;
    }

    button {
        padding: 10px 20px;
        background-color: #007bff;
        color: #ffffff;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        transition: background-color 0.3s;
    }

    button:hover {
        background-color: #0056b3;
    }

    #oldFileInput::file-selector-button{
        padding: 6px 10px;
        background-color: #1E9FFF;
        border: 1px solid #1E9FFF;
        border-radius: 3px;
        cursor: pointer;
        color: #fff;
        font-size: 12px;
    }

    #newFileInput::file-selector-button{
        padding: 6px 10px;
        background-color:#1E9FFF;
        border: 1px solid #1E9FFF;
        border-radius: 3px;
        cursor: pointer;
        color: #fff;
        font-size: 12px;
    }
    </style>
</head>
<body>
<div class="wrap">
    <div class="top">
        <label for="oldFileInput">当前文档：</label>
        <input type="file" id="oldFileInput" style="margin-right: 16px">

        <label for="newFileInput">对比文档：</label>
        <input type="file" id="newFileInput"  >

        <button type="primary" style="margin-left: 16px" onclick="handleCompare()">文档比对</button>
    </div>

    <!-- 假设这里有一个用于显示文件对比结果的地方 -->
    <div class="text-view-box" style = "display: none" id="resultDiv">
        <div class="text-march-box">
            <div class="text-view-item">
                <div class="text-view-name">源文件：</div>
                <div class="file-name"><span id = "leftFileName"/></div>
            </div>
            <div class="text-view-item">
                <div class="text-view-name">
                    <span class="c_warning">对比文件：</span>
                </div>
                <div class="file-name"><span id = "rightFileName"/></div>
            </div>
        </div>
        <div class="text-march-box _02">
            <div class="text-view-item">
                <div class="source-text" id="sourceText"></div>
            </div>
            <div class="text-view-item">
                <div class="source-text" id="targetHtml"></div>
            </div>
        </div>
        <div class="spin-box" id="spinBox"></div>
        <div class="spin-box _02" id="spinBox2"></div>
    </div>
</div>
</body>
<script src="./js/diff.min.js"></script>
<script>
    window.onload = function() {
        showResultDiv(false);
    };
    function handleCompare() {
        console.log("开始比较文档！")
        if (oldFileInput.files[0] && newFileInput.files[0]) {
            console.log(`比较文档: ${oldFileInput.files[0].name} 和 ${newFileInput.files[0].name}`);
            let formData = new FormData();
            formData.append('leftFile', oldFileInput.files[0]);
            formData.append('rightFile', newFileInput.files[0]);
            fetch('/leixi/compare', {
                method: 'POST',
                body: formData
            }).then(response => response.json())
            .then(data => {
                console.log('后端返回的数据:', data);
                showResultDiv(true); // 不显示 div
                document.getElementById("leftFileName").textContent = oldFileInput.files[0].name;
                document.getElementById("rightFileName").textContent = newFileInput.files[0].name;
                // 在这里处理返回的数据
                getTargetHtml(data.fileLeftStr, data.fileRightStr);
            }).catch(error => {
                console.error('请求失败:', error);
                showResultDiv(false); // 不显示 div
            }).finally(() => {

            });
        } else {
            alert('请选择文档');
        }
    }

    function showResultDiv(show) {
        document.getElementById('resultDiv').style.display= show ? "" : "none";
    }
    let leftFile = {};
    let rightFile = {};
    let sourceTextDiv = document.getElementById('sourceText');
    let targetHtmlDiv = document.getElementById('targetHtml');
    function getTargetHtml(leftText, rightText) {
        sourceTextDiv.innerHTML = '';
        targetHtmlDiv.innerHTML = '';

        const diff = Diff.diffChars(leftText, rightText);
        let updateLength = 0;

        for(let i = 0; i < diff.length; i++) {
            let item = diff[i];
            if (item.added || item.removed) {
                updateLength += item.value.length;
            } else {
                targetHtmlDiv.innerHTML += `<span>${item.value}</span>`;
                sourceTextDiv.innerHTML += `<span>${item.value}</span>`;
                continue;
            }

            if (item.removed && diff[i + 1] && diff[i + 1].added) {
                item.value = setItemValue(item.value, 'rgba(184,62,255,.4)');
                sourceTextDiv.innerHTML += `<span style='background:rgba(184,62,255,.4);'>${item.value}</span>`;
                continue;
            }

            if (item.added && diff[i - 1] && diff[i - 1].removed) {
                item.value = setItemValue(item.value, 'rgba(184,62,255,.4)');
                targetHtmlDiv.innerHTML += `<span style='background:rgba(184,62,255,.4);'>${item.value}</span>`;
                continue;
            }

            if (item.added) {
                item.value = setItemValue(item.value, 'rgba(103,194,58,.4)');
                targetHtmlDiv.innerHTML +=`<span style='background :rgba(103,194,58,.4);'>${item.value}</span>`;
            }

            if (item.removed) {
                item.value = setItemValue(item.value, 'rgba(255,71,109,.4)');
                sourceTextDiv.innerHTML += `<span style='background:rgba(255,71,109,.4);'>${item.value}</span>`;
            }
        }
    }

    function setItemValue(value, color) {
        value = value || '';
        return value;
    }
</script>
</html>

        文中引用了一个diff.min.js文件，是一个通用的工具文件，在网上可以轻易搜到，这里就不补充了。

        4、测试环节，打开页面，输入：http://127.0.0.1:19200/leixi/compare.html，选择上篇博客里转换的文件，对文档略作修改，对比的效果还是蛮准确的，通过这个功能，也可以检验上篇博客中WORD转PDF功能的准确度：

     后记

        这只是一个很简单的尝试，雷袭旨在通过这次实践来对之前的文件转换功能进行融汇贯通。从实用性来说，这其实也是个业务无关的小组件，如果有同行正巧需要实现类似的功能，可以直接把代码拷过去使用，人人为我，我为人人！