Hướng dẫn exceljs angular example - ví dụ về góc cạnh exceljs

Khi chúng tôi phát triển một ứng dụng đơn giản hoặc ứng dụng doanh nghiệp phức tạp bằng bất kỳ công nghệ nào, người dùng cuối luôn cần dữ liệu báo cáo trong một tệp Excel. Tại sao vì hầu hết mọi người dựa vào tệp Excel. Tôi đã làm việc với các ứng dụng doanh nghiệp Angular khác nhau. Trong tất cả các ứng dụng, khách hàng đã yêu cầu chúng tôi cung cấp một tệp Excel có thể tải xuống bằng các bộ lọc khác nhau.application using any technology, The end-user always needs the report data in an Excel file. Why because most people rely on excel file. I worked with various Angular Enterprise applications. In all applications, the customer asked us to give a downloadable excel file using various filters.

Trong hướng dẫn này, bạn sẽ tìm hiểu, làm thế nào để tải xuống một tệp excel bằng cách sử dụng Angular. Tôi sẽ hiển thị bản demo tải xuống tệp excel bằng plugin Exceljs và File Saver. Nếu bạn là một nhà phát triển Angular và tìm kiếm dữ liệu xuất để vượt trội, thì bài đăng này sẽ giúp bạn nhiều hơn. Chúng ta sẽ thấy họ từng cái một.Angular. I am going to show a demo of excel file download using ExcelJS and File Saver plugin. If you are an Angular developer and looking for export data to excel, then this post will help you more. We will see them one by one.

Bước 1. Tạo dự án Angular mới

Tạo một dự án góc mới bằng cách sử dụng lệnh dưới đây.

ng new angular-excel-example

Khi thiết lập ban đầu được thực hiện, sau đó mở thư mục dự án bằng trình chỉnh sửa mã VS.

Bước 2. Cài đặt plugin Exceljs

Plugin Exceljs được sử dụng để đọc và viết tệp Excel. Nó rất giàu chức năng. Bạn có thể tạo kiểu hàng và cột. Thậm chí bạn có thể thêm hình ảnh vào các tập tin Excel. Đó là lý do tại sao nhiều người sử dụng thư viện này.

Cài đặt Exceljs bằng lệnh dưới đây.

npm install exceljs --save

Bước 3. Cài đặt trình bảo vệ tệp

FileSaver.js là giải pháp để lưu các tệp ở phía máy khách và hoàn hảo cho các ứng dụng web tạo tệp trên máy khách.

Cài đặt plugin Saver File bằng lệnh bên dưới.

npm install file-saver --save

Bước 4. Tạo nút bằng sự kiện nhấp chuột

Tạo một nút trên tệp app.component.html với sự kiện nhấp vào.app.component.html file with click event.

app.component.html tệp

Bước 5. Nhập plugin exceljs và tệp trình bảo vệ tệp

Mở tệp app.component.ts và nhập plugin Exceljs và File Saver bằng mã dưới đây.app.component.ts file and import the ExcelJS and File Saver plugin using the below code.

Bước 6. Tạo tệp Excel có thể tải xuống

Ở đây tôi sẽ giải thích, mỗi đoạn mã theo từng bước.

1. Đầu tiên, chúng tôi cần dữ liệu ở định dạng JSON. Bạn có thể tạo dữ liệu giả như tôi cho mục đích thử nghiệm hoặc bạn có thể lấy dữ liệu từ máy chủ.

Ở đây tôi tạo một biến với một số dữ liệu tên và tuổi.

2. Tiếp theo, tạo sổ làm việc trên sổ làm việc bằng cách sử dụng

3. Từ sổ làm việc, chúng ta có thể tạo một tờ mới bằng cách sử dụng hàm addWorkSheet (). Đặt tên tờ ở đâyaddWorksheet() function. Give a sheet name here

4. Thêm tiêu đề cột bằng cách sử dụng hàm AddRow (). Trong dữ liệu JSON, tôi chỉ có hai cột. Đó là lý do tại sao tôi tạo ra hai cột duy nhất.addRow() function. In the JSON data, I have only two columns. That’s why I creating the only two columns.

