Một đối tượng có thể lặp lại, chẳng hạn như Array, có
const file = new File[["foo"], "foo.txt", {
type: "text/plain",
}];
const file = new File[["foo"], "foo.txt", {
type: "text/plain",
}];
const file = new File[["foo"], "foo.txt", {
type: "text/plain",
}];
const file = new File[["foo"], "foo.txt", {
type: "text/plain",
}];
const file = new File[["foo"], "foo.txt", {
type: "text/plain",
}];
const file = new File[["foo"], "foo.txt", {
type: "text/plain",
}];
Một chuỗi đại diện cho tên tệp hoặc đường dẫn đến tệp
const file = new File[["foo"], "foo.txt", {
type: "text/plain",
}];
Một đối tượng tùy chọn chứa các thuộc tính tùy chọn cho tệp. Các tùy chọn có sẵn như sau
const file = new File[["foo"], "foo.txt", {
type: "text/plain",
}];
Một chuỗi đại diện cho loại MIME của nội dung sẽ được đưa vào tệp. Giá trị mặc định là
const file = new File[["foo"], "foo.txt", {
type: "text/plain",
}];
const file = new File[["foo"], "foo.txt", {
type: "text/plain",
}];
Một số đại diện cho số mili giây giữa kỷ nguyên thời gian Unix và khi tệp được sửa đổi lần cuối. Giá trị mặc định là
const file = new File[["foo"], "foo.txt", {
type: "text/plain",
}];
Bạn có biết rằng bạn có thể chuyển đổi bất kỳ văn bản nào thành một tệp và tải xuống ở các định dạng khác nhau như txt, html, css, docs, ppt, v.v. bằng vanilla JavaScript không?
Xin chào các bạn, hôm nay trong blog này, bạn sẽ học cách tạo một dự án đơn giản nhưng hữu ích và đó là cách lưu nội dung trang web dưới dạng tệp bằng HTML CSS & JavaScript. Trước đó, tôi đã chia sẻ một blog về cách Chuyển văn bản thành giọng nói bằng JavaScript và lần này tôi muốn chỉ cho bạn cách chuyển đổi văn bản thành tệp và tải xuống bằng JavaScript. Vì vậy, hãy bắt đầu với dự án
Như bạn đã thấy trong hình ảnh xem trước, trong dự án này, có một hộp văn bản, một hộp nhập liệu, các tùy chọn được chọn và một nút lưu. Khi bạn nhập một số văn bản vào hộp văn bản, chọn định dạng tệp và nhấn nút “lưu”, một tệp mới sẽ được lưu trên máy tính của bạn với văn bản đã nhập trong đó. Tên tệp không bắt buộc và nếu bạn không cung cấp, tệp sẽ được lưu với một tên duy nhất
Nếu bạn tò mò muốn xem bản demo trực tiếp của dự án này thì hãy xem tại đây. Để có bản trình diễn hoặc video hướng dẫn đầy đủ về dự án này [Lưu văn bản dưới dạng tệp], bạn có thể xem video YouTube đã cho
Video hướng dẫn lưu văn bản dưới dạng tệp trong JavaScript
Trong video trên, bạn đã xem bản demo về cách lưu văn bản dưới dạng tệp và cách tôi tạo văn bản đó bằng HTML CSS & JavaScript. Tôi hy vọng bạn đã xem hết video và cũng học được điều gì đó mới từ nó
Nếu bạn thích dự án này và muốn lấy mã nguồn hoặc tệp, bạn có thể dễ dàng lấy chúng từ cuối trang này. Nhưng trước đó, hãy đảm bảo rằng bạn đã xem video và hiểu đúng mã hoặc phương pháp, nếu không sau này bạn có thể bị nhầm lẫn khi triển khai mã đó trong dự án của mình
Bạn có thể thích những dự án này
- Tải xuống bất kỳ tệp nào từ URL
- Hộp nhập thẻ trong JavaScript
- Trình tạo mã QR trong JavaScript
- Thanh trượt phạm vi giá trong JavaScript
Lưu văn bản dưới dạng tệp trong JavaScript [Mã nguồn]
Để tạo dự án này [Save Text As File in JavaScript], trước tiên, bạn cần tạo ba tệp – tệp HTML, CSS & JavaScript và dán từng mã đã cho vào tệp của bạn. Nếu bạn không biết cách tạo các tệp này hoặc phải làm gì hoặc không muốn làm điều đó, bạn có thể tải xuống các tệp mã nguồn của dự án này bằng cách nhấp vào nút tải xuống đã cho ở cuối trang này
Đầu tiên, tạo một tệp HTML có tên index. html và dán mã đã cho vào tệp HTML của bạn. Hãy nhớ rằng, bạn phải tạo một tệp có. phần mở rộng html
Save Text As File JavaScript | CodingNepal
Lorem Ipsum is simply dummy text of the printing and type setting industry. Lorem Ipsuam has been the industries standard dummy texts ever since this 1500s, when an unknown printer took a galley of type and scrambled it to make a type of dollar specimen book. It have survived not only five centuries, but also from the leap into electronic typesetting.
File name
Save as
Text File [.txt]
JS File [.js]
HTML File [.html]
SVG File [.svg]
Doc File [.doc]
PPT File [.ppt]
Save As Text File
Thứ hai, tạo một tệp CSS với tên style. css và dán mã đã cho vào tệp CSS của bạn. Hãy nhớ rằng, bạn phải tạo một tệp có. phần mở rộng css
/* Import Google font - Poppins */
@import url['//fonts.googleapis.com/css2?family=Poppins:[email protected];500;600&display=swap'];
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 10px;
background: #17A2B8;
}
.wrapper{
width: 443px;
border-radius: 7px;
background: #fff;
padding: 30px 25px 40px;
box-shadow: 0 10px 15px rgba[0,0,0,0.05];
}
.wrapper :where[textarea, input, select, button]{
width: 100%;
outline: none;
border: none;
font-size: 17px;
border-radius: 5px;
}
.wrapper :where[textarea, input]::placeholder{
color: #aaa;
}
.wrapper :where[textarea, input]:focus{
box-shadow: 0px 2px 4px rgba[0,0,0,0.08];
}
.wrapper textarea{
height: 270px;
resize: none;
padding: 8px 13px;
font-size: 17.6px;
border: 1px solid #ccc;
}
.wrapper .file-options{
display: flex;
margin-top: 10px;
align-items: center;
justify-content: space-between;
}
.file-options .option{
width: calc[100% / 2 - 8px];
}
.option label{
font-size: 17px;
}
.option :where[input, .select-menu]{
height: 50px;
padding: 0 13px;
margin-top: 6px;
border-radius: 5px;
border: 1px solid #bfbfbf;
}
.option .select-menu select{
height: 50px;
background: none;
}
.wrapper .save-btn{
color: #fff;
cursor: pointer;
opacity: 0.6;
padding: 16px 0;
margin-top: 20px;
pointer-events: none;
background: #17A2B8;
}
.save-btn:hover{
background: #148c9f;
}
textarea:valid ~ .save-btn{
opacity: 1;
pointer-events: auto;
transition: all 0.3s ease;
}
@media screen and [max-width: 475px] {
.wrapper{
padding: 25px 18px 30px;
}
.wrapper :where[textarea, input, select, button, label]{
font-size: 16px!important;
}
.file-options .option{
width: calc[100% / 2 - 5px];
}
.option :where[input, .select-menu]{
padding: 0 10px;
}
.wrapper .save-btn{
padding: 15px 0;
}
}Cuối cùng, tạo một tệp JavaScript có tên script. js bên trong thư mục js và dán mã đã cho vào tệp JavaScript của bạn. Hãy nhớ rằng, bạn phải tạo một tệp có. tiện ích mở rộng js
________số 8Vậy là xong, bây giờ bạn đã tạo thành công một dự án về Cách lưu văn bản dưới dạng tệp trong HTML CSS & JavaScript. Nếu mã của bạn không hoạt động hoặc bạn gặp phải bất kỳ sự cố nào, vui lòng tải xuống các tệp mã nguồn từ nút tải xuống đã cho. Nó miễn phí và một tệp zip sẽ được tải xuống chứa thư mục dự án chứa các tệp mã nguồn