如何实现类似GitHub Raw的文件查看器？其工作原理是什么

核心工作原理 #

你提到的raw.githubusercontent的原始预览效果，本质逻辑非常直白，没有什么黑科技：

• 服务端/前端拿到文件的原始字节流后，不对内容做任何转码、裁剪、富文本包装，100%保留文件的原始内容；
• 响应/解析环节明确标记内容为text/plain纯文本类型，加核心响应头X-Content-Type-Options: nosniff禁止浏览器自动嗅探文件类型，避免触发下载、HTML解析这类非预期行为——这也是为什么你直接访问raw链接时，浏览器不会把.py、.md、.json这类非txt后缀的文件触发下载，而是直接展示的核心原因；
• 渲染环节对所有HTML特殊字符做转义，同时保留所有空白字符（换行、连续空格、制表符）的原始格式，不用浏览器默认的HTML空白折叠规则，用等宽字体展示，完全对齐本地文本编辑器打开文件的视觉效果。

常规HTML只能直接打开txt文件，本质是浏览器本地文件协议默认只把.txt后缀映射为text/plain类型，其他后缀要么被判定为二进制触发下载，要么被当成其他类型解析，我们做自定义查看器就是绕开这个默认的后缀判断逻辑，不管什么后缀的文本类文件，都统一按纯文本规则处理。

具体实现步骤 #

1. 文件读取逻辑 #

分两种场景处理：

• 本地用户选择的文件：直接用浏览器原生的File API读取原始字节流，不要直接用readAsText，方便后续做编码兼容，核心代码：

const fileSelector = document.getElementById('file-input');
fileSelector.addEventListener('change', async (e) => {
  const targetFile = e.target.files[0];
  if (!targetFile) return;
  // 直接读取原始ArrayBuffer，不做默认编码转换
  const fileBuffer = await targetFile.arrayBuffer();
  renderRawContent(fileBuffer);
});

• 远程托管的文件：发请求时设置responseType: 'arraybuffer'，如果跨域需要目标存储源配置CORS规则允许你的查看器域名访问，不要用默认的text类型请求，避免默认UTF-8解析导致非UTF-8编码文件乱码。

2. 编码解析 #

拿到ArrayBuffer后先做编码识别：

• 轻量场景直接用TextDecoder，默认传utf-8即可自动兼容带BOM的UTF-8文件；
• 如果需要兼容GBK、Big5、ISO-8859-1等非UTF-8编码，可以引入轻量编码识别库匹配正确编码，再用对应编码的decoder把字节流转成原始字符串，全程不要手动修改字符串里的换行、空格、特殊字符。

3. 内容转义 #

转成字符串后必须做HTML实体转义，避免文件内容里的<script>、<div>这类字符串被浏览器当成DOM标签解析，既会造成格式错乱，也有XSS风险，转义逻辑很简单：

function transferHtmlEntity(rawStr) {
  return rawStr.replace(/[&<>"']/g, (char) => {
    const map = {
      '&': '&amp;',
      '<': '&lt;',
      '>': '&gt;',
      '"': '&quot;',
      "'": '&#39;'
    };
    return map[char];
  });
}

4. 渲染配置 #

不要用普通div做渲染容器，直接用<pre>标签包裹转义后的内容，或者给容器加如下基础样式，完全对齐raw站的显示效果：

.raw-preview-container {
  margin: 0;
  padding: 16px;
  /* 核心属性：保留所有空白、换行，不做折叠 */
  white-space: pre;
  /* 等宽字体对齐代码/文本显示效果 */
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* 固定制表符宽度，避免不同环境下tab显示宽度不一致 */
  tab-size: 4;
  /* 长行不自动换行，出横向滚动条，和raw站逻辑一致 */
  overflow-x: auto;
  word-wrap: normal;
}

渲染时不要加任何自动加链接、关键词高亮、格式修正的额外逻辑，转义完直接塞到容器里就行，保证和原始文件内容完全一致。

注意事项 #

• 如果是自己托管文件做预览，一定要给响应加X-Content-Type-Options: nosniff头，不然部分浏览器会因为内容里包含HTML标签，自动把响应判定为HTML，触发安全拦截或者直接渲染HTML内容，达不到纯文本预览的效果；
• 大于10M的大文本文件不要一次性把全部内容插入DOM，建议做分片懒加载，不然会出现页面卡顿、内存占用过高的问题；
• 不要给预览容器加任何会影响空白字符展示的CSS属性，比如white-space: normal会把所有换行、连续空格折叠，完全破坏原始格式。

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