有没有办法在 Angular 中单击按钮时从 SQL 服务器数据库 table 下载数据的 csv 文件

Question

当我单击前端 Angular web 中的按钮时，我需要将 SQL 服务器数据库 table 中的所有数据放入 .csv 文件中页。

我已经用 C# 编写了一个 Web API 来访问来自 SQL 服务器 table 的所有数据并将其显示在我的网页中。当我单击页面上显示 table 中所有数据的按钮时，我需要能够下载 .csv 文件。

export class EmployeeService {

  url = 'https://localhost:44395/Api/Employee';
  constructor(private http: HttpClient) { }

  getAllEmployee(): Observable<Employee[]> {
    return this.http.get<Employee[]>(this.url + '/AllEmployeeDetails');
  }
}

保存

Answer 1

您可以使用包 file-saver 从 blob 下载文件。加载数据并生成可转换为 blob 对象的 CSV 字符串。

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')
}

演示：https://stackblitz.com/edit/angular-zhqbgp

Answer 2

由于您必须在 angular 应用程序中显示数据，因此最好的解决方案是将数据作为 json 发送，并使用以下 npm 包：https://www.npmjs.com/package/xlsx 来转换json 到 xlsx 文件或 csv

这是我为此编写的示例服务，只需创建此服务并在您需要的地方调用该函数即可：

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

  }




}

现在，如果您想使用此服务，只需将其导入所需的 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);
}

有没有办法在 Angular 中单击按钮时从 SQL 服务器数据库 table 下载数据的 csv 文件

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

c#

angular

angular7