Cách lưu dữ liệu trong mảng trong JavaScript

Chào mừng bạn đến với hướng dẫn nhanh và các ví dụ về cách xuất một mảng sang tệp CSV trong Javascript. Cần tạo tệp CSV trong ứng dụng web của bạn? . Javascript hiện đại hoàn toàn có khả năng tạo tệp ở phía máy khách – Đọc tiếp để biết các ví dụ

ⓘ Tôi đã bao gồm một tệp zip chứa tất cả mã nguồn khi bắt đầu hướng dẫn này, vì vậy bạn không cần phải sao chép-dán mọi thứ… Hoặc nếu bạn chỉ muốn đi sâu vào

 

 

TLDR – TRANG TRÌNH BÀY NHANH

Chế độ toàn màn hình - Bấm vào đây

 

MỤC LỤC

 

TẢI XUỐNG & LƯU Ý

Đầu tiên, đây là liên kết tải xuống mã ví dụ như đã hứa

 

GHI CHÚ NHANH

Nếu bạn phát hiện ra một lỗi, hãy bình luận bên dưới. Tôi cũng cố gắng trả lời các câu hỏi ngắn, nhưng đó là một người so với cả thế giới… Nếu bạn cần câu trả lời gấp, vui lòng xem danh sách các trang web của tôi để được trợ giúp về lập trình

 

MÃ VÍ DỤ TẢI XUỐNG

Nhấp vào đây để tải xuống tất cả mã nguồn ví dụ, tôi đã phát hành nó theo giấy phép MIT, vì vậy hãy thoải mái xây dựng trên mã nguồn đó hoặc sử dụng nó trong dự án của riêng bạn

 

 

MẢNG JAVASCRIPT VÀO TỆP CSV

Được rồi, bây giờ chúng ta hãy đi vào các ví dụ về cách "xuất" một mảng sang tệp CSV trong Javascript

 

CÁCH TỆP CSV HOẠT ĐỘNG

Job,[email protected],123456,
Joe,[email protected],234567,
"Joi, Doe",[email protected],345678,

Trước khi chúng tôi bắt đầu, đây là một phần thông tin nhanh dành cho những người mới - tệp CSV không là gì ngoài các tệp văn bản đơn giản

• , Các cột được phân tách bằng dấu phẩy
• \r\n Hàng được phân tách bằng dòng mới
• "CELL, WITH COMMA" Nếu một ô chứa dấu phẩy, giá trị sẽ được đặt trong dấu ngoặc kép

 

PHƯƠNG PHÁP 1) TẢI XUỐNG ĐỐI TƯỢNG BLOB

1A) HTML

1-blob-tải xuống. html

1. Để đơn giản hóa việc "chuyển đổi mảng sang CSV", chúng tôi sẽ sử dụng một thư viện nhẹ có tên là csv. js
2. Chỉ cần một nút để bắt đầu bản demo

 

1B) JAVASCRIPT

1-blob-tải xuống. js

function saveCSV () {
  // (A) ARRAY OF DATA
  var array = [
    ["Job", "[email protected]", "123456"],
    ["Joe", "[email protected]", "234567"],
    ["Joi", "[email protected]", "345678"],
    ["Jon", "[email protected]", "456789"],
    ["Jou", "[email protected]", "987654"],
    ["Joy, Doe", "[email protected]", "876543"],
  ];
 
  // (B) CREATE BLOB OBJECT
  var blob = new Blob([CSV.serialize(array)], {type: "text/csv"});
 
  // (C) CREATE DOWNLOAD LINK
  var url = window.URL.createObjectURL(blob);
  var anchor = document.createElement("a");
  anchor.href = url;
  anchor.download = "demo.csv";
 
  // (D) "FORCE DOWNLOAD"
  // NOTE: MAY NOT ALWAYS WORK DUE TO BROWSER SECURITY
  // BETTER TO LET USERS CLICK ON THEIR OWN
  anchor.click();
  window.URL.revokeObjectURL(url);
  anchor.remove();
}

Sẽ không giải thích từng dòng này, nó sẽ khá đơn giản khi bạn đọc qua mã

1. var array Một mảng người dùng giả được lồng vào nhau
2. new Blob([CSV.serialize(array)], {type: "text/csv"}) tạo tệp CSV. Đối với những người không quen biết,
   0 là một “đối tượng nhị phân thô”
