Viết văn bản tệp javascript

javascript ghi vào tệp văn bản – tôi sẽ tạo một tệp và viết văn bản vào đó bằng JavaScript. Sử dụng đốm màu. text[] Chức năng đọc tệp văn bản trong JavaScript

javascript ghi vào tệp văn bản

nội dung

• javascript ghi vào tệp văn bản
  • Thí dụ
  • javascript ghi vào tập tin
  • JavaScript ghi vào tệp văn bản
  • Bài viết liên quan

Một hàm JavaScript kích hoạt sự kiện nhấp vào nút. Tôi sẽ chỉ cho bạn cách làm điều đó trong vài phút. Để tạo một tệp văn bản từ javascript, chúng ta sẽ cần sử dụng đối tượng Blob

Có thể thực hiện thao tác đọc ghi trong tệp bằng một số câu lệnh. Nhưng mô-đun cần thiết để thực hiện các thao tác này phải được nhập. Mô-đun bắt buộc là 'fs' được gọi là mô-đun Hệ thống tệp trong JavaScript

Viết thao tác trên một tập tin

Sau khi tệp Hệ thống tệp được nhập, thao tác writeFile[] được gọi. Phương thức writeFile[] được sử dụng để ghi vào tệp trong JavaScript. Cú pháp của phương thức này như sau -

writeFile[path,inputData,callBackFunction]

Hàm writeFile[] chấp nhận ba tham số -

• Đường dẫn - Tham số đầu tiên là đường dẫn của tệp hoặc tên của tệp mà dữ liệu đầu vào sẽ được ghi vào

  Nếu đã có một tệp, thì nội dung trong tệp sẽ bị xóa và đầu vào do người dùng cung cấp sẽ được cập nhật hoặc nếu tệp không có, thì tệp có tệp đó sẽ được tạo trong đường dẫn đã cho và đầu vào

• inputData - Tham số thứ hai là dữ liệu đầu vào chứa dữ liệu được ghi trong tệp được mở

• callBackFuntion − Tham số thứ ba là hàm gọi lại hàm lấy lỗi làm tham số và hiển thị lỗi nếu thao tác ghi không thành công

ví dụ 1

Sau đây là một ví dụ về thao tác ghi vào tệp trong JavaScript

const fs = require['fs']
let fInput = "You are reading the content from Tutorials Point"
fs.writeFile['tp.txt', fInput, [err] => {
   if [err] throw err;
   else{
      console.log["The file is updated with the given data"]
   }
}]

  

Nếu bạn mở tệp đầu vào, bạn có thể quan sát dữ liệu được viết trong đó như hình bên dưới -

Đọc từ tập tin

Sau khi mô-đun Hệ thống tệp được nhập, việc đọc tệp trong JavaScript có thể được thực hiện bằng cách sử dụng hàm readFile[]

cú pháp

Cú pháp để đọc từ một tệp như sau -

readFile[path, format, callBackFunc]

Hàm readFile[] chấp nhận ba tham số trong đó có một tham số tùy chọn

• Đường dẫn - Tham số đầu tiên là đường dẫn của tệp thử nghiệm mà từ đó nội dung sẽ được đọc. Nếu vị trí hoặc thư mục hiện tại là cùng thư mục chứa tệp sẽ được mở và đọc thì chỉ cần cung cấp tên tệp

• Định dạng - Tham số thứ hai là tham số tùy chọn là định dạng của tệp văn bản. Định dạng có thể là ASCII, utf-8, v.v.

• CallBackFunc − Tham số thứ ba là chức năng gọi lại lấy lỗi làm tham số và hiển thị lỗi được nêu ra do lỗi

ví dụ 2

Ví dụ sau cố gắng đọc nội dung của tệp được điền trong ví dụ trước và in nó -

const fs = require['fs']
fs.readFile['tp.txt', [err, inputD] => {
   if [err] throw err;
      console.log[inputD.toString[]];
}]

đầu ra

Sau đây là đầu ra của ví dụ trên -

You are reading the content from Tutorials Point

Văn bản được hiển thị trong bảng điều khiển là văn bản trong tệp đã cho

ví dụ 3

Sau đây là một ví dụ kết hợp về cách đọc và ghi tệp ở trên bằng cách sử dụng mô-đun fs trên nút. js. Hãy để chúng tôi tạo một tệp JS có tên chính. js có đoạn mã sau -

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ộ

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

   

  

 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

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

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

Làm cách nào để viết tệp văn bản bằng JavaScript?

Làm cách nào để đọc và ghi vào tệp văn bản trong JavaScript?

Làm cách nào để in tệp văn bản JavaScript?

Làm cách nào để lưu dữ liệu biểu mẫu trong tệp văn bản bằng JavaScript?