如何从Oracle NoSQL取回.bin文件原始内容并在表格单元格显示？

核心思路 #

你已经完成了.bin文件转Base64并存储到数据库的步骤，现在只需两步就能实现目标：从数据库取回Base64字符串，再将其解码为原始二进制内容，最后选择合适的方式展示在表格单元格中。

具体实现步骤 #

1. 取回存储的Base64数据 #

先通过Oracle NoSQL的客户端API获取你之前存入的Base64字符串，将其赋值给变量storedBase64。

2. 解码Base64为原始二进制内容 #

使用浏览器原生的atob()函数解码Base64字符串，得到原始二进制字符串：

// 解码Base64为二进制字符串
const binaryString = atob(storedBase64);

// （可选）如果需要底层操作，可转为Uint8Array
const uint8Array = new Uint8Array(binaryString.length);
for (let i = 0; i < binaryString.length; i++) {
  uint8Array[i] = binaryString.charCodeAt(i);
}

3. 在表格单元格中展示内容 #

由于.bin是二进制数据，直接展示可能出现乱码，提供三种常用展示方式：

方式一：展示原始二进制字符（保留原始样式）

直接将二进制字符串插入单元格：

// 假设目标单元格id为binContentCell
const targetCell = document.getElementById('binContentCell');
targetCell.textContent = binaryString;

方式二：格式化展示为十六进制（更易读）

将二进制数据转换为十六进制字符串，可读性更强：

function binaryToHex(binaryStr) {
  let hexStr = '';
  for (let i = 0; i < binaryStr.length; i++) {
    const charCode = binaryStr.charCodeAt(i);
    hexStr += charCode.toString(16).padStart(2, '0') + ' ';
  }
  return hexStr.trim();
}

// 转换后插入单元格
const targetCell = document.getElementById('binContentCell');
targetCell.textContent = binaryToHex(binaryString);

方式三：提供原始文件下载链接

如果需要让用户获取原始文件，可在单元格中创建下载链接：

const targetCell = document.getElementById('binContentCell');
const downloadLink = document.createElement('a');
downloadLink.href = `data:application/octet-stream;base64,${storedBase64}`;
downloadLink.download = 'original_file.bin';
downloadLink.textContent = '下载原始.bin文件';
targetCell.appendChild(downloadLink);

完整示例代码 #

// 替换为你从Oracle NoSQL取回的Base64字符串
const storedBase64 = "你的Base64数据";

// 解码Base64
const binaryString = atob(storedBase64);

// 调用转换函数并插入单元格
const targetCell = document.getElementById('binContentCell');
targetCell.textContent = binaryToHex(binaryString);

// 十六进制转换辅助函数
function binaryToHex(binaryStr) {
  let hexStr = '';
  for (let i = 0; i < binaryStr.length; i++) {
    const charCode = binaryStr.charCodeAt(i);
    hexStr += charCode.toString(16).padStart(2, '0') + ' ';
  }
  return hexStr.trim();
}

内容的提问来源于stack exchange，提问作者Swathi J S