programming javascript

Lưu () làm gì trong javascript?

Chào mừng bạn đến với hướng dẫn cách tạo và lưu tệp trong Javascript. Chà, đây sẽ là một quá trình phức tạp cho người mới bắt đầu. Để mọi thứ đơn giản – Lưu tệp trên NodeJS phía máy chủ rất dễ dàng, nhưng thật khó để lưu trực tiếp tệp ở phía máy khách do các hạn chế về bảo mật. Điều đó nói rằng, có nhiều phương pháp chúng ta có thể sử dụng

Các cách có thể để tạo và lưu tệp trong Javascript là

  1. Sử dụng thư viện có tên là FileSaver – 
    // [A] CREATE BLOB OBJECT
var myBlob = new Blob[["CONTENT"], {type: "text/plain"}];

// [B] CREATE DOWNLOAD LINK
var url = window.URL.createObjectURL[myBlob];
var anchor = document.createElement["a"];
anchor.href = url;
anchor.download = "demo.txt";
    
// [C] "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];
document.removeChild[anchor];
    1
  2. Tạo một đối tượng blob và cung cấp tính năng “lưu dưới dạng”
    • // [A] CREATE BLOB OBJECT
var myBlob = new Blob[["CONTENT"], {type: "text/plain"}];

// [B] CREATE DOWNLOAD LINK
var url = window.URL.createObjectURL[myBlob];
var anchor = document.createElement["a"];
anchor.href = url;
anchor.download = "demo.txt";
    
// [C] "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];
document.removeChild[anchor];
      2
    • // [A] CREATE BLOB OBJECT
var myBlob = new Blob[["CONTENT"], {type: "text/plain"}];

// [B] CREATE DOWNLOAD LINK
var url = window.URL.createObjectURL[myBlob];
var anchor = document.createElement["a"];
anchor.href = url;
anchor.download = "demo.txt";
    
// [C] "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];
document.removeChild[anchor];
      3
    • // [A] CREATE BLOB OBJECT
var myBlob = new Blob[["CONTENT"], {type: "text/plain"}];

// [B] CREATE DOWNLOAD LINK
var url = window.URL.createObjectURL[myBlob];
var anchor = document.createElement["a"];
anchor.href = url;
anchor.download = "demo.txt";
    
// [C] "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];
document.removeChild[anchor];
      4
    • // [A] CREATE BLOB OBJECT
var myBlob = new Blob[["CONTENT"], {type: "text/plain"}];

// [B] CREATE DOWNLOAD LINK
var url = window.URL.createObjectURL[myBlob];
var anchor = document.createElement["a"];
anchor.href = url;
anchor.download = "demo.txt";
    
// [C] "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];
document.removeChild[anchor];
      0
  3. Tải dữ liệu lên, lưu trữ trên máy chủ
    • // [A] CREATE BLOB OBJECT
var myBlob = new Blob[["CONTENT"], {type: "text/plain"}];

// [B] CREATE DOWNLOAD LINK
var url = window.URL.createObjectURL[myBlob];
var anchor = document.createElement["a"];
anchor.href = url;
anchor.download = "demo.txt";
    
// [C] "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];
document.removeChild[anchor];
      1
    • // [A] CREATE BLOB OBJECT
var myBlob = new Blob[["CONTENT"], {type: "text/plain"}];

// [B] CREATE DOWNLOAD LINK
var url = window.URL.createObjectURL[myBlob];
var anchor = document.createElement["a"];
anchor.href = url;
anchor.download = "demo.txt";
    
// [C] "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];
document.removeChild[anchor];
      2
    • // [A] CREATE BLOB OBJECT
var myBlob = new Blob[["CONTENT"], {type: "text/plain"}];

// [B] CREATE DOWNLOAD LINK
var url = window.URL.createObjectURL[myBlob];
var anchor = document.createElement["a"];
anchor.href = url;
anchor.download = "demo.txt";
    
// [C] "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];
document.removeChild[anchor];
      3
  4. Tạo một luồng tệp có thể ghi
    • // [A] CREATE BLOB OBJECT
var myBlob = new Blob[["CONTENT"], {type: "text/plain"}];

// [B] CREATE DOWNLOAD LINK
var url = window.URL.createObjectURL[myBlob];
var anchor = document.createElement["a"];
anchor.href = url;
anchor.download = "demo.txt";
    
// [C] "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];
document.removeChild[anchor];
      4
    • // [A] CREATE BLOB OBJECT
