Lưu HTML vào tệp văn bản

Trong hướng dẫn này, chúng ta sẽ học cách tạo và lưu tệp văn bản trong JavaScript. Đôi khi, các nhà phát triển cần lấy văn bản hoặc nội dung từ người dùng và cho phép người dùng lưu trữ nội dung trong tệp văn bản và cho phép tệp tải xuống máy tính cục bộ

Nhiều thư viện JavaScript có sẵn để đạt được mục tiêu của chúng tôi, nhưng chúng tôi đã sử dụng hai thư viện tốt nhất trong hướng dẫn này để tạo và lưu tệp văn bản

Tạo một tệp văn bản bằng văn bản tùy chỉnh và lưu nó vào máy tính cục bộ

Chúng tôi sẽ sử dụng các thao tác JavaScript thông thường để tạo và lưu tệp văn bản trên máy tính của người dùng. Người dùng có thể sử dụng thẻ HTML để tạo một tệp văn bản từ nội dung tùy chỉnh và lưu nó

Các nhà phát triển nên làm theo cú pháp dưới đây để tạo một tệp văn bản từ kiểu nhập văn bản và lưu nó

cú pháp

// Create element with  tag
const link = document.createElement["a"];

// Create a blog object with the file content which you want to add to the file
const file = new Blob[[content], { type: 'text/plain' }];

// Add file content in the object URL
link.href = URL.createObjectURL[file];

// Add file name
link.download = "sample.txt";

// Add click event to  tag to save file.
link.click[];
URL.revokeObjectURL[link.href];

Trong cú pháp trên, chúng tôi đã lấy nội dung từ người dùng, chuyển đổi nó thành đối tượng blog và sau đó lưu nó vào tệp văn bản

thuật toán

Người dùng nên làm theo các bước dưới đây để hiểu cú pháp trên

• Bước 1 - Tạo phần tử HTML

• Bước 2 - Nhận nội dung để thêm vào tệp văn bản

• Bước 3 - Tạo một đối tượng Blob của nội dung

• Bước 4 - Trong thuộc tính href của thẻ, thêm URL đối tượng blog

• Bước 5 - Thêm tên tệp mặc định làm giá trị của thuộc tính 'tải xuống' của thẻ

• Bước 6 - Gọi sự kiện click[] trên thẻ để lưu tệp trên máy tính cục bộ

Ví dụ

Chúng tôi đã viết mã trong ví dụ dưới đây bằng cách làm theo cú pháp và thuật toán. Chúng tôi đã tạo HTML. Người dùng có thể nhập nội dung muốn thêm vào tệp và nhấn vào nút “lưu tệp” để lưu tệp văn bản trên máy tính

Khi người dùng click vào nút ‘save file’, nó sẽ gọi hàm ‘downloadFile[]’, trong đó ta đã thêm đoạn code để tạo và lưu file văn bản

   
 Create a text file and save it to a local computer using JavaScript. 
   
 Enter the file content:- 
   

    save File 
   

Sử dụng thư viện FileSaver JavaScript để tạo và lưu tệp văn bản

'FileSaver' là thư viện JavaScript mà chúng ta có thể sử dụng để tạo tệp văn bản trong vanilla JavaScript. Người dùng có thể sử dụng CDN của thư viện để sử dụng với HTML và JavaScript

Người dùng nên sử dụng cú pháp dưới đây để sử dụng thư viện FileSaver

cú pháp

// Create blob object with file content
var blob = new Blob[["This is a sample file content."], {
   type: "text/plain;charset=utf-8",
}];

// Create and save the file using the FileWriter library
saveAs[Content, fileName];

Trong cú pháp trên, chúng tôi đã sử dụng một số văn bản để tạo đối tượng blob của loại 'văn bản'. Ngoài ra, chúng tôi đã sử dụng chức năng ‘saveAs[]’ của thư viện FileWriter để tạo và lưu tệp văn bản

Thông số

Hàm 'saveAs' có hai tham số

• Nội dung - Đó là nội dung cần được lưu trữ trong tệp

• tên tệp - Đây là tên tệp mặc định khi người dùng tải xuống

Ví dụ

Chúng tôi đã thêm CDN của thư viện ‘FileWriter’ trong phần mã bên dưới. Khi người dùng nhấp vào nút 'tạo tệp văn bản', nó sẽ gọi hàm 'CreateTextFile[]' trong JavaScript, hàm này tạo đối tượng blob của câu 'Đây là nội dung tệp đơn giản' và thực thi 'saveAs[]'

   

   
   
Create text file and save it to local computer using  FileSaver  JavaScript Library.
   Create Text File
   

Lưu nội dung của hình ảnh trong tệp văn bản bằng thư viện FileSaver JavaScript

Trong phần này, chúng tôi đã sử dụng cùng một thư viện, ‘FileSaver’, nhưng thay vì lưu trữ các văn bản bình thường vào tệp, chúng tôi xâu chuỗi hình ảnh sau khi chuyển đổi hình ảnh thành đối tượng blob

Người dùng có thể thực hiện theo cú pháp dưới đây để lưu ảnh ở định dạng file text và lưu lại

cú pháp

// Access the file input by Id
var element = document.getElementById["uploadedImage"];

// Add onchange event to file input
element.onchange = function [event] {

   // Convert image content to text
   var blob = new Blob[event.target.files[0]], {
      type: "text/plain;charset=utf-8",
   }];

   // Create text file using image’s content and save it
   saveAs[blob, "download.txt"];
};

Theo cú pháp trên, chúng tôi lấy tệp mà người dùng tải lên HTML và chuyển đổi nội dung của nó thành một đối tượng blob. Sau đó, chúng tôi tạo tệp văn bản bằng đối tượng blob và lưu tệp vào máy tính cục bộ

Ví dụ

Chúng tôi đã sử dụng thư viện JavaScript ‘FileSaver’ trong ví dụ bên dưới, như được hiển thị trong cú pháp trên. Chúng tôi đã tạo trường nhập tệp, chỉ cho phép người dùng tải lên tệp hình ảnh

Trong JavaScript, chúng tôi đã thêm trình xử lý sự kiện vào đầu vào tệp và khi người dùng tải tệp lên, nó sẽ tạo tệp văn bản bằng tệp hình ảnh đã tải lên và lưu tệp đó vào máy tính của người dùng

Làm cách nào để lưu trữ dữ liệu biểu mẫu HTML trong tệp txt?