有没有一种方法可以在单击Angular时从SQL Server数据库表中下载数据的csv文件 [英] Is there a way to download a csv file of the data from a SQL Server database table on button click in Angular

问题描述

当我单击前端Angular网页中的按钮时，需要将SQL Server数据库表中的所有数据都放入.csv文件中.

我已经用C#编写了一个Web API，以访问SQL Server表中的所有数据并将其显示在我的网页中.单击页面上显示表中所有数据的按钮时，我需要能够下载.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');
  }
}

保存

解决方案

由于必须在角度应用程序中显示数据，因此最好的解决方案是将数据作为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);
}

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 written a Web API in C# to access all the data from the SQL Server table and display it in my web page. I need to be able to download a .csv file when I click a button with all that data in the table displayed on my page.

export class EmployeeService {

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

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

Save

解决方案

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

这篇关于有没有一种方法可以在单击Angular时从SQL Server数据库表中下载数据的csv文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！