Light weight file 'Save As' angular component without external libraries/dependencies.
Checkout the demo on StackBlitz - https://angular-file-save-as.stackblitz.io
1) Save your data as local file in the system.
2) Save file with custom extension. Example - '.xyz' or '.abc'
3) Set default file name and file extension of your choice
Import
import { FileSaveAsComponent } from './file-save-as/file-save-as.component';
Declaration
declarations: [ FileSaveAsComponent ]
<file-save-as [fileContent]="fileData"></file-save-as>
Property fileContent accepts the data you want to save in file.
import{Component,Input}from'@angular/core';
@Component({selector: 'file-save-as',templateUrl: './file-save-as.component.html',styleUrls: ['./file-save-as.component.scss']})exportclassFileSaveAsComponent{
@Input()fileContent: any;//you can enter your own file name and extensionsaveAsProject(){this.writeContents(this.fileContent,'Sample File'+'.txt','text/plain');}writeContents(content,fileName,contentType){vara=document.createElement('a');varfile=newBlob([content],{type: contentType});a.href=URL.createObjectURL(file);a.download=fileName;a.click();}}<divclass="file-container"><buttonclass="file-button"(click)="saveAsProject()">SaveAs</button><br></div>.file-container{text-align: center;}.file-button{
outline: none;
cursor: pointer;
border: 1pxsolid #007bff;border-radius: 5px;
background: #007bff;
color: #fff;font-size: 15px;
padding: 10px;
margin: 5px10px;min-width: 100px;}.file-button:hover{background: #0069d9;border: 1pxsolid #0062cc;}Email - animesh.rawat20@gmail.com
Portfolio - https://animesh-rawat.web.app/
