Hướng dẫn này sẽ hướng dẫn cách tạo và lưu tệp trong Javascript – Bao gồm tải xuống mã ví dụ miễn phí.

Bạn đang xem : cách tạo tệp js

Chào mừng bạn đến với hướng dẫn về cách tạo và lưu tệp bằng Javascript. Đây sẽ là một quá trình phức tạp cho người mới bắt đầu. Để mọi thứ trở nên đơn giản – Lưu tệp trên NodeJS phía máy chủ thật dễ dàng, nhưng việc lưu trực tiếp tệp ở phía máy khách sẽ rất khó khăn vì các hạn chế về bảo mật. Điều đó nói rằng, có rất 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 FileSaver saveAs (new File (["CONTENT"], "demo.txt", {type: " text / trơn; charset = utf-8 "}));
  2. Tạo một đối tượng đốm màu và đề xuất “lưu dưới dạng”.
    • var a = document.createElement ("a");
    • a.href = window.URL.createObjectURL (new Blob (["CONTENT"], {type: "text / trơn"}));
    • a.download = "demo.txt";
    • a.click ();
  3. Tải dữ liệu lên, lưu trên máy chủ.
    • var data = new FormData ();
    • data.append ("upfile", new Blob (["CONTENT"], {type: "text / trơn"}));
    • tìm nạp ("SERVER.SCRIPT", {method: "POST", body: data});
  4. Tạo luồng tệp có thể ghi.
    • const fileHandle = await window.showSaveFilePicker ();
    • const fileStream = await fileHandle.createWects ();
    • await fileStream.write (new Blob (["CONTENT"], {type: "text / trơn"}));
    • await fileStream.close ();
  5. Trong NodeJS, chỉ cần sử dụng mô-đun hệ thống tệp – request ("fs"). writeFile ("demo.txt", "Foo bar!");

Đ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 với tất cả mã nguồn mẫu ở đầ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

MỤC LỤC

TẢI XUỐNG & amp; LƯU Ý

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

LƯU Ý NHANH

Nếu bạn phát hiện ra lỗi, vui lòng 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 toàn bộ thế giới… Nếu bạn cần câu trả lời gấp, vui lòng xem

Nếu bạn phát hiện lỗi, vui lòng nhận xét bên dưới. Tôi cũng cố gắng trả lời những 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 khẩn cấp, vui lòng xem danh sách các trang web của tôi để nhận trợ giúp về lập trình

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

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 của MIT, vì vậy hãy thoải mái xây dựng hoặc sử dụng nó trong dự án của riêng bạn.

Xem Thêm  HTML Copy to Clipboard: Hướng dẫn Bật chức năng - html sao chép vào vùng văn bản khay nhớ tạm

LƯU CÁC 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-filesaver.js

  & lt;! - (A) TẢI FILE SAVER - & gt;
& lt;! - https://cdnjs.com/libraries/FileSaver.js - & gt;
& lt;! - https://github.com/eligrey/FileSaver.js - & gt;
& lt; script src = "https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js" & gt; & lt; / script & gt;
 
& lt; script & gt;
// (B) "LƯU NHƯ"
var myFile = new File (["CONTENT"], "demo.txt", {type: "text / trơn; charset = utf-8"});
saveAs (myFile);
& lt; / script & gt;  

Cảm ơn Chúa, ai đó đã làm tất cả những 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 FileSaver.js từ CDN.
  2. Tạo đối tượng new File () và đưa nó vào saveAs () .

PHƯƠNG PHÁP 2) TẠO TẬP TIN TỪ BLOB & amp; LỰC TẢI XUỐNG

2-blob-download.html

  // (A) TẠO ĐỐI TƯỢNG BLOB
var myBlob = new Blob (["CONTENT"], {type: "text / trơn"});

// (B) TẠO LIÊN KẾT TẢI XUỐNG
var url = window.URL.createObjectURL (myBlob);
var anchor = document.createElement ("a");
anchorr.href = url;
anchorr.download = "demo.txt";
    
