Diff2html加载Git PR Diff异常：调用方式是否正确？

你现在遇到的问题其实是对Diff2Html的getPrettyHtml方法参数理解有误哦——这个方法的第一个参数需要的是原始的diff文本内容，而不是GitHub PR的网页URL。你直接传PR的网页地址，它会把这个字符串当成diff内容来解析，自然识别不出任何文件变更，所以才显示“Files changed (0)”。

正确的实现步骤 #

要通过URL获取PR的diff并展示，得先拿到原始的diff文本，再传给Diff2Html，具体做法如下：

1. 获取GitHub PR的原始diff内容
   GitHub给每个PR都提供了直接获取原始diff文本的入口：只需要在PR的网页URL末尾加上.diff后缀就行。比如你用的PR #106，对应的diff地址就是https://github.com/rtfpessoa/diff2html/pull/106.diff。

2. 用AJAX/fetch请求diff文本并生成展示HTML
   你需要先通过网络请求拿到这个diff文本，再传给getPrettyHtml方法。这里用现代的fetch API来实现，代码示例如下：

// 等待页面DOM加载完成后执行
document.addEventListener('DOMContentLoaded', async function() {
  try {
    // 发起请求获取原始diff文本
    const response = await fetch('https://github.com/rtfpessoa/diff2html/pull/106.diff');
    const diffText = await response.text();
    
    // 生成diff展示HTML
    const diffHtml = Diff2Html.getPrettyHtml(diffText, {
      inputFormat: 'diff',
      showFiles: true,
      matching: 'lines',
      outputFormat: 'side-by-side'
    });
    
    // 将HTML插入到页面容器中
    document.getElementById("diff-container").innerHTML = diffHtml;
  } catch (error) {
    console.error('加载diff内容出错:', error);
    document.getElementById("diff-container").textContent = '加载diff内容失败，请稍后重试';
  }
});

额外注意事项 #

• 跨域问题：如果你的前端页面部署的域名和GitHub不同，直接用fetch可能会遇到CORS限制。这时候可以考虑通过后端代理来请求GitHub的diff接口，再把内容返回给前端；如果是访问私有仓库的PR，还需要带上GitHub的认证信息。
• 兼容性：如果需要兼容老版本浏览器，可以用XMLHttpRequest代替fetch，核心逻辑是一样的——先拿到diff文本再传给Diff2Html。

内容的提问来源于stack exchange，提问作者Happy Coder