Hướng dẫn javascript write to text file client side - javascript ghi vào phía máy khách tệp văn bản

Nếu bạn đang nói về trình duyệt JavaScript, bạn không thể ghi dữ liệu trực tiếp vào tệp cục bộ vì lý do bảo mật. HTML 5 API mới chỉ có thể cho phép bạn đọc các tệp.

Nhưng nếu bạn muốn viết dữ liệu và cho phép người dùng tải xuống dưới dạng tệp vào cục bộ. Mã sau hoạt động:

    function download(strData, strFileName, strMimeType) {
    var D = document,
        A = arguments,
        a = D.createElement("a"),
        d = A[0],
        n = A[1],
        t = A[2] || "text/plain";

    //build download link:
    a.href = "data:" + strMimeType + "charset=utf-8," + escape(strData);


    if (window.MSBlobBuilder) { // IE10
        var bb = new MSBlobBuilder();
        bb.append(strData);
        return navigator.msSaveBlob(bb, strFileName);
    } /* end if(window.MSBlobBuilder) */



    if ('download' in a) { //FF20, CH19
        a.setAttribute("download", n);
        a.innerHTML = "downloading...";
        D.body.appendChild(a);
        setTimeout(function() {
            var e = D.createEvent("MouseEvents");
            e.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
            a.dispatchEvent(e);
            D.body.removeChild(a);
        }, 66);
        return true;
    }; /* end if('download' in a) */



    //do iframe dataURL download: (older W3)
    var f = D.createElement("iframe");
    D.body.appendChild(f);
    f.src = "data:" + (A[2] ? A[2] : "application/octet-stream") + (window.btoa ? ";base64" : "") + "," + (window.btoa ? window.btoa : escape)(strData);
    setTimeout(function() {
        D.body.removeChild(f);
    }, 333);
    return true;
}

để dùng nó:

download('the content of the file', 'filename.txt', 'text/plain');

Một trong những vấn đề 'Sinh ra của một vấn đề mà tôi tình cờ thấy', tôi bắt gặp sự cần thiết phải lưu một số dữ liệu được nhập vào một biểu mẫu (một số chi tiết cấu hình vào TextArea là cụ thể).

Chắc chắn, có rất nhiều phương tiện để lưu một cái gì đó vào máy cục bộ của người dùng, nhưng chúng có xu hướng liên quan đến các giải pháp không chính xác như lưu trữ cục bộ của trình duyệt, cookie hoặc thậm chí sử dụng Blob Canvas Blob HTML.

Nhu cầu giải pháp đơn giản

Có một bài viết tuyệt vời (nếu không có một chút lỗi thời) bởi Eli Gray về việc lưu các tệp được tạo ở phía máy khách cũng thảo luận về các tệp tiện ích tuyệt vời của anh ấy, sử dụng các hàm blob canvas tương tự được đề cập ở trên.

Tuy nhiên, đối với tôi, dường như có một chút quá mức để mang lại sự phụ thuộc tiện ích khác để thực hiện một nhiệm vụ thực sự đơn giản là tạo một tệp văn bản nhỏ và cất nó trên máy của khách hàng.

Giải pháp Vanilla JS để lưu tệp phía máy khách

Vì vậy, chúng tôi ở đây, một cách thực sự đơn giản để tạo và lưu một tệp ở phía máy khách, từ trình duyệt, dựa trên một số thông tin được lưu vào TextArea.

Đầu tiên, HTML ...

  
Enter some config details
  
  save config

Làm cho các yếu tố không rườm rà sau trong trình duyệt (kiểu dáng không được hiển thị cho sự đơn giản):

Bây giờ, đối với JavaScript:

const downloadToFile = (content, filename, contentType) => {
  const a = document.createElement('a');
  const file = new Blob([content], {type: contentType});
  
  a.href= URL.createObjectURL(file);
  a.download = filename;
  a.click();

	URL.revokeObjectURL(a.href);
};

document.querySelector('#btnSave').addEventListener('click', () => {
  const textArea = document.querySelector('textarea');
  
  downloadToFile(textArea.value, 'my-new-file.txt', 'text/plain');
});

Những gì chúng tôi đã diễn ra ở đây, là một cuộc gọi truy vấn đơn giản, bản địa, lấy nút của chúng tôi với ID btnSave, gắn một trình nghe sự kiện bắn vào nhấp chuột-không có gì quá lạ mắt ở đây.

Trường hợp ma thuật (tốt, thực sự đơn giản) theo phương thức 'downloadtofile' ở trên. Chúng tôi tạo một phần tử neo mới và một đối tượng Blob mới bằng cách sử dụng các đối số nội dung và ContentType mà chúng tôi đã truyền vào.

Tiếp theo, chúng tôi đặt phần tử href thành kết quả của phương thức URL.createObjectURL() tạo ra một hình ảnh chứa một URL đại diện cho đối tượng tệp chúng tôi vừa tạo.

Cuối cùng, chúng tôi kích hoạt sự kiện nhấp chuột của Neo của chúng tôi, khởi động quá trình tải xuống trong trình duyệt, trước khi làm sạch mọi thứ bằng phương pháp URL.revokeObjectURL().

Xem nó trong hành động

Bạn có thể xem mã hành động trong Codepen của tôi hoặc bên dưới trong một iframe tiện dụng.

Gói mọi thứ lên

Và đó là nó. Đẹp và đơn giản, hoàn thành công việc. Đôi khi, giải pháp đơn giản nhất là giải pháp tốt nhất nếu bạn cần một cái gì đó nhẹ chỉ hoạt động.

Bạn cũng có thể thích những bài viết sử dụng JS và CSS cũ đơn giản:

• Nền văn bản vui nhộn với CSS Chụp nền
• Tạo các mảng độc đáo, được hợp nhất bằng bộ của JavaScript (và hơn thế nữa)
• Định cấu hình bưu kiện JS và Babel để sử dụng các thuộc tính lớp đề xuất JavaScript
• Cách sử dụng các chức năng mũi tên trong JavaScript ES6

JavaScript có thể ghi vào một tệp văn bản không?

Chúng ta có thể đọc dữ liệu ghi từ các tệp bằng JavaScript không?

Làm cách nào để đọc một tệp từ phía máy khách?

JavaScript có thể mở một tệp cục bộ không?