Is there a way to download a csv file of the data from a SQL Server database table on button click in Angular

前端 未结 2 333
失恋的感觉
失恋的感觉 2021-01-16 17:02

I need to get all of the data in my SQL Server database table into a .csv file when I click a button in a front end Angular web page.

I have already wr

相关标签:
2条回答
  • 2021-01-16 17:36

    You can use the package, file-saver for downloading files from blob. Load the data and generate a CSV string which can be converted into a blob object.

    npm i file-saver

    npm i @types/file-saver

    app.component.ts :

    import { saveAs } from 'file-saver'
    
    download(){
        // Variable to store data as CSV string 
        let csvStr = '';
        // Fetch data from service
        this.employeeService.getAllEmployee().subscribe(
            response => { 
                // Manipulate data to generate CSV string
            },error => {}
        );
       
        // Convert string to blob
        var csvBlob = new Blob([csvStr], {
          type: 'text/plain'
        });
        // Download
        saveAs(csvBlob,'data.csv')
    }
    

    Demo : https://stackblitz.com/edit/angular-zhqbgp

    0 讨论(0)
  • 2021-01-16 17:48

    Since you have to display the data in your angular application the best solution is to send the data as json and the use the following npm package : https://www.npmjs.com/package/xlsx to convert the json to xlsx file or csv

    Here is a sample service i have written for the same, just create this service and call the function where you need it :

    excel.service.ts

    import { Injectable } from '@angular/core';
    import * as XLSX from 'xlsx';
    
    @Injectable({
      providedIn: 'root'
    })
    
    export class ExcelService {
    
      constructor() { }
    
    
      jsonToExcelSheet(data: any[], file_name = 'temp.xlsx') {
    
        const workBook = XLSX.utils.book_new(); // create a new blank book
        const workSheet = XLSX.utils.json_to_sheet(data);
        let wscols = [{ wpx: 150 }, { wpx: 200 }, { wpx: 150 }, { wpx: 150 }];
        workSheet['!cols'] = wscols; // set cell width
        XLSX.utils.book_append_sheet(workBook, workSheet, 'data'); // add the worksheet to the book
        return XLSX.writeFile(workBook, file_name); // initiate a file download in browser
    
      }
    
    
      jsonToCSV(data: any[], file_name = 'temp') {
    
        const workBook = XLSX.utils.book_new(); // create a new blank book
        const workSheet = XLSX.utils.json_to_sheet(data);
    
        XLSX.utils.book_append_sheet(workBook, workSheet, 'data'); // add the worksheet to the book
        return XLSX.writeFile(workBook, `${file_name}.csv`); // initiate a file download in browser
    
      }
    
    
    
    
    }
    

    Now if you want to use this service just import it in the desired component.ts

    import { ExcelService } from 'src/services/excel.service';
    
    constructor(private _excelService: ExcelService){}
    
    async downloadWorksheet() {
    
       let downloadData = {} // load your data here 
    
       // export the json as excelsheet
       await this._excelService.jsonToExcelSheet(downloadData);
    }
    
    0 讨论(0)
提交回复
热议问题