diff2html 文件差异对比

使用diff2html、diff对比不同文件的差异

一、diff2html官方网址（GitHub - rtfpessoa/diff2html： Pretty diff to html javascript library （diff2html））

二、功能：将文件上传至浏览器 对比文件的差异 类似于git-diff效果

三、实现代码

1. 安装插件

   npm i diff2html 
   npm i diff 
   //这里我使用了diff库进行文件的差异化对比  diff2html应该有自己的方法  但是还未研究
   

2. 使用

   <template>
     <div>
       <div>
         <input type="file" @change="handleFileSelect(1, $event)" />
         <input type="file" @change="handleFileSelect(2, $event)" />
       </div>
   
       <div v-html="prettyHtml" />
     </div>
   </template>
   
   <script>
   import * as Diff2Html from "diff2html";
   import "diff2html/bundles/css/diff2html.min.css";
   import * as jsdiff from "diff";
   export default {
     data() {
       return {
         diffs: "<Unified Diff String>",
         file1Content: ``,
         file2Content: "",
         showDiff: false,
         file1Name: "",
         file2Name: "",
       };
     },
     computed: {
       prettyHtml() {
         // 生成文件差异
         let diff = jsdiff.createTwoFilesPatch(
           this.file1Name,
           this.file2Name,
           this.file1Content,
           this.file2Content
         );
         // 渲染
         return Diff2Html.html(diff, {
           drawFileList: false, //在差异之前显示文件列表：或 ，默认值为truefalsetrue
           matching: "lines",
           outputFormat: "side-by-side", //输出数据的格式：或 ，默认值为'line-by-line''side-by-side''line-by-line'
           diffStyle: "char",
             
    //根据自己的需求  添加配置属性         
             
           // outputFormat：输出数据的格式：或 ，默认值为'line-by-line''side-by-side''line-by-line'
           //drawFileList：在差异之前显示文件列表：或 ，默认值为truefalsetrue
           //srcPrefix：为所有源（更改前）文件路径添加前缀，默认值为 。应与生成差异时使用的前缀匹配。''
           //dstPrefix：为所有目标（更改后）文件路径添加前缀，默认值为 。应与使用的前缀匹配 生成差异时''
           //diffMaxChanges：更改的行数，超过这些行数后文件差异被视为太大且未显示，默认值为undefined
           //diffMaxLineLength：差异行中的字符数，超过这些字符数后文件差异将被视为太大且不 显示，默认值为undefined
           //diffTooBigMessage：允许在文件差异太大的情况下自定义消息的功能（如果设置了OR）。将给出一个文件索引作为数字，并应返回一个字符串。diffMaxChangesdiffMaxLineLength
           //matching：匹配级别：用于匹配行、匹配行和单词或 ，默认 是'lines''words''none'none
           //matchWordsThreshold：单词匹配的相似性阈值，默认值为0.25
           //maxLineLengthHighlight：仅当行小于此值时，才执行差异更改突出显示，默认值为10000
           ///diffStyle：显示每行的差异级别：或 ，默认值为'word''char''word'
           //renderNothingWhenEmpty：如果差异显示其比较没有变化，则不呈现任何内容：或 ，默认值为truefalsefalse
           //matchingMaxComparisons：最多对匹配更改块的行执行这么多比较，默认值为2500
           //maxLineSizeInBlockForComparison：块中较大行的最大操作系统字符数以应用比较， 默认值为200
           //compiledTemplates：对象（霍根.js模板值）与之前 编译后的模板替换部分 HTML，默认为 。例如：{}{ "tag-file-changed": Hogan.compile("<span class="d2h-tag d2h-changed d2h-changed-tag">MODIFIED</span>") }
           //rawTemplates：对象（字符串值）用原始未编译的模板替换部分 HTML，默认值为 。 例如：{}{ "tag-file-changed": "<span class="d2h-tag d2h-changed d2h-changed-tag">MODIFIED</span>" }
           //highlightLanguages：语言名称扩展名的映射，用于突出显示。这将覆盖默认语言 基于文件扩展名的检测。
         });
       },
     },
     methods: {
       // 保存文件格式
       handleFileSelect(fileIndex, event) {
         const file = event.target.files[0];
         const reader = new FileReader();
         reader.onload = (e) => {
           if (fileIndex === 1) {
             this.file1Content = reader.result;
             this.file1Name = file.name;
           } else if (fileIndex === 2) {
             this.file2Content = reader.result;
             this.file2Name = file.name;
             console.log(this.file2Name);
           }
         };
   
         if (file) {
           reader.readAsText(file);
         }
       },
   
    
     },
   };
   </script>