Ví dụ cdn Exceljs

Question

SheetJS trình bày một giao diện JS đơn giản hoạt động với "Mảng của các mảng" và "Mảng của các đối tượng JS". Các hàm API là các khối xây dựng nên được kết hợp với các API JS khác để giải quyết vấn đề

Nội dung chính Show

Thu thập dữ liệu
Dữ liệu thô
Lọc cho Chủ tịch
Định hình lại mảng
Tạo sổ làm việc
Dọn dẹp sổ làm việc
Xuất một tệp
Bản thử trực tiếp
Chạy bản demo cục bộ
ExcelJS có hỗ trợ XLS không?
Làm cách nào để đọc tệp Excel trong nút js?
Làm cách nào để ghi dữ liệu trong trang tính Excel bằng JavaScript?
ExcelJS là gì?

Cuộc thảo luận tập trung vào tư duy giải quyết vấn đề. Chi tiết API được đề cập trong các phần khác của tài liệu

Mục tiêu của ví dụ này là tạo sổ làm việc XLSX có tên và ngày sinh của Tổng thống Hoa Kỳ. để chuyển sang bản demo trực tiếp. Sơ đồ trình tự dưới đây cho thấy quá trình

Thu thập dữ liệu

Dữ liệu thô

Dữ liệu thô có sẵn ở dạng JSON. Để thuận tiện, nó đã được nhân đôi ở đây

Thu thập dữ liệu đơn giản với

const rows = prez.map(row => ({
  name: row.name.first + " " + row.name.last,
  birthday: row.bio.birthday
}));

1

const url = "https://sheetjs.com/data/executive.json";
const raw_data = await (await fetch(url)).json();

Dữ liệu thô là một mảng các đối tượng. Đây là dữ liệu của John Adams

{
  "id": { /* (data omitted) */ },
  "name": {
    "first": "John",          // <-- first name
    "last": "Adams"           // <-- last name
  },
  "bio": {
    "birthday": "1735-10-19", // <-- birthday
    "gender": "M"
  },
  "terms": [
    { "type": "viceprez", /* (other fields omitted) */ },
    { "type": "viceprez", /* (other fields omitted) */ },
    { "type": "prez", /* (other fields omitted) */ }
  ]
}

Lọc cho Chủ tịch

Bộ dữ liệu bao gồm Aaron Burr, một Phó Tổng thống chưa bao giờ là Tổng thống

const rows = prez.map(row => ({
  name: row.name.first + " " + row.name.last,
  birthday: row.bio.birthday
}));

2 tạo một mảng mới với các hàng mong muốn. Tổng thống đã phục vụ ít nhất một nhiệm kỳ với

const rows = prez.map(row => ({
  name: row.name.first + " " + row.name.last,
  birthday: row.bio.birthday
}));

3 được đặt thành

const rows = prez.map(row => ({
  name: row.name.first + " " + row.name.last,
  birthday: row.bio.birthday
}));

4. Để kiểm tra xem một hàng cụ thể có ít nhất một thuật ngữ

const rows = prez.map(row => ({
  name: row.name.first + " " + row.name.last,
  birthday: row.bio.birthday
}));

4 hay không,

const rows = prez.map(row => ({
  name: row.name.first + " " + row.name.last,
  birthday: row.bio.birthday
}));

6 là một hàm JS gốc khác. Bộ lọc hoàn chỉnh sẽ là

________số 8_______

Định hình lại mảng

Đối với ví dụ này, tên sẽ là tên kết hợp với họ (

const rows = prez.map(row => ({
  name: row.name.first + " " + row.name.last,
  birthday: row.bio.birthday
}));

7) và ngày sinh sẽ có tại

const rows = prez.map(row => ({
  name: row.name.first + " " + row.name.last,
  birthday: row.bio.birthday
}));

8. Sử dụng

const rows = prez.map(row => ({
  name: row.name.first + " " + row.name.last,
  birthday: row.bio.birthday
}));

9, bộ dữ liệu có thể được xoa bóp trong một cuộc gọi

