Sheetjs đọc ô

Với tùy chọn đọc

npm install xlsx –save
1, thư viện xlsx cố chuyển đổi ô kiểu ngày thành đối tượng js Date. Tuy nhiên, nó dường như không tôn trọng thuộc tính
npm install xlsx –save
2 của trang tính khi xây dựng đối tượng js Date. https. //github. com/SheetJS/js-xlsx/issues/126

excel_date. xlsx

const xlsx = require('xlsx');
const ws = xlsx.readFile('./excel_date.xlsx', {cellDates: true});
console.log('date1904:', ws.Workbook.WBProps.date1904);
const firstSheet = ws.Sheets[ws.SheetNames[0]];
console.log(xlsx.utils.sheet_to_json(firstSheet));

Đoạn code trên với file excel đính kèm cho kết quả như sau

date1904: true
[ { Date: 2014-12-30T14:59:08.000Z,
    String: 'I am text',
    number: 1 },
  { Date: '2019-01-01', String: 1, number: 2 },
  { Date: 2014-12-30T14:59:08.000Z, String: '3', number: 3 },
  { Date: 2014-12-30T14:59:08.000Z, String: 2, number: 4 } ]

Tôi đã mong đợi rằng các đối tượng Ngày js được tạo là '2019-01-01', nhưng chúng bị sai lệch do sự cố

npm install xlsx –save
2. Tôi đã chuyển đổi tất cả các giá trị Ngày js trong chương trình của mình. Nhưng tôi nghĩ sẽ tốt hơn nếu thư viện thực hiện chuyển đổi kỳ diệu này để người dùng không cần phải cân nhắc
npm install xlsx –save
2 nữa. Tôi có thiếu tùy chọn hữu ích không?

Ngày nay, hầu hết việc tiếp nhận thông tin của chúng ta diễn ra trực tuyến. Đặc biệt là khi bạn cần một cách thuận tiện để nhanh chóng truy cập, xem, lọc và phân tích lượng lớn dữ liệu, thì không có công cụ nào tốt hơn trình duyệt web. Hãy nghĩ về thời gian khởi hành và hạ cánh của chuyến bay, dữ liệu trao đổi chứng khoán hoặc trực quan hóa các xu hướng khác nhau. các ứng dụng web tương ứng của họ tốt hơn hầu hết mọi thứ khác

“Hầu như” vì sẽ có những tình huống khi sự thuận tiện không phải là KPI quan trọng nhất của bạn và bạn sẽ cần truy cập cục bộ vào toàn bộ tập dữ liệu

  • Một phần mềm chuyên dụng (e. g. Excel) với các chức năng mở rộng sẽ được sử dụng tốt hơn nhiều so với lưới trình duyệt có thể lọc, đặc biệt khi nói đến công việc chuyên sâu hơn (nghĩ về trục, macro, v.v. )
  • Chia sẻ dữ liệu (đặc biệt nếu đã được xử lý/phân tích) sẽ dễ dàng hơn nhiều khi có sẵn tệp
  • Chuyển đổi qua lại giữa bạn (/ trình duyệt của bạn) và máy chủ (/ chương trình phụ trợ) có khả năng làm chậm mọi thứ

Vì vậy, đối với mỗi nhiệm vụ, hãy sử dụng công cụ chuyên dụng của nó

  • Để truy cập nhanh và tổng quan đầu tiên. kiểm tra dữ liệu trong trình duyệt
  • Để chia sẻ dữ liệu và công việc chuyên sâu. kéo dữ liệu vào tệp cục bộ (Excel)

Đây là một sự cố rất đơn giản của quá trình

Sheetjs đọc ô

Để thực hiện “Phần B”, chúng tôi làm việc với SheetJS – vì vậy chúng ta hãy xem chi tiết, phải không?

SheetJS là gì và nó làm gì?

SheetJS là thư viện JavaScript cho phép phân tích cú pháp và viết các định dạng bảng tính khác nhau, bao gồm xlsx của Excel. Nó không phải là thư viện duy nhất làm được điều đó, nhưng cho đến nay nó là thư viện phổ biến nhất - có thể bởi vì nó có hai biến thể. cộng đồng (miễn phí) và thương mại

