Filesaver.js: Feature request - Please add support for ES2015

Created on 26 May 2020  路  2Comments  路  Source: eligrey/FileSaver.js

It seems that current version of filesaver is available as CommonJS module only.

Google suggests avoiding the use of CommonJS modules since it impacts the tree-shaking of application. Ref: https://web.dev/commonjs-larger-bundles/

I would therefore request you to please release this package as a ES2015 module as well.

Thank you

Most helpful comment

Big +1 from me. I did not realize this was a problem before Angular started warning me about it. Would be nice to get a reply from the maintainers of this project if possible.

In case anyone is trying to find this using a search engine, here's some good indexers: ECMA ECMAScript CommonJS AMD optimization Angular 10 Angular10

All 2 comments

Big +1 from me. I did not realize this was a problem before Angular started warning me about it. Would be nice to get a reply from the maintainers of this project if possible.

In case anyone is trying to find this using a search engine, here's some good indexers: ECMA ECMAScript CommonJS AMD optimization Angular 10 Angular10

As a workaround I removed file-saver dependency from my projet an replaced the code with a simplified version of saveAs().
You can remove moment.js if you don't need the part that rename to current YYYYMMDD_HHmmss.
This code only handle xls files, adapt it to your needs.

FileSaver handle much more cases than me https://github.com/eligrey/FileSaver.js/blob/master/src/FileSaver.js but since my app don't officialy support anything else than a web browser (Chrome in this case)... the rest of the FileSaver code is irrelevant to me.
I understand this may not be the case for everyone hence "workaround".

angular version: ^10.2.0

import { Injectable } from '@angular/core';
import * as moment from 'moment';

@Injectable({
  providedIn: 'root',
})
export class FileService {
  constructor() {}

  /** rename file to 'prefix_name_YYYYMMDD_HHmmss.xlsx' */
  rename(response: ArrayBuffer, prefix: string, name: string): boolean {
    const blob = new Blob([response], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
    const filename = `${prefix}_${name}_${moment(new Date()).format('YYYYMMDD_HHmmss')}.xlsx`;
    this.saveAs(blob, filename);
    return true;
  }

  /**
   * Code inspired from stackoverflow and file-saver but greatly simplified.
   * Remove file-saver dependency because of warnng in angular CommonJS
   * 
   * @see https://github.com/eligrey/FileSaver.js/issues/653
   * @see https://web.dev/commonjs-larger-bundles/
   * @see https://stackoverflow.com/questions/42229050/rename-file-saved-to-the-file-system-with-angular-2
   */
  private saveAs(blob: Blob, name = 'download') {
    const a = document.createElement('a');
    a.download = name;
    a.rel = 'noopener';
    a.href = URL.createObjectURL(blob);
    window.document.body.appendChild(a);
    a.click();
    window.document.body.removeChild(a);
    URL.revokeObjectURL(a.href);
  }
}
Was this page helpful?
0 / 5 - 0 ratings