append-excel-es6.js

/*******************************************************************************
  description: 
   ローカルのエクセルファイルを選択すると(<input type="file" id="select-file">、
   選択したエクセルファイルへシートを追加し、テーブル要素(<table id="table-0">)を書込み、
   そのエクセルシートをダウンロードするためのリンクをdocument.body に追加します。

   ※このままのコードだと、セルの書式属性は全部消えます。
*******************************************************************************/
(function($) {

  $('input#select-file[type=file]').on('change',async function(ev) {
    var files = this.files;
    var f = files[0];

    // 読み込んだエクセルファイル(ArrayBuffer)をUint8Array配列にし、XLSX.readに渡します。
    var data = new Uint8Array(await f.arrayBuffer());
    var workbook = XLSX.read(data, {type: 'array'});

    // 上記 HTMLのテーブルを table_to_sheetメソッドに渡しエクセルシート(ブック？)を作って、
    var new_workbook = XLSX.utils.table_to_sheet( $('#table-0').get(0) );

    //読み込んだエクセルに上記テーブルを変換したシート(ブック?)を新しいシートとして追加します。
    XLSX.utils.book_append_sheet(workbook, new_workbook, 'Ryzen price');

    // 新しく作成するエクセルファイルの作成オプションを設定します。
    var options = {
      bookType: 'xlsx',
      bookSST: false,
      type: 'array',
      compression: true
    };

    // 上記オプションを使って Blobオブジェクトに出力します。
    var blob = new Blob(
      [XLSX.write(workbook, options)],
      {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'}
    );

    // Blobオブジェクトをダウンロードさせるための仮想的な？URLを作って A要素をdocument.bodyに追加します。
    // クリックすると、読み込んだエクセルファイルに表をシートに追加し、新しく作ったエクセルファイルをダウンロードできます。
    $('<a>')
      .attr({'href':window.URL.createObjectURL(blob),'download': 'シートを追加したエクセルファイル.xlsx'})
      .appendTo(document.body)
      .text('シートを追加したエクセルファイル.xls');
    ;
  });

})(jQuery);