TypeError: e.createWriteStream is not a function

[Ahmad19860]

Hi, I am trying to create a sample excel file but i am getting error 'e.createWriteStream is not a function'. below is code to create the file-

import { Component } from '@angular/core';
import { NavController, Platform } from 'ionic-angular';
import * as Excel from "exceljs/dist/exceljs.min.js";
import * as ExcelProper from "exceljs";

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(platform: Platform) {
    platform.ready().then(() => {
      this.createSheet();
    });
  }

  ionViewDidLoad() {
  }

  createSheet() {
    let workbook: ExcelProper.Workbook = new Excel.Workbook();
    var worksheet = workbook.addWorksheet('My Sheet');

    worksheet.columns = [
      { header: 'Id', key: 'id', width: 10 },
      { header: 'Name', key: 'name', width: 32 },
      { header: 'D.O.B.', key: 'DOB', width: 10 }
    ];
    worksheet.addRow({ id: 1, name: 'Ionic Android', dob: new Date(1970, 1, 1) });
    worksheet.addRow({ id: 2, name: 'Ionic iOS', dob: new Date(1965, 1, 7) });
    var tempFilePath = 'PATH/temp.xlsx'; // PATH is where you want to create your file

    workbook.xlsx.writeFile(tempFilePath).then(function () {
      console.log('file is written');
    });
  }
}

This is my ionic info output:

@ionic/cli-utils  : 1.19.0
    ionic (Ionic CLI) : 3.19.0

global packages:

    cordova (Cordova CLI) : 7.1.0

local packages:

    @ionic/app-scripts : 3.1.4
    Cordova Platforms  : android 6.3.0
    Ionic Framework    : ionic-angular 3.9.2

System:

    Android SDK Tools : 26.0.2
    Node              : v6.11.3
    npm               : 3.10.10
    OS                : Windows 7

Environment Variables:

    ANDROID_HOME : D:\ANDROID_SDK

Misc:

    backend : pro

Please help me to get out of this issue.

[ahaverty]

Changing:

import * as Excel from "exceljs/dist/exceljs.min.js";
import * as ExcelProper from "exceljs";

back to just:

import * as Excel from "exceljs";

fixed the issue for me.

[EdoAPP]

Hi @Ahmad19860, I don't know if you could fix the problem but the problem is that you're trying to execute a filesystem function on a webview.

The documentation says:

A portion of this library has been isolated and tested for use within a browser environment.

Due to the streaming nature of the workbook reader and workbook writer, these have not been included. Only the document based workbook may be used (see Create a Worbook for details).

For example code using ExcelJS in the browser take a look at the spec/browser folder in the github repo.

So, you wouuld need to use wb.xlsx.writeBuffer() instead of wb.xlsx.writeFile()

[gonzobard777]

using .writeBuffer() instead of .writeFile() is the right way, see example: https://www.codeproject.com/Tips/1251189/%2FTips%2F1251189%2FExcel-Export-from-Angular-2plus

[Nguendai]

the same problem, Can you hepl me, please

Thanks

[Nguendai]

Hi, I am trying to create a sample excel file but i am getting error 'e.createWriteStream is not a function'. below is code to create the file-

import { Component } from '@angular/core';
import { NavController, Platform } from 'ionic-angular';
import * as Excel from "exceljs/dist/exceljs.min.js";
import * as ExcelProper from "exceljs";

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(platform: Platform) {
    platform.ready().then(() => {
      this.createSheet();
    });
  }

  ionViewDidLoad() {
  }

  createSheet() {
    let workbook: ExcelProper.Workbook = new Excel.Workbook();
    var worksheet = workbook.addWorksheet('My Sheet');

    worksheet.columns = [
      { header: 'Id', key: 'id', width: 10 },
      { header: 'Name', key: 'name', width: 32 },
      { header: 'D.O.B.', key: 'DOB', width: 10 }
    ];
    worksheet.addRow({ id: 1, name: 'Ionic Android', dob: new Date(1970, 1, 1) });
    worksheet.addRow({ id: 2, name: 'Ionic iOS', dob: new Date(1965, 1, 7) });
    var tempFilePath = 'PATH/temp.xlsx'; // PATH is where you want to create your file

    workbook.xlsx.writeFile(tempFilePath).then(function () {
      console.log('file is written');
    });
  }
}

This is my ionic info output:

@ionic/cli-utils  : 1.19.0
    ionic (Ionic CLI) : 3.19.0

global packages:

    cordova (Cordova CLI) : 7.1.0

local packages:

    @ionic/app-scripts : 3.1.4
    Cordova Platforms  : android 6.3.0
    Ionic Framework    : ionic-angular 3.9.2

System:

    Android SDK Tools : 26.0.2
    Node              : v6.11.3
    npm               : 3.10.10
    OS                : Windows 7

Environment Variables:

    ANDROID_HOME : D:\ANDROID_SDK

Misc:

    backend : pro

Please help me to get out of this issue.

[b-asaf]

Hey, similar issue happen to me in React.js any update regarding this issue. the version I am using: "exceljs": "^3.4.0" My code is:

import Excel from 'exceljs';
// OR
import * as Excel from 'exceljs';