Biến thể miễn phí cung cấp hầu hết các tính năng bạn cần, chẳng hạn như

  • Tạo, phân tích cú pháp, điền và chỉnh sửa bảng tính
  • Chuyển đổi bảng tính sang CSV và HTML
  • Xuất bảng HTML dưới dạng bảng tính
  • Thao tác với các ô (gộp, ẩn/bỏ ẩn)
  • Thao tác với hàng và cột
  • Chèn nhận xét

Phiên bản thương mại cung cấp nhiều tính năng nâng cao hơn, như

  • Hỗ trợ VBA và Macro
  • Thêm hình ảnh và biểu đồ
  • Làm việc với văn bản, phông chữ, màu sắc và đường viền phong phú
  • Hỗ trợ công thức và siêu liên kết
  • Bảng tổng hợp và biểu đồ
  • Chuyển đổi Html được tạo kiểu thành bảng tính

Tại sao lại là SheetJS?

  • Nhanh
  • Đơn giản để sử dụng
  • Cung cấp hướng dẫn toàn diện
  • Nó phổ biến và có một diễn đàn hỗ trợ tích cực

SheetJS hoạt động như thế nào?

SheetJS đang tập trung vào chuyển đổi dữ liệu. Thay vì phải đọc (hoặc ghi vào) từng ô của bảng tính một cách khó khăn, nó hỗ trợ bạn ánh xạ bảng tính của mình thành một đối tượng JS. Vì vậy, nó cung cấp một lớp trung gian để thao tác dữ liệu

Sau khi ánh xạ này được thực hiện, điều kỳ diệu của việc thực sự chuyển dữ liệu sang (hoặc từ) định dạng bảng tính cơ bản cồng kềnh sẽ diễn ra ở hậu trường

SheetJS cung cấp một số chức năng để làm việc với dữ liệu, vì vậy về cơ bản mọi thứ bạn cần để thao tác dữ liệu

Trong bài viết này, tôi sẽ cung cấp một cái nhìn tổng quan về khả năng của thư viện này, tập trung vào cách tạo tệp Excel

Cài đặt

Trước tiên, để sử dụng thư viện, chúng ta cần cài đặt nó vào dự án của mình. Để cài đặt thư viện cho ứng dụng của bạn, bạn cần chạy dòng lệnh tiếp theo

npm install xlsx –save

SheetJS có một lớp công cụ utils giúp chúng ta

  • Thêm dữ liệu vào bảng dữ liệu
  • Chuyển đổi các loại tệp khác nhau thành sổ làm việc
  • Chuyển đổi sổ làm việc thành các loại tệp khác nhau
  • Hoạt động của sổ làm việc và ô, v.v.

Tạo một tệp Excel

Để tạo một file Excel trước tiên chúng ta cần tạo các phần của file. Chúng tôi biết rằng một tệp Excel được tạo thành từ một sổ làm việc có một hoặc nhiều trang tính

A. Chúng ta có thể tạo một trang tính từ 3 loại định dạng khác nhau (mảng của mảng, json và bảng DOM)

Tạo từ Mảng của mảng (aoa)

const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(jsonData);

Tạo từ JSON

const worksheet: XLSX.WorkSheet = XLSX.utils.aoa_to_sheet(aoaData);

Tạo từ bảng DOM

const worksheet: XLSX.WorkSheet = XLSX.utils.table_to_sheet(document.getElementById('my-table'));

B. Khi chúng tôi có một trang tính (hoặc nhiều trang tính), chúng tôi phải thêm nó/chúng vào sổ làm việc

Chức năng tiếp theo tạo một sổ làm việc mới

const workbook: XLSX.WorkBook = XLSX.utils.book_new();

Các chức năng sau thêm/gắn một trang tính mới vào sổ làm việc

XLSX.utils.book_append_sheet(workbook, worksheet, 'ExampleSheet');

Để ghi/tải dữ liệu sổ làm việc xuống một tệp, chúng tôi có chức năng sau

