有没有办法通过单击 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
文件,其中的所有数据都显示在我的页面上.
导出类EmployeeService {url = 'https://localhost:44395/Api/Employee';构造函数(私有http:HttpClient){}getAllEmployee(): Observable{return this.http.get(this.url + '/AllEmployeeDetails');}}
保存
由于您必须在 Angular 应用程序中显示数据,因此最好的解决方案是将数据作为 json 发送并使用以下 npm 包:https://www.npmjs.com/package/xlsx 将 json 转换为 xlsx 文件或 csv>
这是我为此编写的示例服务,只需创建此服务并在需要的地方调用函数:
excel.service.ts
import { Injectable } from '@angular/core';从 'xlsx' 导入 * 作为 XLSX;@Injectable({提供在:'根'})导出类 ExcelService {构造函数(){}jsonToExcelSheet(data: any[], file_name = 'temp.xlsx') {const workBook = XLSX.utils.book_new();//创建一个新的空白书const workSheet = XLSX.utils.json_to_sheet(data);让 wscols = [{ wpx: 150 }, { wpx: 200 }, { wpx: 150 }, { wpx: 150 }];workSheet['!cols'] = wscols;//设置单元格宽度XLSX.utils.book_append_sheet(workBook, workSheet, 'data');//将工作表添加到书中返回 XLSX.writeFile(workBook, file_name);//在浏览器中启动文件下载}jsonToCSV(data: any[], file_name = 'temp') {const workBook = XLSX.utils.book_new();//创建一个新的空白书const workSheet = XLSX.utils.json_to_sheet(data);XLSX.utils.book_append_sheet(workBook, workSheet, 'data');//将工作表添加到书中返回 XLSX.writeFile(workBook, `${file_name}.csv`);//在浏览器中启动文件下载}}
现在,如果您想使用此服务,只需将其导入所需的component.ts
import { ExcelService } from 'src/services/excel.service';构造函数(私有_excelService:ExcelService){}异步下载工作表(){let downloadData = {}//在此处加载您的数据//将 json 导出为 Excel 表格等待这个._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屋!