Làm cách nào để tạo và tải xuống Excel trong JavaScript?

Trong DronahQ Studio, chúng tôi có thể tạo một tệp Excel có định dạng xlsx và tải xuống tệp tương tự từ dữ liệu JSON. Dữ liệu JSON này có thể được lấy thông qua các phương tiện khác nhau như kết nối Cơ sở dữ liệu, API, trang tính, v.v.

Để hiểu điều này, chúng tôi sẽ thực hiện ba trường hợp sử dụng, trong đó chúng tôi sẽ lấy dữ liệu ở định dạng JSON và tạo một tệp Excel từ đó, sau đó tải xuống chỉ bằng một cú nhấp chuột

1. Tải xuống nhiều hàng từ bảng
2. Tải xuống trực tiếp từ cơ sở dữ liệu bằng kho lưu trữ dữ liệu
3. Tải trực tiếp từ cơ sở dữ liệu

Điều kiện tiên quyết

Biết JavaScript là một lợi thế. Điều này sẽ giúp hiểu rõ hơn về việc tạo đối tượng và làm việc với các thư viện JavaScript

Thư viện được sử dụng

Ở đây tôi đã sử dụng thư viện SheetJs, đây là thư viện JavaScript của Excel cho phép chúng tôi tạo sổ làm việc Excel và chuyển đổi JSON thành tệp xlsx có thể tải xuống.
Để sử dụng thư viện này trước tiên chúng ta cần nhập nó vào studio của mình.

1. Tạo ứng dụng từ studio, Cài đặt > Tập lệnh tùy chỉnh

tập lệnh tùy chỉnh653×696 82. 4KB

1. Chọn Nhập thư viện và dán URL tệp. https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.13.1/xlsx.full.min.js rồi Nhập khẩu. Sau khi nhập, hãy lưu tập lệnh và nó sẽ được hiển thị trên cùng một cửa sổ

tập lệnh được nhập946×508 119 KB

Bây giờ, thư viện này đã được nhập. Tất cả các mô-đun và tiện ích liên quan đến thư viện của chúng tôi có thể được truy cập trên DronaHQ Studio trong khi viết mã JavaScript

Tải xuống nhiều hàng đã chọn từ bảng

Trong trường hợp sử dụng này, chúng tôi sẽ lấy dữ liệu và sau đó hiển thị dữ liệu đó trên ứng dụng của chúng tôi ở chế độ xem lưới bảng. Chúng tôi sẽ tải xuống nhiều hàng đã chọn từ bảng ở định dạng xlsx

1. Nhận một lưới Bảng và chuyển đến các thuộc tính của nó và trong phần hiển thị, chọn Có (với nhiều lựa chọn) của Hộp kiểm

1. Vào Bind data of table grid chọn Connector và kết nối với cơ sở dữ liệu. Ở đây tôi đang sử dụng MongoDB, người ta có thể sử dụng bất kỳ phương pháp nào khác để kết nối dữ liệu, như API, trang tính, v.v.
2. Kết nối các phím liên kết với lưới bảng và sau đó dữ liệu sẽ được hiển thị

phím479×843 115 KB

lượt xem946×318 29. 7KB

1. Đặt Nút từ Điều khiển trong phần Nổi bật cho ứng dụng của bạn. Nút này sẽ được sử dụng để xuống dữ liệu đã chọn từ lưới bảng ở định dạng xlsx

nút946×189 6. 98KB

1. Chuyển đến Hành động của nút và nhấp vào button_click. Thao tác này sẽ mở luồng hành động. Thêm một hành động trên màn hình của Mã JS
2. Thêm thông số đầu vào. Các tham số đầu vào này sẽ được sử dụng để lấy dữ liệu từ hàng đã chọn của bảng và cung cấp cho nó một tên biến có thể được truy cập trong trình chỉnh sửa mã JavaScript của chúng tôi

tham số đầu vào911×714 112 KB

1. Trong trình chỉnh sửa mã JavaScript, hãy viết mã bằng SheetJ đã nhập của chúng tôi – xlsx min. js để chuyển đổi JSON thành trang tính xlsx và tải xuống

Mã số

let data = []; 
  
for(let i = 0; i < ids.length; i++) { 
data.push({ 
id: ids[i], 
name: names[i], 
location: locations[i], 
injuryType: injurytypes[i], 
action: actions[i] 
}) 
} 
filename='reports.xlsx'; 
       
        var ws = XLSX.utils.json_to_sheet(data); 
        var wb = XLSX.utils.book_new(); 
        XLSX.utils.book_append_sheet(wb, ws, "People"); 
        XLSX.writeFile(wb,filename); 