________số 8

Điền vào các trang tính

Quá trình điền các ô được thực hiện bởi hàm utils tạo một trang tính từ các định dạng dữ liệu khác nhau (bảng json, aoa, DOM)

Hãy lấy ví dụ về một mảng json của các đối tượng trông như thế này

this.employees = [
    {
      name:'Alin', age:20, experience: 0, phone:'0764853255', birthDate: '2000-01-02'
    },
    {
      name:'Marian', age:30, experience: 0, phone:'0248569122', birthDate: '1900-15-07'
    },
    {
      name:"Ruben", age:20, experience: 0, phone:'0723651241', birthDate: '2000-01-02'
    },
    {
      name:'Ioana', age:30, experience: 0, phone:'0762315901', birthDate: '1900-01-02'
    },
    {
      name:'Maria', age:25, experience: 3, phone:'0257888360', birthDate: '1995-01-02'
    },
    {
     name:'Bogdan', age:23, experience: 1, phone:'0737221235', birthDate: '1997-01-02'
    }
  ]

Chức năng XLSX. đồ dùng. json_to_sheet(employees) lấy tên và thêm nó làm tiêu đề trong bảng tính Excel, cũng như các giá trị từ json và thêm chúng làm giá trị trong các ô

Kết quả sẽ như thế này

Sheetjs đọc ô

Đọc và phân tích một sổ làm việc

Thư viện giúp bạn có thể đọc và phân tích cú pháp thông qua tệp Excel. Có hai lựa chọn để làm điều đó

Đầu tiên với chức năng đọc .

date1904: true
[ { Date: 2014-12-30T14:59:08.000Z,
    String: 'I am text',
    number: 1 },
  { Date: '2019-01-01', String: 1, number: 2 },
  { Date: 2014-12-30T14:59:08.000Z, String: '3', number: 3 },
  { Date: 2014-12-30T14:59:08.000Z, String: 2, number: 4 } ]
0

Hàm đọc có 2 tham số. đầu tiên là dữ liệu bạn muốn đọc; . Thuộc tính MyData thực sự là một chuỗi ký tự đại diện cho sổ làm việc. Chúng tôi có thể có được điều đó với sự trợ giúp của FileReader (cho phép bạn đọc nội dung của các tệp được lưu trữ trên máy tính của người dùng khác)

date1904: true
[ { Date: 2014-12-30T14:59:08.000Z,
    String: 'I am text',
    number: 1 },
  { Date: '2019-01-01', String: 1, number: 2 },
  { Date: 2014-12-30T14:59:08.000Z, String: '3', number: 3 },
  { Date: 2014-12-30T14:59:08.000Z, String: 2, number: 4 } ]
1

Thứ hai với chức năng readFile .

const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(jsonData);
0

Hàm readFile phân biệt với hàm read bởi đối số đầu tiên, là tên của tệp chúng ta muốn đọc.

trong ví dụ của chúng tôi. đối với các tùy chọn phân tích cú pháp, chúng tôi có

  • loại. nhị phân, được sử dụng khi bạn muốn đọc tệp dưới dạng Chuỗi nhị phân (cách đọc tệp Excel phổ biến nhất),
  • và tùy chọn cellDates được đặt thành true, có nghĩa là ngày được lưu trữ dưới dạng loại d (một đối tượng/chuỗi Ngày JS được phân tích cú pháp thành Ngày)

Có nhiều tùy chọn hơn để lựa chọn, có thể tìm thấy ở đây. https. //www. npmjs. com/gói/xlsx#parsing-options

Khi phân tích cú pháp một bảng tính, bạn có thể

  • chọn sử dụng dữ liệu nguyên trạng;
  • hoặc can thiệp và thao tác thông tin trước (cho mọi cột hoặc mọi ô, nếu cần)