3. Do các hạn chế về bảo mật, Javascript phía máy khách không thể lưu trực tiếp CSV
   0. Do đó, toàn bộ “phương pháp vòng vo” này để tạo liên kết tải xuống
4. Cuối cùng, cung cấp tệp CSV dưới dạng tải xuống

 

 

PHƯƠNG PHÁP 2) DÒNG TẬP TIN

2A) HTML

2-tệp-luồng. html

Cùng một câu chuyện cũ, chúng tôi đang sử dụng csv. js để tạo tệp CSV

 

2B) BẢN JAVASCRIPT

2-tệp-luồng. js

async function saveCSV () {
  // (A) ARRAY OF DATA
  var array = [
    ["Job", "[email protected]", "123456"],
    ["Joe", "[email protected]", "234567"],
    ["Joi", "[email protected]", "345678"],
    ["Jon", "[email protected]", "456789"],
    ["Jou", "[email protected]", "987654"],
    ["Joy, Doe", "[email protected]", "876543"],
  ];
 
  // (B) CREATE BLOB OBJECT
  var blob = new Blob([CSV.serialize(array)], {type: "text/csv"});
 
  // (C) FILE HANDLER & FILE STREAM
  const fileHandle = await window.showSaveFilePicker({
    suggestedName : "demo.csv",
    types: [{
      description: "CSV file",
      accept: {"text/csv": [".csv"]}
    }]
  });
  const fileStream = await fileHandle.createWritable();
 
  // (D) WRITE FILE
  await fileStream.write(blob);
  await fileStream.close();
}

Nhưng trong ví dụ này, chúng tôi đang sử dụng một cách khác để lưu tệp CSV đã tạo, bằng cách tạo luồng tệp có thể ghi

• (A & B)
  2 Cùng một mảng người dùng giả và “CSV blob” được lồng vào nhau
• (C) Điểm khác biệt ở đây là chúng ta sử dụng Javascript để mở cửa sổ “save file as” theo chương trình

  • 3 Mở hộp thoại “lưu dưới dạng”

  • 4 Tạo luồng tệp tới tệp người dùng đã chọn
• (D)
  5 Viết tệp CSV

P. S. Hãy lưu ý rằng "mở lưu dưới dạng cửa sổ" không được hỗ trợ trên tất cả các trình duyệt tại thời điểm viết. Xem “kiểm tra khả năng tương thích bên dưới”

 

 

BIT BỔ SUNG & LIÊN KẾT

Đó là tất cả những gì dành cho hướng dẫn và đây là một phần nhỏ về một số tính năng bổ sung và liên kết có thể hữu ích cho bạn

 

HẠN CHẾ

Như bạn có thể thấy, chúng tôi đang viết toàn bộ “chuỗi CSV” vào một đối tượng blob. Điều này hoạt động tốt nếu bạn không có quá nhiều mục để xử lý, nhưng nó sẽ gặp vấn đề về bộ nhớ và hiệu suất với dữ liệu lớn. Mặc dù có thể viết “từng dòng một” bằng phương pháp truyền tệp, nhưng nó không được hỗ trợ đầy đủ trong tất cả các trình duyệt

 

KIỂM TRA TÍNH TƯƠNG THÍCH

• Chức năng mũi tên – CanIUse
• Hiển thị bộ chọn tệp lưu – CanIUse
• Tạo khả năng ghi – CanIUse

Tại thời điểm viết bài, phương thức truyền tệp sẽ không hoạt động trên Firefox

 

LIÊN KẾT và THAM KHẢO

• Tạo & Lưu Tệp Trong Javascript – Code Boxx
• Javascript Đọc tệp CSV thành Mảng/Đối tượng – Code Boxx

 

BẢNG CHEAT INFOGRAPHIC

Cảm ơn bạn đã đọc, và chúng tôi đã đi đến cuối. Tôi hy vọng rằng nó đã giúp bạn hiểu rõ hơn và nếu bạn muốn chia sẻ bất cứ điều gì với hướng dẫn này, vui lòng bình luận bên dưới. Chúc may mắn và mã hóa hạnh phúc

Làm cách nào để lưu trữ dữ liệu trong mảng trong JavaScript?

Làm cách nào để lưu trữ giá trị đầu vào trong mảng trong JavaScript?

Làm cách nào để lưu mảng của mảng trong JavaScript?

Làm cách nào để lưu trữ số trong mảng trong JavaScript?