5. Bây giờ thêm dữ liệu JSON vào bảng tính bằng cách sử dụng vòng lặp cho.

6. Đặt tên tệp và gọi chức năng ghi để tạo tệp Excel có thể tải xuống.

Đó là tất cả. Bây giờ bạn có thể xuất dữ liệu sang một tệp Excel.

Bản tóm tắt

Xuất dữ liệu sang tệp Excel luôn là một chức năng được yêu cầu trong bất kỳ ứng dụng nào. Đặc biệt nếu bạn sử dụng bất kỳ CRM, ERP và bất kỳ ứng dụng web phức tạp nào, người dùng cuối cần dữ liệu trong tệp Excel. Bài đăng này sẽ rất hữu ích nếu bạn đang tìm kiếm một tệp Excel có thể tải xuống bằng cách sử dụng Angular. Plugin Exceljs cung cấp các hàng và cột kiểu dáng và thậm chí bạn cũng có thể thêm hình ảnh. Nó cũng có nhiều chức năng khác. Bạn có thể kiểm tra nó bằng cách sử dụng liên kết dưới đây.CRM, ERP, and any Complex web applications, the end-user in need of data in the excel file. This post will be very helpful if you are looking for a downloadable excel file using Angular. The ExcelJS plugin offers styling rows and columns and even you can add images too. It had many other functionalities too. You can check it out using the below link.

Dự án repo:

Bạn chỉ có thể tải xuống dự án đã đề cập ở trên và thử trên máy địa phương của bạn.

JavaScript bằng tiếng Anh đơn giản

Thích bài viết này? Nếu vậy, hãy nhận nhiều nội dung tương tự bằng cách đăng ký được giải mã, kênh YouTube của chúng tôi!subscribing to Decoded, our YouTube channel!

Xin chào, tìm kiếm cùng một tính năng. Vui lòng cập nhật

Vâng, nó là có thể.

1. Tạo sổ làm việc và điền vào nó bằng dữ liệu

  res.attachment("test.xlsx")
  workbook.xlsx.write(res)
                .then(function() {
                    res.end()
            });

Ở đây res là phản hồi cho khách hàng

Prineseth, xcyxoux, shaffron, gskjhyoo, igordevjs, rowadz, praveendev404, leonardodelira, sashuk, chenop, và 8 phản ứng , Damianchojna và 3 người khác đã phản ứng với ngón tay cái xuống Emojigskjhyoo đã phản ứng với tiếng cười biểu tượng cảm xúc đã phản ứng với Emojishaffron bối rối, Bcamargoz, GSKJHYOO và DMCGUINNESS

Xin chào, tất cả mọi người, tôi là một người mới nhất trong chủ đề này. Do đó, tôi không thể hiểu mã sau trong ví dụ:

npm install exceljs --save

5

npm install exceljs --save

6 trên máy khách là gì? Làm thế nào tôi có thể tạo

npm install exceljs --save

6? I am a newest in this topic. Thereby, I couldn't understand the following code in the example:

npm install exceljs --save

5 What is

npm install exceljs --save

6 on the client? How can I create

npm install exceljs --save

6?
I am a newest in this topic. Thereby, I couldn't understand the following code in the example:

npm install exceljs --save

5
What is

npm install exceljs --save

6 on the client? How can I create

npm install exceljs --save

6?

Cảm ơn, Paul

Tôi nghĩ rằng các bình luận trước đây có thể đã bị nhầm lẫn về những gì đang được hỏi.

npm install exceljs --save

6 cho tôi biết rằng chúng có nghĩa là một phản hồi nút được gửi lại cho máy khách. Poster ban đầu đã yêu cầu một cách để tạo và tải xuống một tệp mà không cần sử dụng máy chủ. Tôi cũng muốn chức năng này và chưa thể làm cho nó hoạt động.

Tương tự ở đây, tôi đang sử dụng Angular, tôi có tất cả những gì tôi cần ở khách hàng, sẽ thật tuyệt nếu tôi chỉ có thể tải xuống tệp ngay từ máy khách. Cho đến nay tất cả những gì tôi đã tìm thấy có "res" của nút