Ví dụ: hãy lấy một bảng tính Excel có ngày trong một cột nhưng ở định dạng hỗn hợp (chuỗi, ngày, số). Nếu chúng tôi nhập tệp vào ứng dụng của mình và muốn đọc những ngày đó, thì sẽ được coi là số (theo mặc định) chứ không phải ngày thực tế mà chúng đại diện. Để làm được điều đó, bạn có thể cần chuyển đổi tất cả các định dạng ngày đó thành một đối tượng Ngày mới hợp lệ trong JS

Phần mã thực hiện điều đó như sau

const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(jsonData);
1

The detailsColumnMap là một mảng json gồm các đối tượng biểu thị ánh xạ các cột trong Excel.

Hàm chuyển đổi định dạng ngày số thành đối tượng Ngày JS hợp lệ như sau

const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(jsonData);
2

Thao tác với các ô (hợp nhất)

Chúng tôi sẽ lấy tệp Excel mà chúng tôi đã tạo trước đó và thao tác với một số ô trong đó

Sheetjs đọc ô

Hãy thử hợp nhất 2 ô đầu tiên A1 với B1, đoạn mã sau thực hiện điều đó

const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(jsonData);
3

Trước tiên, chúng tôi tạo hợp nhất (đặt phạm vi mà chúng tôi muốn hợp nhất – s. bắt đầu, r=hàng, c=cột, e. chấm dứt)

Sau đó, nếu không có sự hợp nhất nào tồn tại, chúng tôi tạo một mảng hợp nhất mới và thêm sự hợp nhất mà chúng tôi vừa tạo

Đây là kết quả

Sheetjs đọc ô

Nếu muốn gộp nhiều ô bạn có thể làm như sau

const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(jsonData);
4

Và kết quả sẽ như thế này

Sheetjs đọc ô

Thao tác với hàng & cột (ẩn/bỏ ẩn)

Ẩn hoặc hiện hàng/cột cũng tương tự như gộp ô. Lấy ví dụ tương tự như trên, cái trước trông như thế này

Sheetjs đọc ô

Trang tính có một mảng các đối tượng thuộc tính cột. [ ‘. cols’ ] – bạn có thể đặt mức độ hiển thị và chiều rộng của cột. Tương tự cho các hàng. [ ‘. rows’ ] – tại đây, bạn có thể đặt chế độ hiển thị cũng như chiều cao và mức của hàng.

Vậy để ẩn/bỏ ẩn một số cột, hàng ta làm như sau

const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(jsonData);
5

Kết quả là như sau

Sheetjs đọc ô

Chèn nhận xét

Đối với các ý kiến ​​​​chúng tôi có chức năng sau

const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(jsonData);
6

Hoặc chúng ta có thể làm như thế này

const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(jsonData);
7

Kết quả trông như thế này

Sheetjs đọc ô

Bạn thậm chí có thể ẩn nhận xét bằng cách thêm dòng mã sau

const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(jsonData);
8

So sánh & Hạn chế

Có thể đọc một lượng dữ liệu khá lớn, nhưng vượt quá một số ngưỡng có thể dẫn đến sự cố

Như đã nhắc đến trước đó. phiên bản miễn phí của thư viện hơi hạn chế nhưng vẫn đủ cho hầu hết các tình huống. Nhiều tính năng chuyên biệt hơn có sẵn trong phiên bản thương mại, chẳng hạn như kiểu dáng, thêm biểu đồ, macro và VBA, v.v.

Thư viện chạy bên trong Môi trường thời gian chạy JS của trình duyệt nên nó phụ thuộc vào cơ sở hạ tầng của người dùng cuối. Các hoạt động nặng, liên quan đến bảng tính lớn, có thể dẫn đến các vấn đề về hiệu suất đối với các trình duyệt cũ và PC cũ

__

Bảng và lưới trong trình duyệt vẫn là tùy chọn thuận tiện nhất để truy cập dữ liệu và có được thông tin chi tiết đầu tiên nhanh chóng. Nhưng nếu trường hợp sử dụng của bạn liên quan đến công việc sâu hơn với dữ liệu mà bạn chỉ có thể lấy từ một ứng dụng web, thì hãy xuất sang Excel qua JavaScript/SheetJS. Tại Berg Software, chúng tôi khuyên bạn nên