Open naveedahmed1 opened 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
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);
}
}
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
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