var myBlob = new Blob[["CONTENT"], {type: "text/plain"}];

// [B] CREATE DOWNLOAD LINK
var url = window.URL.createObjectURL[myBlob];
var anchor = document.createElement["a"];
anchor.href = url;
anchor.download = "demo.txt";
    
// [C] "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];
document.removeChild[anchor];
      5
    • // [A] CREATE BLOB OBJECT
var myBlob = new Blob[["CONTENT"], {type: "text/plain"}];

// [B] CREATE DOWNLOAD LINK
var url = window.URL.createObjectURL[myBlob];
var anchor = document.createElement["a"];
anchor.href = url;
anchor.download = "demo.txt";
    
// [C] "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];
document.removeChild[anchor];
      6
    • // [A] CREATE BLOB OBJECT
var myBlob = new Blob[["CONTENT"], {type: "text/plain"}];

// [B] CREATE DOWNLOAD LINK
var url = window.URL.createObjectURL[myBlob];
var anchor = document.createElement["a"];
anchor.href = url;
anchor.download = "demo.txt";
    
// [C] "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];
document.removeChild[anchor];
      7
  5. Trong NodeJS, chỉ cần sử dụng mô-đun hệ thống tệp – 
    // [A] CREATE BLOB OBJECT
var myBlob = new Blob[["CONTENT"], {type: "text/plain"}];

// [B] CREATE DOWNLOAD LINK
var url = window.URL.createObjectURL[myBlob];
var anchor = document.createElement["a"];
anchor.href = url;
anchor.download = "demo.txt";
    
// [C] "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];
document.removeChild[anchor];
    8

Điều đó bao gồm những điều cơ bản, nhưng chúng ta hãy xem qua các ví dụ chi tiết trong hướng dẫn này – Đọc tiếp

ⓘ Tôi đã bao gồm một tệp zip chứa tất cả mã nguồn ví dụ 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

 

 

TRANG TRÌNH BÀY NHANH

Tải xuống & Ghi chú

 

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 mã nguồn, tôi đã phát hành mã nguồn theo giấy phép MIT, vì vậy vui lòng xây dựng trên mã nguồn đó hoặc sử dụng mã nguồn đó trong dự án của riêng bạn

 

 

LƯU TẬP TIN TRONG JAVASCRIPT

Được rồi, bây giờ chúng ta hãy tìm hiểu các cách khác nhau để lưu tệp trong Javascript

 

PHƯƠNG PHÁP 1] SỬ DỤNG FILE SAVER

1 trình bảo vệ tệp. js





 

// [B] "SAVE AS"
var myFile = new File[["CONTENT"], "demo.txt", {type: "text/plain;charset=utf-8"}];
saveAs[myFile];

Cảm ơn chúa, ai đó đã làm tất cả công việc khó khăn. Đây là một trong những cách dễ nhất và “an toàn nhất” trên nhiều trình duyệt để lưu tệp –

  1. Chỉ cần tải 
    // [A] CREATE BLOB OBJECT
var myBlob = new Blob[["CONTENT"], {type: "text/plain"}];

// [B] CREATE DOWNLOAD LINK
var url = window.URL.createObjectURL[myBlob];
var anchor = document.createElement["a"];
anchor.href = url;
anchor.download = "demo.txt";
    
// [C] "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];
document.removeChild[anchor];
    9 từ CDN
  2. Tạo một đối tượng _______110 và đưa nó vào 
    // [A] CREATE BLOB OBJECT
var myBlob = new Blob[["CONTENT"], {type: "text/plain"}];

// [B] CREATE DOWNLOAD LINK
var url = window.URL.createObjectURL[myBlob];
var anchor = document.createElement["a"];
anchor.href = url;
anchor.download = "demo.txt";
    
// [C] "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];
document.removeChild[anchor];
    11

 

 

PHƯƠNG PHÁP 2] TẠO TẬP TIN TỪ BLOB & FORCE DOWNLOAD

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

// [A] CREATE BLOB OBJECT
var myBlob = new Blob[["CONTENT"], {type: "text/plain"}];

// [B] CREATE DOWNLOAD LINK
var url = window.URL.createObjectURL[myBlob];
var anchor = document.createElement["a"];
anchor.href = url;
anchor.download = "demo.txt";
    
// [C] "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];
document.removeChild[anchor];