const rows = prez.map(row => ({
  name: row.name.first + " " + row.name.last,
  birthday: row.bio.birthday
}));

Kết quả là một mảng các đối tượng "đơn giản" không lồng vào nhau

[
  { name: "George Washington", birthday: "1732-02-22" },
  { name: "John Adams", birthday: "1735-10-19" },
  // .. one row per President
]

Tạo sổ làm việc

Với tập dữ liệu đã được làm sạch,

[
  { name: "George Washington", birthday: "1732-02-22" },
  { name: "John Adams", birthday: "1735-10-19" },
  // .. one row per President
]

0 tạo một trang tính

const worksheet = XLSX.utils.json_to_sheet(rows);

[
  { name: "George Washington", birthday: "1732-02-22" },
  { name: "John Adams", birthday: "1735-10-19" },
  // .. one row per President
]

1 tạo một sổ làm việc mới và

[
  { name: "George Washington", birthday: "1732-02-22" },
  { name: "John Adams", birthday: "1735-10-19" },
  // .. one row per President
]

2 nối thêm một trang tính vào sổ làm việc. Bảng tính mới sẽ được gọi là "Ngày"

const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, "Dates");

Dọn dẹp sổ làm việc

Dữ liệu nằm trong sổ làm việc và có thể được xuất

Có nhiều cơ hội để cải thiện. các tiêu đề có thể được đổi tên và độ rộng cột có thể được điều chỉnh. SheetJS Pro cung cấp các tùy chọn kiểu dáng bổ sung như kiểu dáng ô và hàng cố định

Thay đổi tên tiêu đề (bấm để hiển thị)

Theo mặc định,

[
  { name: "George Washington", birthday: "1732-02-22" },
  { name: "John Adams", birthday: "1735-10-19" },
  // .. one row per President
]

3 tạo trang tính có hàng tiêu đề. Trong trường hợp này, các tiêu đề đến từ các khóa đối tượng JS. "tên" và "sinh nhật"

Các tiêu đề nằm trong các ô

[
  { name: "George Washington", birthday: "1732-02-22" },
  { name: "John Adams", birthday: "1735-10-19" },
  // .. one row per President
]

4 và

[
  { name: "George Washington", birthday: "1732-02-22" },
  { name: "John Adams", birthday: "1735-10-19" },
  // .. one row per President
]

5.

[
  { name: "George Washington", birthday: "1732-02-22" },
  { name: "John Adams", birthday: "1735-10-19" },
  // .. one row per President
]

6 có thể ghi các giá trị văn bản vào trang tính hiện có bắt đầu từ ô

[
  { name: "George Washington", birthday: "1732-02-22" },
  { name: "John Adams", birthday: "1735-10-19" },
  // .. one row per President
]

4

XLSX.utils.sheet_add_aoa(worksheet, [["Name", "Birthday"]], { origin: "A1" });

Thay đổi độ rộng cột (bấm để hiển thị)

Một số tên dài hơn chiều rộng cột mặc định. Độ rộng của cột được đặt bằng cách đặt thuộc tính trang tính

[
  { name: "George Washington", birthday: "1732-02-22" },
  { name: "John Adams", birthday: "1735-10-19" },
  // .. one row per President
]

8

Dòng sau đặt chiều rộng của cột A thành khoảng 10 ký tự

worksheet["!cols"] = [ { wch: 10 } ]; // set column A width to 10 characters

Một cuộc gọi

[
  { name: "George Washington", birthday: "1732-02-22" },
  { name: "John Adams", birthday: "1735-10-19" },
  // .. one row per President
]

9 trên

const worksheet = XLSX.utils.json_to_sheet(rows);

0 có thể tính chiều rộng tối đa

const max_width = rows.reduce((w, r) => Math.max(w, r.name.length), 10);
worksheet["!cols"] = [ { wch: max_width } ];

Xuất một tệp

const worksheet = XLSX.utils.json_to_sheet(rows);

