Hướng dẫn javascript save file to client machine - javascript lưu tệp vào máy khách

Question

1

Nội dung chính Show

Nhu cầu giải pháp đơn giản
Giải pháp Vanilla JS để lưu tệp phía máy khách
Xem nó trong hành động
Gói mọi thứ lên

Mới! Lưu câu hỏi hoặc câu trả lời và sắp xếp nội dung yêu thích của bạn. Tìm hiểu thêm.
Learn more.

Tôi muốn tạo tệp văn bản trên máy khách và sau đó muốn viết trong tệp đó. Và trong khi lưu tệp đó, tôi muốn hỏi người dùng nơi anh ta muốn lưu tệp, tức là muốn hỏi bằng hộp thoại Lưu ....

Cảm ơn trước....

Đã hỏi ngày 15 tháng 3 năm 2012 lúc 9:43Mar 15, 2012 at 9:43

Điều đó là không thể với JavaScript vì lý do bảo mật. Bạn không thể tạo các tệp trên máy khách, vì JavaScript không có quyền ghi trong môi trường đó.

Những gì bạn có thể làm với tư cách là một công việc xung quanh là gửi văn bản mà bạn muốn lưu trữ thông qua AJAX-RQUEST đến máy chủ web, từ đó có thể tạo tệp văn bản để người dùng tải xuống vị trí mong muốn. Không trơn tru, nhưng ít nhất nó là một công việc xung quanh.

Đã trả lời ngày 15 tháng 3 năm 2012 lúc 9:45Mar 15, 2012 at 9:45

Bạn không thể viết lại bằng JavaScript một mình. Bạn sẽ phải thực hiện một cuộc gọi nhận hoặc đăng để có thể nhắc một lần lưu. Câu hỏi liên quan đọc/ghi vào tệp bằng cách sử dụng jQuery

Đã trả lời ngày 15 tháng 3 năm 2012 lúc 9:47Mar 15, 2012 at 9:47

ch4nd4nch4nd4nch4nd4n

4.0032 Huy hiệu vàng20 Huy hiệu bạc41 Huy hiệu đồng2 gold badges20 silver badges41 bronze badges

Bạn có thể làm điều đó thông qua flash "proxy" sử dụng lớp FileReference và giao tiếp với flash bằng cách sử dụng ExternalInterface

Đã trả lời ngày 15 tháng 3 năm 2012 lúc 10:06Mar 15, 2012 at 10:06

deadrunkdeadrunkdeadrunk

13,5K4 Huy hiệu vàng28 Huy hiệu bạc29 Huy hiệu đồng4 gold badges28 silver badges29 bronze badges

Dữ liệu tôi muốn viết đã có sẵn ở phía máy khách (được truy vấn từ máy chủ) và được lưu trữ trong các mảng JavaScript.

Tôi đã thực hiện điều này bằng cách sử dụng 'Bảng dữ liệu', là một trình cắm cho thư viện JQuery JavaScript. Bạn có thể lưu trữ dữ liệu trong .csv, excel hoặc .pdf. Bạn có thể truy cập vào trình cắm đẹp này tại http://datatables.net/

Đã trả lời ngày 21 tháng 5 năm 2012 lúc 10:35May 21, 2012 at 10:35

Một trong những vấn đề 'Sinh ra của một vấn đề mà tôi tình cờ thấy', tôi bắt gặp sự cần thiết phải lưu một số dữ liệu được nhập vào một biểu mẫu (một số chi tiết cấu hình vào TextArea là cụ thể).

Chắc chắn, có rất nhiều phương tiện để lưu một cái gì đó vào máy cục bộ của người dùng, nhưng chúng có xu hướng liên quan đến các giải pháp không chính xác như lưu trữ cục bộ của trình duyệt, cookie hoặc thậm chí sử dụng Blob Canvas Blob HTML.

Nhu cầu giải pháp đơn giản

Có một bài viết tuyệt vời (nếu không có một chút lỗi thời) bởi Eli Gray về việc lưu các tệp được tạo ở phía máy khách cũng thảo luận về các tệp tiện ích tuyệt vời của anh ấy, sử dụng các hàm blob canvas tương tự được đề cập ở trên.

Tuy nhiên, đối với tôi, dường như có một chút quá mức để mang lại sự phụ thuộc tiện ích khác để thực hiện một nhiệm vụ thực sự đơn giản là tạo một tệp văn bản nhỏ và cất nó trên máy của khách hàng.

Giải pháp Vanilla JS để lưu tệp phía máy khách

Vì vậy, chúng tôi ở đây, một cách thực sự đơn giản để tạo và lưu một tệp ở phía máy khách, từ trình duyệt, dựa trên một số thông tin được lưu vào TextArea.

Đầu tiên, HTML ...

<fieldset>
  <legend>Enter some config details</legend>
  <textarea></textarea>
  <button id="btnSave">save config</button>
</fieldset>

Làm cho các yếu tố không rườm rà sau trong trình duyệt (kiểu dáng không được hiển thị cho sự đơn giản):

Bây giờ, đối với JavaScript:

const downloadToFile = (content, filename, contentType) => {
  const a = document.createElement('a');
  const file = new Blob([content], {type: contentType});
  
  a.href= URL.createObjectURL(file);
  a.download = filename;
  a.click();

	URL.revokeObjectURL(a.href);
};

document.querySelector('#btnSave').addEventListener('click', () => {
  const textArea = document.querySelector('textarea');
  
  downloadToFile(textArea.value, 'my-new-file.txt', 'text/plain');
});

Những gì chúng tôi đã diễn ra ở đây, là một cuộc gọi truy vấn đơn giản, bản địa, lấy nút của chúng tôi với ID btnSave, gắn một trình nghe sự kiện bắn vào nhấp chuột-không có gì quá lạ mắt ở đây.

Trường hợp ma thuật (tốt, thực sự đơn giản) theo phương thức 'downloadtofile' ở trên. Chúng tôi tạo một phần tử neo mới và một đối tượng Blob mới bằng cách sử dụng các đối số nội dung và ContentType mà chúng tôi đã truyền vào.

Tiếp theo, chúng tôi đặt phần tử href thành kết quả của phương thức URL.createObjectURL() tạo ra một hình ảnh chứa một URL đại diện cho đối tượng tệp chúng tôi vừa tạo.

Cuối cùng, chúng tôi kích hoạt sự kiện nhấp chuột của Neo của chúng tôi, khởi động quá trình tải xuống trong trình duyệt, trước khi làm sạch mọi thứ bằng phương pháp URL.revokeObjectURL().

Xem nó trong hành động

Bạn có thể xem mã hành động trong Codepen của tôi hoặc bên dưới trong một iframe tiện dụng.

Gói mọi thứ lên

Và đó là nó. Đẹp và đơn giản, hoàn thành công việc. Đôi khi, giải pháp đơn giản nhất là giải pháp tốt nhất nếu bạn cần một cái gì đó nhẹ chỉ hoạt động.

Bạn cũng có thể thích những bài viết sử dụng JS và CSS cũ đơn giản:

Nền văn bản vui nhộn với CSS Chụp nền
Tạo các mảng độc đáo, được hợp nhất bằng bộ của JavaScript (và hơn thế nữa)
Định cấu hình bưu kiện JS và Babel để sử dụng các thuộc tính lớp đề xuất JavaScript
Cách sử dụng các chức năng mũi tên trong JavaScript ES6

programming javascript Js write file