Hướng dẫn how to download text from textarea in javascript? - làm thế nào để tải xuống văn bản từ textarea trong javascript?

Trong bài viết này, bạn sẽ tìm hiểu cách chuyển đổi văn bản TextArea thành tệp bằng JavaScript. Đây là một dự án tuyệt vời cho người mới bắt đầu. Có một hộp ở đây, bạn có thể chuyển đổi nội dung của hộp đó thành một tệp. & Nbsp; nhiều lần trong một dự án bạn cần lưu nội dung văn bản vào tệp sau. Trong trường hợp đó, bạn có thể sử dụng JavaScript Tạo và lưu dự án tệp văn bản này.convert Textarea Text to File using JavaScript. This is a great project for beginners. There is a box here, you can convert the contents of that box into a file. Many times in a project you need to save the text content to the file later. In that case, you can use this JavaScript Create and Save text file project.

& nbsp; Chúng tôi thường sử dụng Notepad khi chúng tôi muốn tạo bất kỳ loại tệp nào như HTML, CSS hoặc văn bản. Dự án này sẽ làm cho nhiệm vụ đó dễ dàng hơn nhiều. Có một hộp nhỏ trong đó bạn có thể nhập một số văn bản hoặc thông tin.Notepad when we want to create any kind of files like HTML, CSS, or text. This project will make that task much easier. There is a small box in which you can input some text or information.

Sau đó, có một hộp nhỏ khác nơi bạn có thể sử dụng đổi tên của bạn. Sau đó, có một nút tải xuống sẽ lưu tệp bằng cách nhấp vào nó.download button that will save the file by clicking on it.

Lưu văn bản vào một tệp trong JavaScript

Tôi đã sử dụng JavaScript, HTML và CSS để tạo dự án này. Đầu tiên, chúng tôi đã tạo cấu trúc cơ bản của nó bằng HTML CSS. Sau đó, tôi đã triển khai dự án này (tạo và lưu tệp văn bản trong JavaScript) bằng JavaScript.

Xem bút không có tiêu đề bởi Code Media (@CodemediaWeb) trên CodePen.

Đầu tiên tôi thiết kế trang web và làm một hộp trên đó. Tôi đã thêm một tiêu đề ở đầu hộp này. Thẻ H2 đã được sử dụng để tăng cường tiêu đề này. Sau đó, tôi đã tạo một hộp bằng văn bản của HTML. Trong hộp này, bạn có thể nhập một số văn bản. Sau đó, tạo một hộp đầu vào khác trong đó bạn có thể thêm đổi tên của tệp bạn chọn. Tại đây bạn có thể tạo bất kỳ loại tệp.HTML's Textarea. In this box, you can input some text. Then create another input box in which you can add the rename of the file of your choice. Here you can create any type of file.

& nbsp; Nếu bạn mở này tạo và lưu một dự án tệp với trình duyệt, nội dung của bạn sẽ được tải xuống tự động. Nếu bạn mở nó bằng trình chỉnh sửa mã, bạn sẽ được yêu cầu tải xuống tệp.Create and save a file project with a browser, your content will be downloaded automatically. If you open it using a code editor, you will be asked for permission to download the file.

Cách lưu giá trị hộp văn bản vào tệp & nbsp; sử dụng javascript

Để xây dựng nó, bạn cần có một ý tưởng cơ bản về HTML CSS và JavaScript. Video dưới đây sẽ giúp bạn tìm hiểu cách nó hoạt động.bout HTML CSS and JavaScript. The video below will help you learn how it works.

Bạn cũng có thể sử dụng phần Demo ở trên để biết cách lưu dữ liệu biểu mẫu trong tệp văn bản bằng JavaScript. Nếu bạn chỉ muốn mã nguồn, bạn có thể sử dụng nút tải xuống ở cuối bài viết. Tuy nhiên, tôi yêu cầu bạn làm theo các hướng dẫn từng bước bên dưới. & NBSP;

Dưới đây tôi đã chỉ ra từng bước cách lưu văn bản vào tệp phía máy khách bằng JavaScript. Sau đây mỗi bước tôi đã đưa ra kết quả có thể giúp bạn hiểu rõ hơn.save text to a client-side file using JavaScript. Hereafter each step I have given possible results which will help you to understand better.

Bước 1: & NBSP; Cấu trúc cơ bản của văn bản thành một dự án tệpBasic structure of Text to a File project

Tôi đã tạo ra những điều cơ bản của dự án này (tạo và lưu tệp văn bản trong JavaScript) bằng cách sử dụng mã HTML và CSS sau đây. & NBSP;

Một hộp đã được tạo ở đây với chiều rộng: 430px và màu nền có màu trắng. Ở đây tôi đã sử dụng màu xanh lam nền của trang web.

* {

Kích thước hộp: Hộp biên;

}

thân hình {

Chiều cao: 100VH;

Biên độ: 0;

Hiển thị: Flex;

Sắp xếp mục: Trung tâm;

Justify-Content: Trung tâm;

màu nền: #044b82;

Phông chữ-gia đình: "Kanit", Verdana, Arial, Sans-serif;

}