1 tạo một tệp bảng tính và cố gắng ghi tệp đó vào hệ thống. Trong trình duyệt, nó sẽ cố gắng nhắc người dùng tải xuống tệp. Trong NodeJS, nó sẽ ghi vào thư mục cục bộ

ghi chú

const worksheet = XLSX.utils.json_to_sheet(rows);

2 chỉ ghi các tệp XLSX và được khuyến nghị khi xuất sẽ luôn ở định dạng

const worksheet = XLSX.utils.json_to_sheet(rows);

3.

const worksheet = XLSX.utils.json_to_sheet(rows);

4 dễ bị rung chuyển hơn. Ví dụ này sử dụng

const worksheet = XLSX.utils.json_to_sheet(rows);

1 vì

const worksheet = XLSX.utils.json_to_sheet(rows);

4 không hỗ trợ các định dạng xuất phổ biến khác như

const worksheet = XLSX.utils.json_to_sheet(rows);

7 hoặc

const worksheet = XLSX.utils.json_to_sheet(rows);

8 hoặc

const worksheet = XLSX.utils.json_to_sheet(rows);

9

const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, "Dates");

0 cho phép nén ZIP cho XLSX và các định dạng khác

{
  "id": { /* (data omitted) */ },
  "name": {
    "first": "John",          // <-- first name
    "last": "Adams"           // <-- last name
  },
  "bio": {
    "birthday": "1735-10-19", // <-- birthday
    "gender": "M"
  },
  "terms": [
    { "type": "viceprez", /* (other fields omitted) */ },
    { "type": "viceprez", /* (other fields omitted) */ },
    { "type": "prez", /* (other fields omitted) */ }
  ]
}

0

Bản thử trực tiếp

Bản demo này chạy trong trình duyệt web. Nhấp vào "Nhấp để tạo tệp. " và trình duyệt sẽ tạo tệp XLSX

Kết quả

Đang tải

Trình chỉnh sửa trực tiếp

{
  "id": { /* (data omitted) */ },
  "name": {
    "first": "John",          // <-- first name
    "last": "Adams"           // <-- last name
  },
  "bio": {
    "birthday": "1735-10-19", // <-- birthday
    "gender": "M"
  },
  "terms": [
    { "type": "viceprez", /* (other fields omitted) */ },
    { "type": "viceprez", /* (other fields omitted) */ },
    { "type": "prez", /* (other fields omitted) */ }
  ]
}

1

Chạy bản demo cục bộ

Trình duyệt web
Dòng lệnh (NodeJS)
ứng dụng máy tính để bàn
Ứng dụng di động

Lưu đoạn mã sau vào

const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, "Dates");

1 và mở trang. Trang phải được lưu trữ (không có quyền truy cập

const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, "Dates");

2)

https. //sheetjs. com/pres. html là phiên bản được lưu trữ của trang

{
  "id": { /* (data omitted) */ },
  "name": {
    "first": "John",          // <-- first name
    "last": "Adams"           // <-- last name
  },
  "bio": {
    "birthday": "1735-10-19", // <-- birthday
    "gender": "M"
  },
  "terms": [
    { "type": "viceprez", /* (other fields omitted) */ },
    { "type": "viceprez", /* (other fields omitted) */ },
    { "type": "prez", /* (other fields omitted) */ }
  ]
}

2

Cài đặt các phụ thuộc

{
  "id": { /* (data omitted) */ },
  "name": {
    "first": "John",          // <-- first name
    "last": "Adams"           // <-- last name
  },
  "bio": {
    "birthday": "1735-10-19", // <-- birthday
    "gender": "M"
  },
  "terms": [
    { "type": "viceprez", /* (other fields omitted) */ },
    { "type": "viceprez", /* (other fields omitted) */ },
    { "type": "prez", /* (other fields omitted) */ }
  ]
}

3

Lưu tập lệnh sau vào

const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, "Dates");

3 và chạy

const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, "Dates");

4

đoạn trích. js