Do các hạn chế về bảo mật, Javascript phía máy khách không thể truy cập trực tiếp vào hệ thống tệp. Tức là không ghi và tải tệp trực tiếp trên máy tính của người dùng. Nhưng đây là cách làm vòng vo – Tạo một đối tượng BLOB [nhị phân] để chứa tất cả dữ liệu, sau đó đặt liên kết tải xuống cho nó

 

PHƯƠNG PHÁP 3] TẢI BLOB LÊN MÁY CHỦ

JAVASCRIPT

3a-blob-tải lên. html

// [A] CREATE BLOB OBJECT
var myBlob = new Blob[["CONTENT"], {type: "text/plain"}];

// [B] CREATE DOWNLOAD LINK
var url = window.URL.createObjectURL[myBlob];
var anchor = document.createElement["a"];
anchor.href = url;
anchor.download = "demo.txt";
    
// [C] "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];
document.removeChild[anchor];
1

 

PHP

3b-blob-tải lên. php

// [A] CREATE BLOB OBJECT
var myBlob = new Blob[["CONTENT"], {type: "text/plain"}];

// [B] CREATE DOWNLOAD LINK
var url = window.URL.createObjectURL[myBlob];
var anchor = document.createElement["a"];
anchor.href = url;
anchor.download = "demo.txt";
    
// [C] "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];
document.removeChild[anchor];
5

Đây là một giải pháp thay thế cho tải xuống BLOB ở trên – Thay vào đó, chúng tôi tải BLOB lên và lưu nó trên máy chủ

 

 

PHƯƠNG PHÁP 4] DÒNG TẬP TIN CÓ THỂ GHI

4-tệp-luồng. html

// [A] CREATE BLOB OBJECT
var myBlob = new Blob[["CONTENT"], {type: "text/plain"}];

// [B] CREATE DOWNLOAD LINK
var url = window.URL.createObjectURL[myBlob];
var anchor = document.createElement["a"];
anchor.href = url;
anchor.download = "demo.txt";
    
// [C] "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];
document.removeChild[anchor];
6

Vâng, thời đại của bà già của Internet đã qua. Chúng tôi có thể tạo trình xử lý tệp và luồng tệp trên máy tính của người dùng, sử dụng nó để lưu tệp. Nhưng thao tác này vẫn mở ra hộp thoại “save file as”, chúng ta không thể lưu trực tiếp mà không có sự cho phép của người dùng

P. S. Tính năng này sẽ chỉ hoạt động trên Chrome, Edge và Opera tại thời điểm viết bài

 

PHƯƠNG PHÁP 5] VIẾT VÀO TẬP TIN TRONG NODEJS

5 nút. js

// [A] CREATE BLOB OBJECT
var myBlob = new Blob[["CONTENT"], {type: "text/plain"}];

// [B] CREATE DOWNLOAD LINK
var url = window.URL.createObjectURL[myBlob];
var anchor = document.createElement["a"];
anchor.href = url;
anchor.download = "demo.txt";
    
// [C] "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];
document.removeChild[anchor];
7

Vâng, nó đơn giản một cách ngu ngốc. Chỉ cần tải mô-đun hệ thống tệp 

// [A] CREATE BLOB OBJECT
var myBlob = new Blob[["CONTENT"], {type: "text/plain"}];

// [B] CREATE DOWNLOAD LINK
var url = window.URL.createObjectURL[myBlob];
var anchor = document.createElement["a"];
anchor.href = url;
anchor.download = "demo.txt";
    
// [C] "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];
document.removeChild[anchor];
12 và sử dụng hàm 
// [A] CREATE BLOB OBJECT
var myBlob = new Blob[["CONTENT"], {type: "text/plain"}];

// [B] CREATE DOWNLOAD LINK
var url = window.URL.createObjectURL[myBlob];
var anchor = document.createElement["a"];
anchor.href = url;
anchor.download = "demo.txt";
    
// [C] "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];
document.removeChild[anchor];
13. Để tải tệp, chúng tôi sử dụng hàm 
// [A] CREATE BLOB OBJECT
var myBlob = new Blob[["CONTENT"], {type: "text/plain"}];

// [B] CREATE DOWNLOAD LINK
var url = window.URL.createObjectURL[myBlob];
var anchor = document.createElement["a"];
anchor.href = url;
anchor.download = "demo.txt";
    
// [C] "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];
document.removeChild[anchor];
14 tương ứng

 

 

BIT & LIÊN KẾT HỮU ÍCH

Đó là tất cả cho hướng dẫn này 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

 

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

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

