文件16进制查看器核心JS实现

本文将介绍基于 Vue 3 和 Nuxt 3 实现的“文件16进制查看器”的核心技术方案。该工具主要用于在浏览器端直接查看任意文件（包括二进制文件）的十六进制编码，所有文件处理均在前端完成，不涉及后端上传。

在线工具网址：https://see-tool.com/file-hex-viewer
工具截图：

1. 核心工具函数 (utils/file-hex-viewer.js)

我们将核心的文件处理和格式化逻辑封装在 utils/file-hex-viewer.js 中，主要包括文件大小格式化、二进制转换十六进制字符串以及文件名生成。

1.1 文件大小格式化 (formatFileSize)

用于将字节数转换为人类可读的格式（如 KB, MB）。

export function formatFileSize(bytes, units = ['Bytes', 'KB', 'MB', 'GB', 'TB']) {
   
  if (!Number.isFinite(bytes) || bytes < 0) return `0 ${
     units[0] || 'Bytes'}`
  if (bytes === 0) return `0 ${
     units[0] || 'Bytes'}`

  const k = 1024
  const index = Math.floor(Math.log(bytes) / Math.log(k))
  const value = Math.round((bytes / Math.pow(k, index)) * 100) / 100
  const unit = units[index] || units[units.length - 1] || 'Bytes'
  return `${
     value} ${
     unit}`
}

1.2 二进制转十六进制 (bytesToHex)

这是本工具的核心转换函数。它接收一个 Uint8Array，并根据传入的 format 参数（支持 space、nospace、uppercase）生成对应的十六进制字符串。对于 space 格式，每16个字节会自动换行，方便阅读。

export function bytesToHex(uint8Array, format = 'space') {
   
  if (!uint8Array || !uint8Array.length) return ''
  const useUppercase = format === 'uppercase'
  const useSpace = format === 'space'
  let hexString = ''

  for (let i = 0; i < uint8Array.length; i++) {
   
    // 将每个字节转换为2位十六进制字符串
    let hex = uint8Array[i].toString(16).padStart(2, '0')

    if (useUppercase) {
   
      hex = hex.toUpperCase()
    }

    if (useSpace) {
   
      hexString += `${
     hex} `
      // 每16个字节插入一个换行符
      if ((i + 1) % 16 === 0) {
   
        hexString += '\n'
      }
    } else {
   
      hexString += hex
    }
  }

  return hexString.trim()
}

1.3 导出文件名生成 (buildHexFileName)

根据原文件名和当前的格式设置，生成导出文件的名称（后缀为 .hex 或 .HEX）。

export function buildHexFileName(originalName, format = 'space') {
   
  if (!originalName) return `file${
     format === 'uppercase' ? '.HEX' : '.hex'}`
  const lastDot = originalName.lastIndexOf('.')
  const baseName = lastDot > 0 ? originalName.slice(0, lastDot) : originalName
  const extension = format === 'uppercase' ? '.HEX' : '.hex'
  return `${
     baseName}${
     extension}`
}

2. 文件读取与处理逻辑

在前端实现十六进制查看器的核心是利用 HTML5 的 FileReader API 读取文件内容为 ArrayBuffer，然后转换为 Uint8Array 进行处理。

const processFile = (file) => {
   
  const reader = new FileReader()

  reader.onload = (event) => {
   
    try {
   
      const buffer = event.target.result
      const bytes = new Uint8Array(buffer)
      // 调用工具函数生成 Hex 字符串
      const hex = bytesToHex(bytes, 'space') 
      // 更新视图...
    } catch (error) {
   
      console.error('Process failed:', error)
    }
  }

  reader.onerror = () => {
   
    console.error('Read error')
  }

  // 读取文件为 ArrayBuffer
  reader.readAsArrayBuffer(file)
}

3. 导出与下载功能

为了让用户可以将十六进制编码保存到本地，我们利用 Blob 对象和 URL.createObjectURL 创建临时的下载链接，实现纯前端下载。

const downloadHexFile = (hexContent, originalName, format) => {
   
  if (!hexContent) return

  const fileName = buildHexFileName(originalName, format)
  // 创建包含 Hex 内容的 Blob
  const blob = new Blob([hexContent], {
    type: 'text/plain' })
  const url = URL.createObjectURL(blob)

  // 创建临时链接并触发下载
  const link = document.createElement('a')
  link.href = url
  link.download = fileName
  document.body.appendChild(link)
  link.click()

  // 清理
  document.body.removeChild(link)
  URL.revokeObjectURL(url)
}

总结

该方案的核心在于通过 utils/file-hex-viewer.js 封装纯粹的格式化和转换逻辑，并结合浏览器原生的 FileReader 和 Blob API 完成文件的读取与导出，实现了一个轻量级且高效的纯前端文件十六进制查看工具。