giải thích mã

• Chúng tôi đã tạo một đối tượng dữ liệu trống để lưu trữ thông tin chi tiết của các biến được truyền trong hàm là id, tên, vị trí, loại chấn thương và hành động
• Vì có nhiều hàng được chọn, các biến cũng sẽ nhận được nhiều dữ liệu, vì vậy chúng tôi sẽ lặp lại từng bộ mảng có các hàng chi tiết một cách khôn ngoan bằng cách thêm một vòng lặp từ 0 đến không. Số id (độ dài)
• Tiếp theo, chúng ta có một biến tên tệp quyết định tên của tệp và định dạng của tệp. bài báo cáo. tín hiệu xlsx Xuất XLSX
• Tiếp theo, chúng tôi đã tạo một biến ws với json_to_sheet(data). Hàm tiện ích json_to_sheet duyệt một mảng các đối tượng JS theo thứ tự để tạo một đối tượng trang tính. Theo mặc định, nó sẽ tạo một hàng tiêu đề và một hàng cho mỗi đối tượng trong mảng. Dữ liệu là đối tượng JS được tạo với chi tiết bảng của chúng tôi
• Tiếp theo, chúng tôi đã tạo một biến wb với book_new(). Hàm tiện ích book_new tạo một sổ làm việc trống không có trang tính. Phần mềm bảng tính thường yêu cầu ít nhất một trang tính và thực thi yêu cầu trong giao diện người dùng. Thư viện này thực thi yêu cầu tại thời điểm ghi, đưa ra lỗi nếu sổ làm việc trống được chuyển để ghi hàm
• Bây giờ chúng ta đã tạo một trang tính và sổ làm việc, bây giờ chúng ta cần thêm phần này vào một trang tính. Hàm tiện ích book_append_sheet nối thêm một trang tính vào sổ làm việc. Chúng tôi đã sử dụng book_append_sheet(wb, ws, “People”), ở đây đối số thứ ba chỉ định tên trang tính mong muốn. Nhiều trang tính có thể được thêm vào sổ làm việc bằng cách gọi hàm nhiều lần
• Cuối cùng, chúng tôi sử dụng writeFilea(wb, filename). Bây giờ chúng ta đã nối thêm trang tính của mình vào sổ làm việc, phương thức writeFile đóng gói dữ liệu và cố gắng lưu tệp mới. Nó xử lý việc đóng gói để ghi wb vào tên tệp và thử tải xuống cục bộ

mã901×922 99. 8KB

1. Kiểm tra tập lệnh, cửa sổ tải xuống sẽ xuất hiện trên màn hình. Nó có nghĩa là nó đang hoạt động. Nhấp vào tiếp tục và kết thúc

luồng tác vụ946×562 67. 8KB

Bây giờ chúng tôi đã hoàn tất việc tải xuống nhiều hàng đã chọn từ bảng ở định dạng xlsx

hàng đã chọn946×184 19. 1KB

kết quả946×428 62. 5KB

Tải xuống trực tiếp từ cơ sở dữ liệu bằng kho lưu trữ dữ liệu

Trong trường hợp sử dụng này, chúng tôi sẽ sử dụng Data Store để lưu trữ dữ liệu từ trình kết nối và sau đó là một nút sẽ tải xuống toàn bộ dữ liệu trực tiếp sau khi chuyển đổi nó thành tệp xlsx

1. Kéo và thả Kho lưu trữ dữ liệu từ Điều khiển trong phần Nâng cao

kho dữ liệu946×649 49. 5KB

1. Vào Bind data của data store chọn Connector và connect vào database. Ở đây tôi đang sử dụng Supabase, người ta có thể sử dụng bất kỳ phương pháp nào khác để kết nối dữ liệu, như API, trang tính, v.v.
2. Kết nối các phím ràng buộc

trình kết nối489×739 103 KB

1. Đặt Nút từ Điều khiển trong phần Nổi bật cho ứng dụng của bạn. Nút này sẽ được sử dụng để xuống dữ liệu đã chọn từ lưới bảng ở định dạng xlsx

nút946×189 6. 98KB

1. Chuyển đến Hành động của nút và nhấp vào button_click. Thao tác này sẽ mở luồng hành động. Thêm một hành động trên màn hình của Mã JS
2. Thêm thông số đầu vào. Các tham số đầu vào này sẽ được sử dụng để lấy dữ liệu từ Kho lưu trữ dữ liệu và cung cấp cho nó một tên biến có thể được truy cập trong trình chỉnh sửa mã JavaScript của chúng tôi