Không phải tất cả các trình duyệt đều hỗ trợ kiểu dữ liệu BLOB cũng như tất cả các tính năng ghi tệp. Vì vậy, tốt nhất bạn nên thực hiện một số kiểm tra trước khi bật các tính năng ninja của mình – Tôi khuyên bạn nên sử dụng Modernizr để phát hiện xem trình duyệt có hỗ trợ một số tính năng nhất định hay không

 

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

  • Javascript Blob – MDN
  • Các loại MIME – SitePoint
  • Tạo URL đối tượng và Thu hồi URL đối tượng – MDN
  • Dữ liệu biểu mẫu  – MDN
  • Tìm nạp API – MDN
  • Viết tệp trong NodeJS – Code Boxx

 

VIDEO HƯỚNG DẪN

 

BẢNG CHEAT INFOGRAPHIC

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

Tại sao chúng ta sử dụng chức năng lưu?

Hàm save[] được sử dụng để lưu tài liệu vào cơ sở dữ liệu . Sử dụng chức năng này, các tài liệu mới có thể được thêm vào cơ sở dữ liệu.

Lưu [] trong Python là gì?

hàm lưu[]. Hàm Save[] được dùng để lưu một mảng vào tệp nhị phân trong NumPy. định dạng npy . cú pháp. cục mịch. lưu [tệp, mảng, allow_pickle=True, fix_imports=True]

Bài Viết Liên Quan

Nissan Leaf 2023 còn hàng
2024 Honda Accord redesign
Đường dẫn có nghĩa là gì trong html?
Đàn accordion Bootstrap 5 không hoạt động
Phím tắt thư mục python
0 r có nghĩa là gì trong python?
Nâng bằng B2 lên E bao nhiêu năm
Lộ trình học Python cho người mới bắt đầu
Python có tốt cho mongodb không?
6 May 2023 Panchang
PHP có được đặt null không?
Tạo bảng trong plugin WordPress
Python không đồng bộ khi nào?
Google dịch mã html
Python xuất bảng mysql sang excel
Is the MCU set in 2023 now
Nối thêm đường dẫn sys python
Tự động hoàn thành python không hoạt động nguyên tử
Chỉ hoạt động trong python
Javascript hiển thị dữ liệu json trong html

Toplist mới

#1
Top 9 tập bản đồ lớp 8 bài 31 2023
6 tháng trước
#2
Top 6 kết quả thi hsg đà nẵng 2022 2023
6 tháng trước
#3
Top 9 tủ nhựa đài loan 4 cánh 3d 2023
6 tháng trước
#4
Top 9 chất khí có thể làm mất màu dung dịch nước brom là: a. so2. b. co2. c. o2. d. hcl. 2023
6 tháng trước
#5
Top 8 tìm việc làm tiện, phay bảo q7 2023
6 tháng trước
#6
Top 3 tôi xuyên thành tiểu kiều the của lão đại phản 2 2023
6 tháng trước
#7
Top 9 đổi mới phong cách, thái độ phục vụ của cán bộ y tế hướng tới sự hài lòng của người bệnh 2023
6 tháng trước
#8
Top 2 bài the dục phát triển chung lớp 6 2022 2023
6 tháng trước
#9
Top 3 bài giảng vũ điệu sắc màu (lớp 4) 2023
6 tháng trước

Bài mới nhất

Nghiệp vụ tín dụng ngân hàng là gì năm 2024
Lỗi font chữ trong tiêu đề thư trong outlook 2007 năm 2024
Lỗi không cài dat dirve may in sp7000 năm 2024
Lý luận mác lênin có phải đã lỗi thời năm 2024
Viết một đoạn văn tả cây bóng mát năm 2024
Lỗi trùng chưng minh thư của người phụ thuộc năm 2024
Top 10 headhunt tuyen dung bat dong san hieu qua năm 2024
Vé máy bay từ buôn mê thuột đi thanh hóa năm 2024
Kèo ft châu á 1x2 là gì năm 2024
Top 1 thịnh hành ngày 12 5 2023 năm 2024

Chủ Đề

programming Hỏi Đáp Toplist Là gì Mẹo Hay Địa Điểm Hay Học Tốt mẹo hay Công Nghệ Nghĩa của từ Bao nhiêu Khỏe Đẹp đánh giá Top List bao nhieu bao nhiêu hướng dẫn Xây Đựng So Sánh Bài tập So sánh Tiếng anh Sản phẩm tốt Ngôn ngữ Bài Tập javascript Ở đâu Thế nào Hướng dẫn Dịch Máy tính Tại sao Đại học Món Ngon Khoa Học