thân hình {

Chiều cao: 100VH;

Biên độ: 0;

Hiển thị: Flex;

}

thân hình {Add a heading using HTML

Chiều cao: 100VH;

Biên độ: 0;

Hiển thị: Flex;

Sắp xếp mục: Trung tâm;

Justify-Content: Trung tâm;

màu nền: #044b82;

Phông chữ-gia đình: "Kanit", Verdana, Arial, Sans-serif;

#thùng đựng hàng {

Chiều rộng: 430px;

Đệm: 40px 20px;

}

thân hình { Create a box using Textarea

Chiều cao: 100VH;

* {

Kích thước hộp: Hộp biên;

màu nền: #044b82;

Phông chữ-gia đình: "Kanit", Verdana, Arial, Sans-serif;

#thùng đựng hàng {

Chiều rộng: 430px;

Đệm: 40px 20px;

Bối cảnh: Trắng;

Bước 2: & NBSP; Thêm tiêu đề bằng HTML

Bây giờ tôi đã thêm một tiêu đề sẽ ở đầu hộp này. Thẻ H2 của HTML đã được sử dụng để tạo tiêu đề này. Tôi đã sử dụng kích thước phông chữ: 30px và màu xanh lam để tăng kích thước văn bản.

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

H2 {

}

thân hình {Create a place to input the file name

Chiều cao: 100VH;

* {

Kích thước hộp: Hộp biên;

Chiều rộng: 430px;

Đệm: 40px 20px;

Phông chữ-gia đình: "Kanit", Verdana, Arial, Sans-serif;

#thùng đựng hàng {

Chiều rộng: 430px;

Đệm: 40px 20px;

Bối cảnh: Trắng;

H2 {

Màu sắc: #0773D7;

}

thân hình { Button to save text to a file

Chiều cao: 100VH;

Biên độ: 0;

Hiển thị: Flex;

Sắp xếp mục: Trung tâm;

Justify-Content: Trung tâm;

H2 {

Đệm: 40px 20px;

Bối cảnh: Trắng;

Đệm: 40px 20px;

Bối cảnh: Trắng;

Bước 2: & NBSP; Thêm tiêu đề bằng HTML

}

thân hình {Save Text to a File using JavaScript

Chiều cao: 100VH;

& nbsp; Ở đây tôi đã đặt thông tin cần thiết ở đầu mỗi dòng tại sao tôi sử dụng mã đó. Tôi hy vọng những lời giải thích sau đây sẽ giúp bạn hiểu JavaScript này.

function downloadfile (tên tệp, nội dung) {

// Nó hoạt động trên tất cả các trình duyệt sẵn sàng HTML5 vì nó sử dụng thuộc tính tải xuống của phần tử:

const Element = document.createelement ('a');

& nbsp; // BLOB là loại dữ liệu có thể lưu trữ dữ liệu nhị phân

& nbsp; // "Loại" là loại MIME

& nbsp; // nó có thể có một giá trị khác, dựa trên một tệp bạn muốn lưu

const blob = new blob ([nội dung], {type: 'trơn/văn bản'});

& nbsp; // createdObjectUrl () Phương thức tĩnh tạo ra một DomString chứa một URL đại diện cho đối tượng được đưa ra trong tham số.

const fileUrl = url.createObjectUrl (blob);

// setAttribution () Đặt giá trị của một thuộc tính trên phần tử được chỉ định.

phần tử.setAttribution ('href', fileUrl); //vị trí tập tin//file location

Element.SetAttribution ('Tải xuống', tên tệp); // Tên tệp // file name

Element.Style.Display = 'none';

// Sử dụng phương thức appendChild () để di chuyển phần tử từ phần tử này sang phần tử khác

document.body.AppendChild (phần tử);

phần tử.click ();

// Phương thức removeChild () của giao diện nút sẽ loại bỏ nút con khỏi DOM và trả về nút bị xóa

tài liệu.body.removechild (phần tử);

};

window.onload = () => {

document.getEuityById ('Tải xuống').

addEventListener ('click', e => {

// Giá trị của hộp đầu vào tên tệp

const filename = document.getEuityById ('tên tệp'). Giá trị;

// Giá trị của những gì đã được nhập vào Textarea

const nội dung = document.getEuityById ('text'). value;

// Toán tử && (logic và) cho biết liệu cả hai toán hạng có đúng hay không. Nếu cả hai toán hạng có giá trị khác không, kết quả có giá trị 1. Nếu không, kết quả có giá trị 0.

if (fileName && nội dung) {

downloadfile (tên tệp, nội dung);

}

});

};

window.onload = () => {how to convert text to file using JavaScript. 

document.getEuityById ('Tải xuống').share it with your friends.

Làm thế nào để bạn lưu một văn bản textarea?

Tôi có thể sử dụng textarea làm html đầu vào không?

Textarea có thuộc tính loại không?