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 : 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

Xem Thêm  Cách căn giữa văn bản theo chiều dọc với CSS - căn chỉnh văn bản dọc css

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.

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ủ.

Xem Thêm  JavaScript ở đâu - đâu là nơi chính xác để chèn javascript

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.

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  Văn bản Nút Thay đổi JavaScript - loại nút thay đổi javascript


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

Cách chạy một file .js trên Visual Studio Code cho người mới

  • Tác giả: Zenos Gamer
  • Ngày đăng: 2021-06-30
  • Đánh giá: 4 ⭐ ( 5914 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: From CodeGym With Love

1000 Bài tập JavaScript

  • Tác giả: gokisoft.com
  • Đánh giá: 5 ⭐ ( 6145 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: lập trình js, lập trình JavaScrip, tự học JS, tự học lập tình JS, lap trinh javascrip, javascrip, học javascrip, JavaScrip online, hướng đẫn học JavaScrip, hướng dẫn học JS, tự học JavaScrip, học lập trình JS cho người mới bắt đầu, bài tập JavaScrip

NodeJS Bài 12: Static file (Tập tin tĩnh) trong NodeJS

  • Tác giả: viblo.asia
  • Đánh giá: 3 ⭐ ( 1271 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Series NodeJS căn bản cho người mới bắt đầu

Tách Mã JavaScript Ra File Riêng

  • Tác giả: www.codehub.com.vn
  • Đánh giá: 4 ⭐ ( 5620 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài học này chúng ta sẽ thực hiện một công việc khá đơn giản đó là thêm vào một tập tin để chứa chỉ mã lệnh JavaScript và sau đó chúng ta sẽ nhúng tập tin này vào các trang web…

Tổng hợp các bài tập javascript cơ bản có lời giải mới nhất 2020

  • Tác giả: xaydungweb.vn
  • Đánh giá: 5 ⭐ ( 9868 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bài tập javascript cơ bản có lời giải là một trong những keyword được search nhiều nhất trên Google về chủ đề bài tập javascript cơ bản có lời giải. Trong bài viết này, xaydungweb.vn sẽ viết bài viết Tổng hợp các bài tập javascript cơ bản có lời giải mới nhất 2020.

One moment, please…

  • Tác giả: www.dammio.com
  • Đánh giá: 5 ⭐ ( 3088 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Viết API đầu tiên của bạn bằng Node.js và Express: Thiết lập Server

  • Tác giả: code.tutsplus.com
  • Đánh giá: 4 ⭐ ( 2801 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cách thiết lập Server Express API trong Node.js
    Trong bài hướng dẫn trước, chúng ta đã đi tìm hiểu về kiến ​​trúc REST là gì, sáu hướng dẫn ràng buộc của REST, tìm hiểu các phương thức yêu cầu…

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

By ads_php