// (C) "TẢI XUỐNG LỰC LƯỢNG"
// LƯU Ý: CÓ THỂ KHÔNG LUÔN HOẠT ĐỘNG DO BẢO MẬT TRÌNH DUYỆT
// TỐT HƠN ĐỂ CHO NGƯỜI DÙNG BẤM VÀO RIÊNG CỦA HỌ
anchorr.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. Nghĩa là, không có thao tác 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 đố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 đối tượng đó.

PHƯƠNG PHÁP 3) TẢI TRỌNG BLOB VÀO MÁY CHỦ

CHIẾN LƯỢC JAVASCRIPT

3a-blob-upload.html

  & lt; script & gt;
function blobajax () {
  // (A) TẠO ĐỐI TƯỢNG BLOB
  var myBlob = new Blob (["CONTENT"], {type: "text / trơn"});

  // (B) DỮ LIỆU MẪU
  var data = new FormData ();
  data.append ("upfile", myBlob);

  // (C) AJAX TẢI LÊN MÁY CHỦ
  fetch ("3b-upload.php", {
    phương thức: "POST",
    body: data
  })
  .then ((res) = & gt; {return res.text ();})
  .then ((txt) = & gt; {console.log (txt);});
}
& lt; / script & gt;
& lt; input type = "button" value = "Go" onclick = "blobajax ()" / & gt;  

PHP

3b-blob-upload.php

  & lt;? php
echo move_uploaded_file (
  $ _FILES ["upfile"] ["tmp_name"],
  "demo.txt"
)? "OK": "LỖI TẢI LÊN";  

Đâ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) PHIM CÓ THỂ VIẾT ĐƯỢC

4-file-stream.html

  & lt; script & gt;
async function saveFile () {
  // (A) TẠO ĐỐI TƯỢNG BLOB
  var myBlob = new Blob (["CONTENT"], {type: "text / trơn"});
 
  // (B) TẬP TIN XỬ LÝ & amp; TẬP HỒ SƠ
  const fileHandle = await window.showSaveFilePicker ({
    loại: [{
      mô tả: "Tệp văn bản",
      chấp nhận: {"text / trơn": [".txt"]}
    }]
  });
  const fileStream = await fileHandle.createWorites ();
 
  // (C) VIẾT TẬP TIN
  chờ đợi fileStream.write (myBlob);
  chờ đợi fileStream.close ();
}
& lt; / script & gt;

& lt; input type = "button" value = "Save File" onclick = "saveFile ()" / & gt;  

Đúng vậy, thời đại Internet của bà già đã qua rồi. 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 trình này để lưu tệp. Nhưng thao tác này vẫn mở ra hộp thoại “lưu tệp dưới dạng”, chúng tôi không thể lưu trực tiếp mà không có sự cho phép của người dùng.

Xem Thêm  JavaScript Boolean - lấy giá trị boolean javascript

Tái bút: Điều 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 TÌM HIỂU TRONG NODEJS

5-node.js

  // (A) MODULE HỆ THỐNG TẬP TIN TẢI
// https://nodejs.org/api/fs.html
const fs = request ("fs");

// (B) VIẾT TỆP
fs.writeFile ("demo.txt", "CONTENT", "utf8", (error, data) = & gt; {
  console.log ("Viết xong");
  console.log (lỗi);
  console.log (dữ liệu);
});

/ * (C) ĐỌC TỪ TẬP TIN
fs.readFile ("demo.txt", "utf8", (error, data) = & gt; {
  console.log ("Đọc xong");
  console.log (lỗi);
  console.log (dữ liệu);
});
* /  

Đúng, nó đơn giản đến mức ngu ngốc. Chỉ cần tải mô-đun hệ thống tệp var fs = request ("fs") và sử dụng hàm writeFile () . Để tải tệp, chúng tôi sử dụng hàm readFile () tương ứng.

NHỮNG LỢI ÍCH HỮU ÍCH & amp; LIÊN KẾT

Đó 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ƯƠNG THÍCH

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 là 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ợ các tính năng nhất định hay không.

LIÊN KẾT & amp; TÀI LIỆU THAM KHẢO

VIDEO HƯỚNG DẪN