export default () => {
    const workbook = new Excel.Workbook();
    const worksheet = workbook.addWorksheet('My Sheet');

    worksheet.columns = [
        { header: 'Id', key: 'id', width: 10 },
        { header: 'Name', key: 'name', width: 32 },
        { header: 'D.O.B.', key: 'dob', width: 15 },
    ];

    worksheet.addRow({ id: 1, name: 'John Doe', dob: new Date(1970, 1, 1) });
    worksheet.addRow({ id: 2, name: 'Jane Doe', dob: new Date(1965, 1, 7) });

    // save under export.xlsx
    workbook.xlsx.writeFile('export.xlsx');

---

UPDATE After additional research I understood that workbook.xlsx.writeFile is not support currently from client side so I am using writeBuffer and saving it with file-saver package instead.

[SyedAsimAliSE]

And here it is how to use with buffer !

import {saveAs} from "file-saver";

const buffer = await workbook.xlsx.writeBuffer();
const fileType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
const fileExtension = '.xlsx';

const blob = new Blob([buffer], {type: fileType});

saveAs(blob, 'fileName' + fileExtension);

[Nishita424]

Hi @Ahmad19860, I don't know if you could fix the problem but the problem is that you're trying to execute a filesystem function on a webview.

The documentation says:

A portion of this library has been isolated and tested for use within a browser environment.

Due to the streaming nature of the workbook reader and workbook writer, these have not been included. Only the document based workbook may be used (see Create a Worbook for details).

For example code using ExcelJS in the browser take a look at the spec/browser folder in the github repo.

So, you wouuld need to use wb.xlsx.writeBuffer() instead of wb.xlsx.writeFile()

Worked for me.

[KingDarBoja]

This issue should be pinned so other users know how to handle the export in client side 🚀

[Jeremias-Nater]

i think the 1.3 kb of file-saver should be added as dependency so that we could just use a provided "saveFileWithBrowser()" function. I did fix this relatively fast, but still my time consumed to use this would be proportionally way less since all the other stuff worked instantly.

[Alone-Michael]

Hi, I am trying to create a sample excel file but i am getting error 'e.createWriteStream is not a function'. below is code to create the file-

import { Component } from '@angular/core';
import { NavController, Platform } from 'ionic-angular';
import * as Excel from "exceljs/dist/exceljs.min.js";
import * as ExcelProper from "exceljs";

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(platform: Platform) {
    platform.ready().then(() => {
      this.createSheet();
    });
  }

  ionViewDidLoad() {
  }

  createSheet() {
    let workbook: ExcelProper.Workbook = new Excel.Workbook();
    var worksheet = workbook.addWorksheet('My Sheet');

    worksheet.columns = [
      { header: 'Id', key: 'id', width: 10 },
      { header: 'Name', key: 'name', width: 32 },
      { header: 'D.O.B.', key: 'DOB', width: 10 }
    ];
    worksheet.addRow({ id: 1, name: 'Ionic Android', dob: new Date(1970, 1, 1) });
    worksheet.addRow({ id: 2, name: 'Ionic iOS', dob: new Date(1965, 1, 7) });
    var tempFilePath = 'PATH/temp.xlsx'; // PATH is where you want to create your file

    workbook.xlsx.writeFile(tempFilePath).then(function () {
      console.log('file is written');
    });
  }
}

This is my ionic info output:

@ionic/cli-utils  : 1.19.0
    ionic (Ionic CLI) : 3.19.0

global packages:

    cordova (Cordova CLI) : 7.1.0

local packages:

    @ionic/app-scripts : 3.1.4
    Cordova Platforms  : android 6.3.0
    Ionic Framework    : ionic-angular 3.9.2

System:

    Android SDK Tools : 26.0.2
    Node              : v6.11.3
    npm               : 3.10.10
    OS                : Windows 7

Environment Variables:

    ANDROID_HOME : D:\ANDROID_SDK

Misc:

    backend : pro

Please help me to get out of this issue.

I have the same problem. Has your problem been solved? How to solve it? Can you tell me?

[ghost]

And here it is how to use with buffer !

import {saveAs} from "file-saver";

const buffer = await workbook.xlsx.writeBuffer();
const fileType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
const fileExtension = '.xlsx';

const blob = new Blob([buffer], {type: fileType});

saveAs(blob, 'fileName' + fileExtension);

As of this date, 01-09-2022, it is still not working client-side... So thank you very much for this contribution! <3

[doraemonxxx]

this issue was 6 years ago and is still open. Is there any workaround to fix the issue without using file-saver package?

[jasonclemens]

The following works for me without using the file-saver dependency. It uses the buffer output method:

        file = await workbook.xlsx.writeBuffer();

        // Create a hidden link to the file
        const downloadLink = document.createElement("a");
        downloadLink.download = "excelfile.xlsx"; // File name
        downloadLink.href = window.URL.createObjectURL(
            new Blob([file], {
                type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
            })
        );
        downloadLink.style.display = "none";

        // Add the link to DOM
        document.body.appendChild(downloadLink);

        // "Click" the link
        downloadLink.click();

        // Remove the link from the DOM
        downloadLink.remove();