javascript - Uncaught ReferenceError: XLSX is not defined on drop file - Stack Overflow

admin管理员组

文章数量:1291239

I want to be able to drag and drop an excel file, but for some reason when declaring my workbook var workbook = XLSX.read(data, {type: rABS ? 'binary':'array'}); it says it's not defined.

I think I'm missing something to connect this index.js to server.js which has the var XLSX = require('xlsx'); in it. I've looked and looked online and haven't found the right fix. I would like to avoid using a module to require() inside of HTML.

What I think is the important code:

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">

Any help is much appreciated.

I want to be able to drag and drop an excel file, but for some reason when declaring my workbook var workbook = XLSX.read(data, {type: rABS ? 'binary':'array'}); it says it's not defined.

I think I'm missing something to connect this index.js to server.js which has the var XLSX = require('xlsx'); in it. I've looked and looked online and haven't found the right fix. I would like to avoid using a module to require() inside of HTML.

What I think is the important code:

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">

Any help is much appreciated.

• javascript
• node.js
• xlsx

Share Improve this question Follow edited Nov 8, 2017 at 18:45 Christopher Chalfant asked Nov 8, 2017 at 17:41 Christopher ChalfantChristopher Chalfant 60111 gold badge77 silver badges1919 bronze badges 2

• I'm not clear on where this code is going to run? Is it in a browser? – Matt Holland Commented Nov 8, 2017 at 18:39
• Yes it is running in a browser. – Christopher Chalfant Commented Nov 8, 2017 at 18:43

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

I can see a few problems here:

• fs and path are modules that are built into NodeJs, hence they are not available in the browser.
• You'll need some kind of build tool for your JS if you want to use require for client-side code. Browserify and Webpack are good places to start.
• If you don't want to get into that (It's plex so I wouldn't blame you!) you can add the XLSX module to the browser with a <script> tag: https://www.npmjs./package/xlsx#installation - it seems like it should work.
• There are some examples on the XLSX GitHub page, one of which includes drag & drop and may help you get where you want? https://github./SheetJS/js-xlsx (And specifically https://github./SheetJS/js-xlsx/tree/master/demos/datagrid)

if you forget to add the library cdn or install it, he will generate this error

add this script or any new:

<script type="text/javascript" src="https://unpkg./[email protected]/dist/xlsx.full.min.js"></script>

本文标签： javascriptUncaught ReferenceError XLSX is not defined on drop fileStack Overflow