BẢNG CHEAT HÌNH ẢNH

Cách lưu tệp trong Javascript (nhấp để phóng to)

HẾT

Cảm ơn bạn đã đọc và chúng ta đã đ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, vui lòng bình luận bên dưới. Chúc may mắn và viết mã vui vẻ!


Xem thêm những thông tin liên quan đến chủ đề cách tạo tệp js

How to create a file and generate a download with JavaScript in the Browser (without a server)

  • Tác giả: Our Code World
  • Ngày đăng: 2019-05-12
  • Đánh giá: 4 ⭐ ( 1757 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Read the original article here: https://ourcodeworld.com/articles/read/189/how-to-create-a-file-and-generate-a-download-with-javascript-in-the-browser-without-a-server

    Official repository of FileSaver.js: https://github.com/eligrey/FileSaver.js/

    Please subscribe to our channel. For more awesome content visit
    https://ourcodeworld.com

    Music Link: https://www.bensound.com/

    Follow us on Twitter
    https://twitter.com/ourcodeworld

    Like us on Facebook:
    http://www.facebook.com/ourcodeworld

Cách tạo tệp trống trong Node.js

  • Tác giả: tech-wiki.online
  • Đánh giá: 5 ⭐ ( 3333 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Cách làm việc với tệp bằng module fs trong Node.js

  • Tác giả: galaxyz.net
  • Đánh giá: 4 ⭐ ( 5671 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Làm việc với các file là phổ biến cho các mục đích phát triển cũng như cho các mục đích không phát triển. Trong việc sử dụng máy tính hàng ngày, user có thể đọc và ghi dữ liệu vào các file trong các folder khác nhau để thực hiện các việc như lưu file đã download hoặc truy cập dữ liệu để sử dụng trong ứng dụng khác. Theo cách tương tự, chương trình back-end hoặc công cụ giao diện dòng lệnh (CLI) có thể cần ghi dữ liệu đã download vào file để lưu file đó hoặc một ứng dụng sử dụng nhiều dữ liệu có thể cần xuất sang JSON , CSV hoặc Excel các định dạng. Các chương trình này cần giao tiếp với hệ thống file của hệ điều hành mà chúng đang chạy.

Cách tạo ứng dụng Node.js, xây dựng App trong Node.js

  • Tác giả: thuthuat.taimienphi.vn
  • Đánh giá: 4 ⭐ ( 5628 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cach tao ung dung Node js, Cách tạo ứng dụng Node.js, xây dựng App trong Node.js

JAVASCRIPT LÀ GÌ? ỨNG DỤNG CỦA NGÔN NGỮ JAVASCRIPT

  • Tác giả: www.greenacademy.edu.vn
  • Đánh giá: 3 ⭐ ( 7590 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: JavaScript là một trong những ngôn ngữ lập trình web phổ biến nhất hiện nay. Cùng với HTML và CSS, đây là bộ ba ngôn ngữ cơ bản dành cho những lập trình viên mới bắt đầu với việc lập trình website. Hãy cùng Green Academy tìm hiểu về ngôn ngữ lập trình này một cách rõ hơn bạn nhé!

Sử dụng Javascript trong HTML

  • Tác giả: vietjack.com
  • Đánh giá: 3 ⭐ ( 2695 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Sử dụng Javascript trong HTML – Học HTML cơ bản và nâng cao theo các bước đơn giản và dễ hiểu từ HTML là gì, Tag trong HTML, HTML tag, thẻ trong HTML, tổng hợp các thẻ HTML cơ bản, thẻ meta, thuộc tính, định dạng, thẻ trong HTML, commemnt, font, marquee, hình ảnh, link, bảng, frame, danh sách, layout, màu, form, background, style sheet, và sử dụng javascript.

Làm cách nào để tạo tệp exe từ ứng dụng node.js?

  • Tác giả: qastack.vn
  • Đánh giá: 3 ⭐ ( 8897 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Có một số lựa chọn thay thế, cả miễn phí và thương mại. Tôi chưa sử…

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Cách căn giữa theo chiều ngang một Div bằng CSS - div trung tâm ngang css

By ads_php