登录文件16进制查看器核心JS实现
文件16进制查看器核心JS实现
本文将介绍基于 Vue 3 和 Nuxt 3 实现的“文件16进制查看器”的核心技术方案。该工具主要用于在浏览器端直接查看任意文件（包括二进制文件）的十六进制编码，所有文件处理均在前端完成，不涉及后端上传。
在线工具网址：see-tool.com/file-hex-vi…
工具截图：
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 完成文件的读取与导出，实现了一个轻量级且高效的纯前端文件十六进制查看工具。
