HTML 上で画像などのファイルから binary code を読み込んで、１６進コードに変換してページ上に表示させるには

Question

ブラウザ上で　binary code を読み込んで
そのデーターを HEX 変換してページ上で表示させる作業に
困っています。

以下のコードを動かすと、console には結果が表示されますが
ブラウザ画面上では
**
[object ArrayBuffer]**

としか表示されません。

どのようにすれば、変換された結果をブラウザ画面上に正しく表示できるでしょうか。

よろしくお願いいたします。

	<input type="file"  id="readFile">
<hr>
	<div id="result"></div>

var file = new Blob(['hello world']); 

var resultElement = document.getElementById( "result" ) ;

var fr = new FileReader();

fr.addEventListener('load', 
	function () 
	{
		var u = new Uint8Array(this.result),
			a = new Array(u.length),
			i = u.length;
			
		while (i--) // map to hex
			a[i] = (u[i] < 16 ? '0' : '') + u[i].toString(16);
			
		u = null; // free memory
		console.log(a); 
		
		resultElement.appendChild( new Text( this.result ) ) ;
	}
);

fr.readAsArrayBuffer(file);

Answer 1

ええと、console.log(a)の出力と同じものをページ上に表示したいんですよね?

resultElement.appendChild(new Text(a));

Answer 2

１６進コードに変換してページ上に表示

画像などのという言葉から「ダンプデータ」を想像しました。

この場合、先頭から処理して整形するのが楽かもしれません。

let
  byts = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17],
  dump = [],
  tmp, rslt;

for ( let i=0, l=byts.length; i<l; ++i ) {
  if ( i % 16 === 0 ) {    
    dump.push(tmp = []);
  }
  tmp.push( byts[i].toString(16).padStart(2,"0") );
}

// <textarea> or <pre> 用
rslt = dump.map( line => line.join(" ") ).join("\n");

console.log( rslt );
/*
 => 00 01 02 03 04 05 06 07 08 09 0a 0b 0c 0d 0e 0f
    10 11
 */

変換された結果をブラウザ画面上に正しく表示

最終的な出力はともかく、実装中は　結果のテキストをスクロールバーが自動表示される textarea を使うと楽だと思います。

Answer 3

consoleではaを表示しているのにappendではthis.resultを入れているので
違うのは必至では？

resultElement.appendChild(new Text(a)) ;