{
  "id": { /* (data omitted) */ },
  "name": {
    "first": "John",          // <-- first name
    "last": "Adams"           // <-- last name
  },
  "bio": {
    "birthday": "1735-10-19", // <-- birthday
    "gender": "M"
  },
  "terms": [
    { "type": "viceprez", /* (other fields omitted) */ },
    { "type": "viceprez", /* (other fields omitted) */ },
    { "type": "prez", /* (other fields omitted) */ }
  ]
}

4

thận trọng

Hỗ trợ

const rows = prez.map(row => ({
  name: row.name.first + " " + row.name.last,
  birthday: row.bio.birthday
}));

1 gốc đã được thêm vào trong NodeJS 18. Đối với các phiên bản NodeJS cũ hơn, tập lệnh sẽ báo lỗi

const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, "Dates");

6. Thư viện của bên thứ ba như

const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, "Dates");

7 trình bày một API tương tự để tìm nạp dữ liệu

Ví dụ sử dụng axios (bấm để hiển thị)

Cài đặt các phụ thuộc

{
  "id": { /* (data omitted) */ },
  "name": {
    "first": "John",          // <-- first name
    "last": "Adams"           // <-- last name
  },
  "bio": {
    "birthday": "1735-10-19", // <-- birthday
    "gender": "M"
  },
  "terms": [
    { "type": "viceprez", /* (other fields omitted) */ },
    { "type": "viceprez", /* (other fields omitted) */ },
    { "type": "prez", /* (other fields omitted) */ }
  ]
}

5

Sự khác biệt trong tập lệnh được đánh dấu bên dưới

đoạn trích. js

{
  "id": { /* (data omitted) */ },
  "name": {
    "first": "John",          // <-- first name
    "last": "Adams"           // <-- last name
  },
  "bio": {
    "birthday": "1735-10-19", // <-- birthday
    "gender": "M"
  },
  "terms": [
    { "type": "viceprez", /* (other fields omitted) */ },
    { "type": "viceprez", /* (other fields omitted) */ },
    { "type": "prez", /* (other fields omitted) */ }
  ]
}

6

Các nền tảng phía máy chủ khác (bấm để hiển thị)

Deno
bún

Lưu tập lệnh sau vào

const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, "Dates");

8 và chạy với

const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, "Dates");

9

đoạn trích. ts

{
  "id": { /* (data omitted) */ },
  "name": {
    "first": "John",          // <-- first name
    "last": "Adams"           // <-- last name
  },
  "bio": {
    "birthday": "1735-10-19", // <-- birthday
    "gender": "M"
  },
  "terms": [
    { "type": "viceprez", /* (other fields omitted) */ },
    { "type": "viceprez", /* (other fields omitted) */ },
    { "type": "prez", /* (other fields omitted) */ }
  ]
}

7

Tải xuống https. //cdn. trang tính. com/xlsx-mới nhất/gói/xlsx. mjs đến

XLSX.utils.sheet_add_aoa(worksheet, [["Name", "Birthday"]], { origin: "A1" });

0

Lưu tập lệnh sau vào

const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, "Dates");

3 và chạy với

XLSX.utils.sheet_add_aoa(worksheet, [["Name", "Birthday"]], { origin: "A1" });

2

đoạn trích. js

{
  "id": { /* (data omitted) */ },
  "name": {
    "first": "John",          // <-- first name
    "last": "Adams"           // <-- last name
  },
  "bio": {
    "birthday": "1735-10-19", // <-- birthday
    "gender": "M"
  },
  "terms": [
    { "type": "viceprez", /* (other fields omitted) */ },
    { "type": "viceprez", /* (other fields omitted) */ },
    { "type": "prez", /* (other fields omitted) */ }
  ]
}

8

Lưu tập lệnh sau vào

const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, "Dates");

1

đoạn trích. html

{
  "id": { /* (data omitted) */ },
  "name": {
    "first": "John",          // <-- first name
    "last": "Adams"           // <-- last name
  },
  "bio": {
    "birthday": "1735-10-19", // <-- birthday
    "gender": "M"
  },
  "terms": [
    { "type": "viceprez", /* (other fields omitted) */ },
    { "type": "viceprez", /* (other fields omitted) */ },
    { "type": "prez", /* (other fields omitted) */ }
  ]
}

