John Riley John Riley - 5 months ago 25
HTML Question

Problems setting up simple test project - Exceljs and Browserify

I'm trying to set up a simple test project to test ExcelJS via a browser application, and for the life of me I can not get Browserify to work properly.

I bundle my code into a bundle file with the appropriate require calls and the resulting bundle throws the following error when the page is loaded:

Uncaught TypeError: Cannot read property 'prototype' of undefined


This error appears to be thrown on an fs.ReadStream method?

Here is my code:

index.html

<!DOCTYPE html>
<head>
<title>Test Excel JS</title>
<meta charset="utf-8">
<meta name="description" content="">

<link rel="stylesheet" href="app.css">
</head>
<body>
<div>
<label>Test</label>
<button onclick="test()">Test this Stuff and Check your console log</button>
</div>

<script src="bundle.js"></script>
<script>
var test = function(){
var workbook = generateTestFile();
console.log(workbook);
};
</script>
</body>
</html>


app.js (base for bundle.js)

'use strict';

var Excel = require('exceljs');

var isBold = function(dataRow){
return dataRow.name === "Jeff";
};

var getRowColor = function(dataRow){
return dataRow.color;
};

var getCellColor = function(dataRow, cell){
return (dataRow.name === 'John' && cell.value === 0)? 'orange' : dataRow.color;
};

var getFont = function(isBold, color){
return {
name: 'Arial Black',
color: color,
family: 2,
size: 14,
bold: isBold
};
};

var getTestHeader = function(){
return [
{key: "id", header: "Id"},
{key: "name", header: "Name", width: 32},
{key: "color", header: "Color", width: 10}
];
};

var getTestData = function(){
return [
{
id: 0,
name: "John",
color: "green"
},
{
id: 1,
name: "Rehan",
color: "blue"
},
{
id: 2,
name: "Jeff",
color: "yellow"
}
];
};

var generateTestFile = function(){
var workbook = new Excel.Workbook();
var worksheet = workbook.addWorksheet('Sheet 1');

//Set Column Headers
worksheet.columns = getTestHeader();

//Add Rows
var testData = getTestData();
var length = testData.length;
for(var i = 0; i < length; i++){
worksheet.addRow(testData[i]);
}

//Format Rows
worksheet.eachRow(function(row, rowNumber){
console.log(row);
var isBold = isBold(row);
var rowColor = getRowcolor(row);
row.eachCell(function(cell, colNumber){
var cellColor = getCellColor(row, cell);
console.log(cell);
});
});

return workbook;
};


How do I get this to work? All I really want to do is test excelJS. I don't care what the solution is, as long as I can verify that the library works, I'll be happy.

Answer Source

You should browserify exceljs/dist/es5/exceljs.browser instead of exceljs

var Excel = require('exceljs/dist/es5/exceljs.browser');

Since you are going to browserify your app.js you should make your functions (variables) visible in global scope (window)

global.generateTestFile = function generateTestFile(){
    // ...
};

You can not declare a variable with name isBold and call function expression isBold at the same time, because your var keyword will declare a variable isBold in current scope and your function will not be available (See var). So comment it out, since it is not used in your code:

//var isBold = isBold(row);

Also, there is a typo in getRowcolor. Fix it:

var rowColor = getRow–°olor(row);

Here is the gulpfile.js for you:

var gulp = require('gulp');
var source = require('vinyl-source-stream');
var browserify = require('browserify');
//var uglify = require('gulp-uglify');
//var buffer = require('vinyl-buffer');

gulp.task('default', function() {
  return browserify('app.js')
    .bundle()
    .pipe(source('bundle.js'))
    //.pipe(buffer())
    //.pipe(uglify())
    .pipe(gulp.dest('.'));
});

You can also browserify exceljs/dist/es5/exceljs.browser.js itself and use it in your app.