Xin chào, mã sau đây hoạt động với tôi: `` `JS Workbook.xlsx.writebuffer (). Sau đó (function (data) {var blob = new blob ([data], {type:" application/vnd.openxmlformats offatedocument. bảng tính.

…

clbcabral, xthewiz, amkoehler, fesales, andrewkittredge, dễ dàng, ketansp, macro21, sahilbhatt92, vigneshrajann Dev-Song, Amosyu2000, Jpbecotte và Alexeyjersey đã phản ứng với biểu tượng cảm xúc trái tim

Nó cũng có tác dụng với tôi. Cảm ơn rất nhiều!

Xin chào, tôi đã đính kèm một tệp zip đang hoạt động trong sự cố này: #322 Perhaby COU có thể thử điều đó? Trân trọng Manfred I've attached one working zip file in this incident: #322 perhaby cou can try that ? Best regards Manfred
I've attached one working zip file in this incident: #322 perhaby cou can try that ?
Best regards
Manfred

@Pleger bạn có ví dụ về cách tải xuống excel không? Tôi đã sử dụng res.doad tải. Nhưng vẫn không thể tải xuống tập tin. Nhưng nó có thể viết excel

Tôi hy vọng mã sau đây có thể giúp bạn!

Trích xuất từ ​​http://pleger.cl/gp

$(document).ready(function () {  
  | var workbook = new ExcelJS.Workbook();
  |  
  | workbook.creator = 'Paul Leger';
  | workbook.lastModifiedBy = 'Paul Leger';
  | workbook.created = new Date();
  | workbook.modified = new Date();
  | workbook.lastPrinted = new Date();
  |  
  | var worksheet = workbook.addWorksheet("Publications");
  | worksheet.views = [
  | {state: 'frozen', xSplit: 0, ySplit: 1}
  | ];
  |  
  | worksheet.autoFilter = {
  | from: 'A1',
  | to: 'M1'
  | };
  |  
  | worksheet.columns = [
  | { header: 'Index', key: 'Index', width: 15 },
  | { header: 'Title', key: 'title', width: 25, style: {alignment: {wrapText: true} } },
  | { header: 'Authors', key: 'authors', width: 20, style: {alignment: {wrapText: true} } },
  | { header: 'Journal/Conference', key: 'jc', width: 25, style: {alignment: {wrapText: true} } },
  | { header: 'Type', key: 'type', width: 12, style: {alignment: {wrapText: true} } },
  | { header: 'Year', key: 'year', width: 12, style: {numFmt: "0000"}},
  | { header: 'Month', key: 'month', width: 12},
  | { header: 'volume', key: 'volume', width: 12},
  | { header: 'number', key: 'number', width: 12},
  | { header: 'Pages', key: 'pages', width: 12},
  | { header: 'Location', key: 'location', width: 20, style: {alignment: {wrapText: true} } },
  | { header: 'doi', key: 'doi', width: 22, style: {alignment: {wrapText: true} } },
  | { header: 'affiliation', key: 'affiliation', width: 20, style: {alignment: {wrapText: true} } }
  | ];
  |  
  | var firstRow = worksheet.getRow(1);
  | firstRow.font = { name: 'New Times Roman', family: 4, size: 10, bold: true, color: {argb:'80EF1C1C'} };
  | firstRow.alignment = { vertical: 'middle', horizontal: 'center'};
  | firstRow.height = 20;
  |  
  |  
  | csv.shift();
  | worksheet.addRows(csv);
  |  
  | var buff = workbook.xlsx.writeBuffer().then(function (data) {
  | var blob = new Blob([data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"});
  | saveAs(blob, "publications.xlsx");
  | });

Nó hoạt động cho tôi My data is coming from API but after downloading the excel the data is not having proper sequence like the data which is in column 1 of my report is now coming in column 4 and so on.

$(document).ready(function () {  
  | var workbook = new ExcelJS.Workbook();
  |  
  | workbook.creator = 'Paul Leger';
  | workbook.lastModifiedBy = 'Paul Leger';
  | workbook.created = new Date();
  | workbook.modified = new Date();
  | workbook.lastPrinted = new Date();
  |  
  | var worksheet = workbook.addWorksheet("Publications");
  | worksheet.views = [
  | {state: 'frozen', xSplit: 0, ySplit: 1}
  | ];
  |  
  | worksheet.autoFilter = {
  | from: 'A1',
  | to: 'M1'
  | };
  |  
  | worksheet.columns = [
  | { header: 'Index', key: 'Index', width: 15 },
  | { header: 'Title', key: 'title', width: 25, style: {alignment: {wrapText: true} } },
  | { header: 'Authors', key: 'authors', width: 20, style: {alignment: {wrapText: true} } },
  | { header: 'Journal/Conference', key: 'jc', width: 25, style: {alignment: {wrapText: true} } },
  | { header: 'Type', key: 'type', width: 12, style: {alignment: {wrapText: true} } },
  | { header: 'Year', key: 'year', width: 12, style: {numFmt: "0000"}},
  | { header: 'Month', key: 'month', width: 12},
  | { header: 'volume', key: 'volume', width: 12},
  | { header: 'number', key: 'number', width: 12},
  | { header: 'Pages', key: 'pages', width: 12},
  | { header: 'Location', key: 'location', width: 20, style: {alignment: {wrapText: true} } },
  | { header: 'doi', key: 'doi', width: 22, style: {alignment: {wrapText: true} } },
  | { header: 'affiliation', key: 'affiliation', width: 20, style: {alignment: {wrapText: true} } }
  | ];
  |  
  | var firstRow = worksheet.getRow(1);
  | firstRow.font = { name: 'New Times Roman', family: 4, size: 10, bold: true, color: {argb:'80EF1C1C'} };
  | firstRow.alignment = { vertical: 'middle', horizontal: 'center'};
  | firstRow.height = 20;
  |  
  |  
  | csv.shift();
  | worksheet.addRows(csv);
  |  
  | var buff = workbook.xlsx.writeBuffer().then(function (data) {
  | var blob = new Blob([data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"});
  | saveAs(blob, "publications.xlsx");
  | });

2 Mã này cho tôi lỗi chức năng không tồn tại generateExcel(){ this._http.generateExcel(this.headerInfo, this.spendclassificationlist); }
this code gives me error that function not exist

Để tải xuống trên trình duyệt.

workbook.xlsx.writeBuffer().then(function (data: Blob) {
     const blob = new Blob([data],
       { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
     const url = window.URL.createObjectURL(blob);
     const anchor = document.createElement('a');
     anchor.href = url;
     anchor.download = 'download.xls';
     anchor.click();
     window.URL.revokeObjectURL(url);
   });

2012MJM, Alanwalter45, Chris-Canipe, Chris-Vecchio, Skoricit, Rene-Xompass, Vhiguita, Charlesokwuagwu, Qblua, Vladislav Phản ứng với biểu tượng cảm xúc trái tim và fairbrook đã phản ứng với biểu tượng cảm xúc tên lửa

Nó hoạt động cho tôi My data is coming from API but after downloading the excel the data is not having proper sequence like the data which is in column 1 of my report is now coming in column 4 and so on.

$(document).ready(function () {  
  | var workbook = new ExcelJS.Workbook();
  |  
  | workbook.creator = 'Paul Leger';
  | workbook.lastModifiedBy = 'Paul Leger';
  | workbook.created = new Date();
  | workbook.modified = new Date();
  | workbook.lastPrinted = new Date();
  |  
  | var worksheet = workbook.addWorksheet("Publications");
  | worksheet.views = [
  | {state: 'frozen', xSplit: 0, ySplit: 1}
  | ];
  |  
  | worksheet.autoFilter = {
  | from: 'A1',
  | to: 'M1'
  | };
  |  
  | worksheet.columns = [
  | { header: 'Index', key: 'Index', width: 15 },
  | { header: 'Title', key: 'title', width: 25, style: {alignment: {wrapText: true} } },
  | { header: 'Authors', key: 'authors', width: 20, style: {alignment: {wrapText: true} } },
  | { header: 'Journal/Conference', key: 'jc', width: 25, style: {alignment: {wrapText: true} } },
  | { header: 'Type', key: 'type', width: 12, style: {alignment: {wrapText: true} } },
  | { header: 'Year', key: 'year', width: 12, style: {numFmt: "0000"}},
  | { header: 'Month', key: 'month', width: 12},
  | { header: 'volume', key: 'volume', width: 12},
  | { header: 'number', key: 'number', width: 12},
  | { header: 'Pages', key: 'pages', width: 12},
  | { header: 'Location', key: 'location', width: 20, style: {alignment: {wrapText: true} } },
  | { header: 'doi', key: 'doi', width: 22, style: {alignment: {wrapText: true} } },
  | { header: 'affiliation', key: 'affiliation', width: 20, style: {alignment: {wrapText: true} } }
  | ];
  |  
  | var firstRow = worksheet.getRow(1);
  | firstRow.font = { name: 'New Times Roman', family: 4, size: 10, bold: true, color: {argb:'80EF1C1C'} };
  | firstRow.alignment = { vertical: 'middle', horizontal: 'center'};
  | firstRow.height = 20;
  |  
  |  
  | csv.shift();
  | worksheet.addRows(csv);
  |  
  | var buff = workbook.xlsx.writeBuffer().then(function (data) {
  | var blob = new Blob([data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"});
  | saveAs(blob, "publications.xlsx");
  | });

1

export async function download(ctx: koa.Context) {
    const workbook = new Excel.Workbook()
    const worksheet = workbook.addWorksheet("report")
    worksheet.columns = [
      {header: "Date", key: "date", width: 20}]
    ctx.response.attachment("report.xlsx")
    ctx.status = 200
    await workbook.xlsx.write(ctx.res)
    ctx.res.end()
}

$(document).ready(function () {  
  | var workbook = new ExcelJS.Workbook();
  |  
  | workbook.creator = 'Paul Leger';
  | workbook.lastModifiedBy = 'Paul Leger';
  | workbook.created = new Date();
  | workbook.modified = new Date();
  | workbook.lastPrinted = new Date();
  |  
  | var worksheet = workbook.addWorksheet("Publications");
  | worksheet.views = [
  | {state: 'frozen', xSplit: 0, ySplit: 1}
  | ];
  |  
  | worksheet.autoFilter = {
  | from: 'A1',
  | to: 'M1'
  | };
  |  
  | worksheet.columns = [
  | { header: 'Index', key: 'Index', width: 15 },
  | { header: 'Title', key: 'title', width: 25, style: {alignment: {wrapText: true} } },
  | { header: 'Authors', key: 'authors', width: 20, style: {alignment: {wrapText: true} } },
  | { header: 'Journal/Conference', key: 'jc', width: 25, style: {alignment: {wrapText: true} } },
  | { header: 'Type', key: 'type', width: 12, style: {alignment: {wrapText: true} } },
  | { header: 'Year', key: 'year', width: 12, style: {numFmt: "0000"}},
  | { header: 'Month', key: 'month', width: 12},
  | { header: 'volume', key: 'volume', width: 12},
  | { header: 'number', key: 'number', width: 12},
  | { header: 'Pages', key: 'pages', width: 12},
  | { header: 'Location', key: 'location', width: 20, style: {alignment: {wrapText: true} } },
  | { header: 'doi', key: 'doi', width: 22, style: {alignment: {wrapText: true} } },
  | { header: 'affiliation', key: 'affiliation', width: 20, style: {alignment: {wrapText: true} } }
  | ];
  |  
  | var firstRow = worksheet.getRow(1);
  | firstRow.font = { name: 'New Times Roman', family: 4, size: 10, bold: true, color: {argb:'80EF1C1C'} };
  | firstRow.alignment = { vertical: 'middle', horizontal: 'center'};
  | firstRow.height = 20;
  |  
  |  
  | csv.shift();
  | worksheet.addRows(csv);
  |  
  | var buff = workbook.xlsx.writeBuffer().then(function (data) {
  | var blob = new Blob([data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"});
  | saveAs(blob, "publications.xlsx");
  | });

2 Mã này cho tôi lỗi chức năng không tồn tại generateExcel(){ this._http.generateExcel(this.headerInfo, this.spendclassificationlist); }

Xin chào, tìm kiếm cùng một tính năng. Vui lòng cập nhật
res.setHeader('Content-Type', 'text/xlsx');
res.setHeader(
'Content-Disposition',
'attachment; filename=test.xlsx'
);
workbook.xlsx.write(res)
.then(function () {
res.end()
});

Để tải xuống trên trình duyệt.

workbook.xlsx.writeBuffer().then(function (data: Blob) {
     const blob = new Blob([data],
       { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
     const url = window.URL.createObjectURL(blob);
     const anchor = document.createElement('a');
     anchor.href = url;
     anchor.download = 'download.xls';
     anchor.click();
     window.URL.revokeObjectURL(url);
   });

2012MJM, Alanwalter45, Chris-Canipe, Chris-Vecchio, Skoricit, Rene-Xompass, Vhiguita, Charlesokwuagwu, Qblua, Vladislav Phản ứng với biểu tượng cảm xúc trái tim và fairbrook đã phản ứng với biểu tượng cảm xúc tên lửa

@Lihaogit Hi, Làm thế nào để nhận và biến dữ liệu thành tệp Excel khi bạn gửi dữ liệu như thế này?

Tôi hy vọng mã sau đây có thể giúp bạn!

Trích xuất từ ​​http://pleger.cl/gp

npm install exceljs --save

3

Nó hoạt động cho tôi My data is coming from API but after downloading the excel the data is not having proper sequence like the data which is in column 1 of my report is now coming in column 4 and so on.
My data is coming from API but after downloading the excel the data is not having proper sequence like the data which is in column 1 of my report is now coming in column 4 and so on.

$(document).ready(function () {  
  | var workbook = new ExcelJS.Workbook();
  |  
  | workbook.creator = 'Paul Leger';
  | workbook.lastModifiedBy = 'Paul Leger';
  | workbook.created = new Date();
  | workbook.modified = new Date();
  | workbook.lastPrinted = new Date();
  |  
  | var worksheet = workbook.addWorksheet("Publications");
  | worksheet.views = [
  | {state: 'frozen', xSplit: 0, ySplit: 1}
  | ];
  |  
  | worksheet.autoFilter = {
  | from: 'A1',
  | to: 'M1'
  | };
  |  
  | worksheet.columns = [
  | { header: 'Index', key: 'Index', width: 15 },
  | { header: 'Title', key: 'title', width: 25, style: {alignment: {wrapText: true} } },
  | { header: 'Authors', key: 'authors', width: 20, style: {alignment: {wrapText: true} } },
  | { header: 'Journal/Conference', key: 'jc', width: 25, style: {alignment: {wrapText: true} } },
  | { header: 'Type', key: 'type', width: 12, style: {alignment: {wrapText: true} } },
  | { header: 'Year', key: 'year', width: 12, style: {numFmt: "0000"}},
  | { header: 'Month', key: 'month', width: 12},
  | { header: 'volume', key: 'volume', width: 12},
  | { header: 'number', key: 'number', width: 12},
  | { header: 'Pages', key: 'pages', width: 12},
  | { header: 'Location', key: 'location', width: 20, style: {alignment: {wrapText: true} } },
  | { header: 'doi', key: 'doi', width: 22, style: {alignment: {wrapText: true} } },
  | { header: 'affiliation', key: 'affiliation', width: 20, style: {alignment: {wrapText: true} } }
  | ];
  |  
  | var firstRow = worksheet.getRow(1);
  | firstRow.font = { name: 'New Times Roman', family: 4, size: 10, bold: true, color: {argb:'80EF1C1C'} };
  | firstRow.alignment = { vertical: 'middle', horizontal: 'center'};
  | firstRow.height = 20;
  |  
  |  
  | csv.shift();
  | worksheet.addRows(csv);
  |  
  | var buff = workbook.xlsx.writeBuffer().then(function (data) {
  | var blob = new Blob([data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"});
  | saveAs(blob, "publications.xlsx");
  | });

2 Mã này cho tôi lỗi chức năng không tồn tại generateExcel(){ this._http.generateExcel(this.headerInfo, this.spendclassificationlist); }
generateExcel(){
this._http.generateExcel(this.headerInfo, this.spendclassificationlist);
}

Để tải xuống trên trình duyệt.