Làm thế nào để tạo và tải file bằng JavaScript

Như tiêu đề thì các ông cũng đã biết bài viết này viết về chủ đề gì rồi đúng không?😁. Đó là "Hướng dẫn tạo và tải file bằng JavaScript hoặc Jquery". Việc cho phép người xem tải xuống một thứ gì đó đòi hỏi thứ đó cần được lưu trữ trên chính Server của website. Tuy nhiên, với những file text chứacode(hoặc tương tự) nhưng đã được hiển cho người xem từ trước thì việc lưu trữ code ở phía Server có thể được xem là khá vô ích và tốn dung lượng lưu trữ củaHosting
Ví dụ như những bài hướng dẫn code của tui, tui thường hiển thị cho người xem những đoạn code như thế này

function ham_nao_do() { 
	// Công việc nào đó cần làm
}

Nhưng giờ tui muốn cho người xem tải xuống đoạn code đó, Thì giờ chã nhé tui lại đi lưu đoạn code vừa ngắn vừa nhỏ ấy vào một file nào đó rồi up lên Server😑. Khá là không cần thiết.

Tạo file và tải file bằng JavaScript và Jquery

Với bài viết này, các ông không cần thiết phải làm cái đó nữa. JavaScrip sẽ giải quyết mọi thứ chỉ với hướng dẫn sau đây.
Đầu tiên các ông hãy nhớ lại bài viết vềThuộc tính download trong a tag. Thì trong HTML5 thẻ a có hỗ trợ thuộc tính download, tuy nhiên nó yêu cầu liên kết tải xuống phải cùng domain với website. Vậy thì không lưu file trên cùng host thì làm sao tải xuống?🤔hừm🤔hừm.
Các ông không cần lo về điều đó vì hầu hết các trình duyệt hiện đại hiện nay đều đã hỗ trợ một loại url gọi là Data URLs và ta sẽ tận dụng nó để làm việc này. Trong khuôn khổ bài viết này, tui sẽ sử dụng Data URLs loại data:text/plain;charset=utf-8(Những bài viết về Data URLs và MIME Types tui sẽ thảo luận trong những bài viết sau 😋)

Toàn bộ code cho các ông xem trước

Đây là toàn bộ code dành cho các ông nào lười đọc và đã đọc hiểu được code js

<div id="downloadMe">Đây là đoạn text demo của bài viết trên Code Vô Đối</div>
<button onclick="download()">Download</button>

function saveAs(dataToDownload,filename) {
	var element = document.createElement('a');
	element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(dataToDownload));
	element.setAttribute('download', filename);
	element.style.display = 'none';
	document.body.appendChild(element);
	element.click();
	document.body.removeChild(element);
}
function download() {
	var text = document.getElementById('downloadMe').innerText;
	var file = 'code_vô_đối.txt';
	saveAs(text,file)
}

Các ông thử nhấn nút này đi Download

Giải thích cơ chế

Nếu các ông đã đọc qua bài viếtThuộc tính download trong a tagcủa tui thì cơ chế làm việc của đoạn code này như sau, hàm chính của chúng ta đó là hàm saveAs, hàm này sẽ nhận hai giá trị truyền tới đó là

• dataToDownload
• filename

Trong đó dataToDownload là dữ liệu để ghi vào tệp cần lưu và filename là tên của tệp sẽ được lưu, sau khi được gọi tới và truyền hai tham số như trên, hàm của ta sẽ thực thi tiếp như sau, ứng với mỗi dòng code là

• Tạo một thẻ a
• Thiết lập thuộc tính href thành nội dung sẽ ghi vào tệp cần tải xuống thông qua data urls. Đó là tham số dataToDownload lúc nãy ta đã truyền vào
• Thiết lập thuộc tính download thành tên file cần tải xuống là filename
• Thiết lập chế độ ẩn khỏi màn hình cho thẻ a
• Dán thẻ a đã tạo vào thẻ body
• Tạo một click chuột ảo lên thẻ a vừa nãy để kích hoạt tải xuống tệp
• Xóa thẻ a đã tạo.

Hãy vận dụng kiến thức các ông đọc được ở bài Thuộc tính download trong a tag để trả lời tiếp các thắc mắc và loại trình duyệt hỗ trợ cũng như những chú ý nhé😘


Code Vô Đối bản quyền bài viết của Code Vô Đối nhé thằng ăn cắp. https://codevodoi.blogspot.com Đit_cu_may !