tham số đầu vào911×556 89 KB

1. Trong trình chỉnh sửa mã JavaScript, hãy viết mã bằng SheetJ đã nhập của chúng tôi – xlsx min. js để chuyển đổi JSON thành trang tính xlsx và tải xuống

Mã.
let data = [];

for(let i = 0; i < id.length; i++) { 
data.push({ 
id: id[i], 
Position: pos[i], 
Location: loc[i], 
  
}) 
} 
filename='reports.xlsx'; 
       
        var ws = XLSX.utils.json_to_sheet(data); 
        var wb = XLSX.utils.book_new(); 
        XLSX.utils.book_append_sheet(wb, ws, "People"); 
        XLSX.writeFile(wb,filename); 

giải thích mã

• Chúng tôi đã tạo một đối tượng dữ liệu trống để lưu trữ thông tin chi tiết của các biến được truyền trong hàm là id, pos và loc
• Vì có nhiều dữ liệu trong kho lưu trữ dữ liệu từ trình kết nối, do đó, các biến cũng sẽ nhận được nhiều dữ liệu, chúng tôi sẽ lặp lại từng bộ mảng có các hàng chi tiết một cách khôn ngoan bằng cách thêm một vòng lặp từ 0 đến không. Số id (độ dài)
• Tiếp theo, chúng ta có một biến tên tệp quyết định tên của tệp và định dạng của tệp. bài báo cáo. tín hiệu xlsx Xuất XLSX
• Tiếp theo, chúng tôi đã tạo một biến ws với json_to_sheet(data). Hàm tiện ích json_to_sheet duyệt một mảng các đối tượng JS theo thứ tự để tạo một đối tượng trang tính. Theo mặc định, nó sẽ tạo một hàng tiêu đề và một hàng cho mỗi đối tượng trong mảng. Dữ liệu là đối tượng JS được tạo với chi tiết bảng của chúng tôi
• Tiếp theo, chúng tôi đã tạo một biến wb với book_new(). Hàm tiện ích book_new tạo một sổ làm việc trống không có trang tính. Phần mềm bảng tính thường yêu cầu ít nhất một bảng tính và *nép buộc yêu cầu trong giao diện người dùng. Thư viện này thực thi yêu cầu tại thời điểm ghi, đưa ra lỗi nếu sổ làm việc trống được chuyển để ghi hàm
• Bây giờ chúng ta đã tạo một trang tính và sổ làm việc, bây giờ chúng ta cần thêm phần này vào một trang tính. Hàm tiện ích book_append_sheet nối thêm một trang tính vào sổ làm việc. Chúng tôi đã sử dụng *ook_append_sheet(wb, ws, “People”), ở đây đối số thứ ba chỉ định tên trang tính mong muốn. Nhiều trang tính có thể được thêm vào sổ làm việc bằng cách gọi hàm nhiều lần
• Cuối cùng, chúng tôi sử dụng writeFilea(wb, filename). Bây giờ chúng ta đã nối thêm trang tính của mình vào sổ làm việc, phương thức writeFile đóng gói dữ liệu và cố gắng lưu tệp mới. Nó xử lý việc đóng gói để ghi wb vào tên tệp và thử tải xuống cục bộ

mã916×817 145 KB

1. Kiểm tra tập lệnh, cửa sổ tải xuống sẽ xuất hiện trên màn hình. Nó có nghĩa là nó đang hoạt động. Nhấp vào tiếp tục và kết thúc

luồng tác vụ946×578 70. 7KB

Bây giờ chúng tôi đã hoàn tất việc tải xuống dữ liệu trực tiếp từ cơ sở dữ liệu ở định dạng xlsx

kết quả946×435 48. 7KB

Tải xuống trực tiếp từ cơ sở dữ liệu

Trong trường hợp sử dụng này, chúng tôi sẽ trực tiếp tải xuống dữ liệu từ cơ sở dữ liệu mà không sử dụng bất kỳ mẫu giao diện người dùng nào như lưới bảng hoặc kho lưu trữ dữ liệu. Chúng tôi sẽ chỉ cần đặt một nút sẽ tải xuống tất cả các chi tiết bằng một cú nhấp chuột

Làm cách nào để tạo và tải xuống tệp Excel trong JavaScript?

Làm cách nào để tải xuống tệp Excel trong JavaScript?

Làm cách nào để tạo tệp Excel trong JS?

Làm cách nào để xuất dữ liệu JSON sang tệp Excel trong JavaScript?