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 nhận 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ộ Show
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ánNgười dùng nên làm theo các bước dưới đây để hiểu cú pháp trên
Thí 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
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ố
Thí 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()'
Lưu nội dung của hình ảnh trong tệp văn bản bằng thư viện FileSaver JavaScriptTrong 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ộ Thí 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 |