2

Lưu thông tin sau vào

XLSX.utils.sheet_add_aoa(worksheet, [["Name", "Birthday"]], { origin: "A1" });

4

bưu kiện. json

const prez = raw_data.filter(row => row.terms.some(term => term.type === "prez"));

0

Cài đặt phụ thuộc và xây dựng ứng dụng

const prez = raw_data.filter(row => row.terms.some(term => term.type === "prez"));

1

Chạy ứng dụng đã tạo trong thư mục

XLSX.utils.sheet_add_aoa(worksheet, [["Name", "Birthday"]], { origin: "A1" });

5. Nó sẽ hiện hộp thoại lưu. Sau khi chọn một đường dẫn, ứng dụng sẽ ghi tệp

Thiết lập ban đầu

Thực hiện theo Cài đặt môi trường của tài liệu React Native trước khi thử nghiệm bản demo

Tạo một dự án mới bằng cách chạy các lệnh sau trong Terminal

const prez = raw_data.filter(row => row.terms.some(term => term.type === "prez"));

2

Lưu phần sau vào

XLSX.utils.sheet_add_aoa(worksheet, [["Name", "Birthday"]], { origin: "A1" });

6 trong dự án

Ứng dụng. js

const prez = raw_data.filter(row => row.terms.some(term => term.type === "prez"));

3

Android
iOS

ghi chú

Bản demo Android đã được thử nghiệm trong Windows 10 và macOS

Kiểm tra ứng dụng trong trình mô phỏng Android

const prez = raw_data.filter(row => row.terms.some(term => term.type === "prez"));

4

Sau khi nhấp vào "Nhấn để xuất", ứng dụng sẽ hiển thị cảnh báo với vị trí của tệp được tạo

ExcelJS có hỗ trợ XLS không?

exceljs không hỗ trợ xls , đây là định dạng độc quyền, cũ hơn. xlsx là một tiêu chuẩn mở và chỉ nén xml, rất dễ hỗ trợ.

Làm cách nào để đọc tệp Excel trong nút js?

Đọc tệp .

Mở cửa sổ terminal của bạn và gõ, npm init. Bạn chỉ có thể chấp nhận các giá trị mặc định sẽ làm cho tệp chính của chúng ta **index. .

Trong cửa sổ đầu cuối của bạn, hãy nhập nội dung sau để cài đặt gói làm cho tất cả hoạt động. npm cài đặt tệp đọc-excel

Tạo một tệp có tên là chỉ mục. js và mở nó

Làm cách nào để ghi dữ liệu trong trang tính Excel bằng JavaScript?

Cách nhập và xuất Excel XLSX bằng JavaScript .

Thiết lập Dự án Bảng tính JavaScript

Thêm mã nhập Excel

Thêm dữ liệu vào tệp Excel đã nhập

Thêm một biểu đồ thu nhỏ

Thêm mã xuất Excel

ExcelJS là gì?

ExcelJS là gói JavaScript hoạt động như một trình quản lý sổ làm việc Excel . exceljs có thể đọc, thao tác và ghi dữ liệu và kiểu bảng tính vào XLSX và JSON, theo tài liệu chính thức của nó. Nó được thiết kế ngược từ các tệp bảng tính Excel dưới dạng dự án.

programming excel

Ví dụ cdn Exceljs

Thu thập dữ liệu

Dữ liệu thô

Lọc cho Chủ tịch

Định hình lại mảng

Tạo sổ làm việc

Dọn dẹp sổ làm việc

Xuất một tệp

Bản thử trực tiếp

Chạy bản demo cục bộ

ExcelJS có hỗ trợ XLS không?

Làm cách nào để đọc tệp Excel trong nút js?

Làm cách nào để ghi dữ liệu trong trang tính Excel bằng JavaScript?

ExcelJS là gì?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội