Làm cách nào để đọc dữ liệu từ Excel trong AngularJS?

Bảng tính Excel đã có từ những năm 1980. Với hơn 30 triệu người dùng, hầu hết đều quen thuộc với trải nghiệm bảng tính Excel. Nhiều doanh nghiệp bắt đầu sử dụng bảng tính Excel để lập ngân sách và lập kế hoạch khi doanh nghiệp của họ khá đơn giản

Lúc đầu, một số lượng nhỏ người dùng có thể tham gia vào quy trình và có thể không có lượng dữ liệu lớn để giải thích và tổ chức. Khi tổ chức phát triển, có thể khó dựa vào các chức năng của Excel

Lợi ích của việc sử dụng một thành phần bảng tính trong một ứng dụng

Thành phần bảng tính có thể tăng cường bảo mật, hợp nhất dữ liệu, cải thiện trực quan hóa dữ liệu, đo lường hiệu suất chiến lược (SPM), phân tích thống kê tinh vi, v.v. Khả năng tương thích với Excel là một trong những tính năng quan trọng nhất của Spread của chúng tôi. NET và JavaScript trong nhiều năm

SpreadJS, thành phần JavaScript của chúng tôi, cung cấp giao diện bảng tính Excel quen thuộc. Bạn có thể nhập và xuất các tệp Excel và thậm chí xây dựng bảng điều khiển kinh doanh và hiệu suất của mình bằng JavaScript -- mà không có bất kỳ sự phụ thuộc nào vào Excel

Bài viết này trình bày cách bạn có thể nhập và xuất bảng tính Excel bằng SpreadJS trong môi trường Angular

Dưới đây là các bước để nhập và xuất bảng tính Excel trong Angular.  

Hãy thử tính năng này và nhiều tính năng khác. Tải xuống bản dùng thử của SpreadJS ngay hôm nay

Cài đặt Thành phần SpreadJS trong Ứng dụng của bạn

Để theo dõi blog này, hãy tải xuống mẫu tại đây

Cần lưu ý rằng vì chúng tôi đang làm việc với CLI góc, chúng tôi cần đảm bảo rằng nó được cài đặt với NPM

npm install -g @angular/cli

Vì chúng tôi sẽ làm việc với chức năng nhập và xuất Excel của SpreadJS, nên chúng tôi sẽ cần thành phần ExcelIO. Bạn có thể cài đặt tệp đó và các tệp SpreadJS cơ sở bằng NPM

npm install @grapecity/spread-sheets @grapecity/spread-excelio @grapecity/spread-sheets-angular

Khởi tạo Thành phần SpreadJS

SpreadJS có thể được thêm vào ứng dụng. thành phần. trang html như

Khởi tạo thành phần SpreadJS và tạo một đối tượng của lớp ExcelIO trong ứng dụng. thành phần. ts với đoạn mã sau

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  spreadBackColor = 'aliceblue';
  hostStyle = {
    width: '95vw',
    height: '80vh'
  };
  private spread;
  private excelIO;

  constructor() {
    this.spread = new GC.Spread.Sheets.Workbook();
    this.excelIO = new Excel.IO();
  }

  workbookInit(args: any) {
    const self = this;
    self.spread = args.spread;
    const sheet = self.spread.getActiveSheet();
    sheet.getCell(0, 0).text('Test Excel').foreColor('blue');
    sheet.getCell(1, 0).text('Test Excel').foreColor('blue');
    sheet.getCell(2, 0).text('Test Excel').foreColor('blue');
    sheet.getCell(3, 0).text('Test Excel').foreColor('blue');
    sheet.getCell(0, 1).text('Test Excel').foreColor('blue');
    sheet.getCell(1, 1).text('Test Excel').foreColor('blue');
    sheet.getCell(2, 1).text('Test Excel').foreColor('blue');
    sheet.getCell(3, 1).text('Test Excel').foreColor('blue');
    sheet.getCell(0, 2).text('Test Excel').foreColor('blue');
    sheet.getCell(1, 2).text('Test Excel').foreColor('blue');
    sheet.getCell(2, 2).text('Test Excel').foreColor('blue');
    sheet.getCell(3, 2).text('Test Excel').foreColor('blue');
    sheet.getCell(0, 3).text('Test Excel').foreColor('blue');
    sheet.getCell(1, 3).text('Test Excel').foreColor('blue');
    sheet.getCell(2, 3).text('Test Excel').foreColor('blue');
    sheet.getCell(3, 3).text('Test Excel').foreColor('blue');
 }

Tạo một phần tử đầu vào chấp nhận các tệp XLSX

Để nhập, chúng tôi sẽ tạo một phần tử đầu vào chấp nhận các tệp XLSX. Hãy thêm đoạn mã sau vào ứng dụng. thành phần. html

  
Open Excel File
  

Thêm mã nhập khẩu

Đối tượng ExcelIO mở tệp đã chọn và trả về kết quả dưới dạng JSON. Dữ liệu JSON này có thể được hiểu trực tiếp bởi SpreadJS, vì vậy chúng tôi sẽ viết mã nhập trong hàm onFileChange() cho sự kiện thay đổi như bên dưới

onFileChange(args: any) {
  const self = this, file = args.srcElement && args.srcElement.files && args.srcElement.files[0];
  if (self.spread && file) {
    self.excelIO.open(file, (json: any) => {
      self.spread.fromJSON(json, {});
      setTimeout(() => {
        alert('load successfully');
      }, 0);
    }, (error: any) => {
      alert('load fail');
    });
  }
}

Thêm mã xuất khẩu

Tương tự, hãy thêm một nút sẽ xử lý chức năng xuất. Để thêm nút xuất, chúng ta có thể sử dụng

  
Save Excel File
  Save Excel!

Chúng tôi cũng cần xử lý sự kiện nhấp chuột của nút này và viết mã của chúng tôi ở đó. SpreadJS lưu dữ liệu dưới dạng JSON và JSON đó có thể được ExcelIO sử dụng để lưu dữ liệu dưới dạng BLOB. Sau này, dữ liệu blob này cần được chuyển đến hàm saveAs() của thành phần trình tiết kiệm tệp

onClickMe(args: any) {
  const self = this;
  const filename = 'exportExcel.xlsx';
  const json = JSON.stringify(self.spread.toJSON());
  self.excelIO.save(json, function (blob) {
    saveAs(blob, filename);
  }, function (error: any) {
    console.log(error);
  });
}

Cần lưu ý rằng chúng tôi đã sử dụng thành phần trình bảo vệ tệp cho chức năng xuất. Để bao gồm trình tiết kiệm tệp trong dự án của bạn, hãy làm theo các bước bên dưới

1. Chạy lệnh “npm install file-saver –save”
2. Chạy lệnh “npm install @types/file-saver –save-dev”
3. Thêm lib bên thứ ba này vào ‘. góc cạnh. json’
1. ________số 8_______
4. Nhập thành phần

1. import {saveAs} from 'file-saver'; 

Bây giờ bạn có thể nhập và xuất thành công các tệp Excel bằng SpreadJS trong Angular.  

Hãy thử tính năng này và nhiều tính năng khác. Tải xuống bản dùng thử của SpreadJS ngay hôm nay

Nếu có thắc mắc hãy để lại bình luận bên dưới. Kiểm tra trang blog của chúng tôi để biết thêm các bài viết như thế này, trình diễn, video và hướng dẫn

Làm cách nào để đọc dữ liệu từ tệp Excel bằng AngularJS?

Linux có thể đọc các tệp Excel không?

Cách đọc dữ liệu từ Excel sang Datatable trong C#?