eligrey / FileSaver.js

An HTML5 saveAs() FileSaver implementation
https://eligrey.com/blog/saving-generated-files-on-the-client-side/
Other
21.56k stars 4.38k forks source link

Feature request - Please add support for ES2015 #653

Open naveedahmed1 opened 4 years ago

naveedahmed1 commented 4 years ago

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

Michael-Ziluck commented 4 years ago

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

francisoud commented 3 years ago

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);
  }
}
StavNoyAkur8 commented 3 years ago

This is not the only issue addressing this: https://github.com/eligrey/FileSaver.js/issues/538 https://github.com/eligrey/FileSaver.js/issues/678 And PR https://github.com/eligrey/FileSaver.js/pull/602 The above mention a module version of the package: https://www.npmjs.com/package/file-saver-es