Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Export XLSX on Browser???

See original GitHub issue

Perhaps I’m misunderstanding the function of the library, but I’m trying to export an excel file from the browser using exceljs, and the writefile function doesn’t seem to work. When I attempt to invoke writeFile, I get the following error:

Uncaught TypeError: fs.createWriteStream is not a function

Is exceljs designed to write files from the browser, or from the server?

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();
          workbook.xlsx.writeFile('newtestfile.xlsx')
              .then(function() {
                  console.log('Done Writing file: ');
              });
      };
  </script>
</body>
</html>

app.js (bundled to bundle.js using browserify)

'use strict';

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

global.isRowBold = function(excelRow){
    return excelRow.getCell('name').value === "Jeff";
};

global.getRowColor = function(excelRow){
    return excelRow.getCell('color').value;
};

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

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

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

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

global.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){
        var isBold = isRowBold(row);
        row.eachCell(function(cell, colNumber){
            var cellColor = getCellColor(row, cell);
            cell.font = getFont(isBold, cellColor);
        });
    });

    return workbook;
};

Issue Analytics

State:
Created 6 years ago
Comments:5

Top GitHub Comments

6reactions

harryadelcommented, Apr 9, 2019

@pleger For some reason surrounding data in brackets and adding charset to the type property did it for me.

workbook.xlsx.writeBuffer().then((data) => {
        const blob = new Blob([data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' });
        saveAs(blob, 'tests.xlsx');
      });

0reactions

SevenZarkcommented, Jan 31, 2022

@pleger For some reason surrounding data in brackets and adding charset to the type property did it for me.
workbook.xlsx.writeBuffer().then((data) => {
        const blob = new Blob([data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' });
        saveAs(blob, 'tests.xlsx');
      });

When I try this, I get ‘Failed - No file’ in Chrome. Logging blob to the console shows that it’s instantiated and looks right as far as I can tell. No idea what to do now.