未知のReferenceError：ドロップファイルにXLSXが定義されていません

Question

私はExcelファイルをドラッグアンドドロップできるようにしたいのですが、何らかの理由でワークブックを宣言するときにvar workbook = XLSX.read(data, {type: rABS ? 'binary':'array'});に定義されていません。

私はこのindex.jsをvar XLSX = require('xlsx');が入っているserver.jsに接続するのに何か不足していると思います。私は見て、オンラインで見て、正しい修正を見つけていない。私はrequire()のHTMLの中でモジュールを使うことを避けたいと思います。

server.js：

var express = require("express"); 
var app = express(); 
var XLSX = require('xlsx'); 
var fs = require('fs'); 
var JSON = require('JSON'); 
var path = require('path'); 

index.js：

$(document).ready(function(){ 
var rABS = true; // true: readAsBinaryString ; false: readAsArrayBuffer 
    $excelHolder.on('drop', function(e){ 
     e.preventDefault(); 
     var files = e.originalEvent.dataTransfer.files; 
     var file = files[0]; 
     var reader = new FileReader(); 
     console.log("got to before reader"); 
     reader.onload = function (e) { 
      console.log("got to reader.onload"); 
      var data =e.target.result; 
      var workbook = XLSX.read(data, {type: rABS ? 'binary':'array'}); 

      var sheet_name_list = workbook.SheetNames; 
      var excelObj = XLSX.utils.sheet_to_json(workbook.Sheets[sheet_name_list[0]]); 
      var json = JSON.stringify(excelObj); 
      var callback = "looks like it worked"; 
      console.log("did it upload?"); 

      fs.writeFile('excelfile.json', json, function(err){ 
       (err) ? console.error(err) : console.log(callback.toString()); 
      }); 
      // preview? 
     }; 
     if(rABS) reader.readAsBinaryString(file); else reader.readAsArrayBuffer(file); 

    }); 
} 

のindex.html：

<div class="huge">22</div> 
    <div>Uploads!</div> 
    <input name="uploads[]" type="file" accept=".xls,.xlsx,.ods,.csv" style="display: none;" id="excelInput"> 

どれでも私は重要なコードだと思う何

助けをたくさんいただきました。

Answer 1

は、私がここにいくつかの問題を見ることができます：

• fsとpathがNodeJsに組み込まれているモジュールです、それゆえ彼らは、ブラウザでは利用できません。
• クライアント側のコードにrequireを使用する場合は、JS用のビルドツールが必要です。 BrowserifyとWebpackは良いスタート地点です。
• XLSXモジュールを<script>というタグを付けてブラウザに追加することができます（それは複雑なので、私はあなたを責めません！）。https://www.npmjs.com/package/xlsx#installation - 動作するはずです。
• XLSX GitHubページにいくつかの例がありますが、そのうちの1つはドラッグ&ドロップを含んでいます。 https://github.com/SheetJS/js-xlsx（具体的にはhttps://github.com/SheetJS/js-xlsx/tree/master/demos/datagrid）