Hướng dẫn save file dialog in javascript - hộp thoại lưu tệp trong javascript

Question

Làm thế nào tôi có thể tạo một trình duyệt hiển thị "hộp thoại lưu dưới dạng" để người dùng có thể lưu nội dung của chuỗi vào tệp trên hệ thống của mình?

Ví dụ:

var myString = "my string with some stuff";
save_to_filesystem(myString,"myString.txt");

Dẫn đến một cái gì đó như thế này:

Ry- ♦♦

213K54 Huy hiệu vàng446 Huy hiệu bạc459 Huy hiệu Đồng54 gold badges446 silver badges459 bronze badges

hỏi ngày 5 tháng 7 năm 2012 lúc 0:38Jul 5, 2012 at 0:38

MaivictormaiavictorMaiaVictor

49.5K42 Huy hiệu vàng138 Huy hiệu bạc274 Huy hiệu đồng42 gold badges138 silver badges274 bronze badges

3

Chỉnh sửa 2022: Vui lòng xem các câu trả lời khác về API hệ thống tệp

Trong trường hợp bất cứ ai vẫn đang tự hỏi ...

Tôi đã làm như thế này:

<a href="data:application/xml;charset=utf-8,your code here" download="filename.html">Save</a>

Không thể nhớ nguồn của tôi nhưng nó sử dụng các kỹ thuật sau \ tính năng:

Thuộc tính tải xuống HTML5
dữ liệu uri's

Tìm thấy tài liệu tham khảo:

http://paxcel.net/blog/savedownload-file-using-html5-javascript-the-download-attribute-2/

Chỉnh sửa: Khi bạn có thể thu thập từ các bình luận, điều này không hoạt độngNOT work in

Internet Explorer (tuy nhiên hoạt động trong Edge v13 trở lên)
Opera Mini

http://caniuse.com/#feat=download

Đã trả lời ngày 20 tháng 3 năm 2014 lúc 10:54Mar 20, 2014 at 10:54

Craig Waynecraig WayneCraig Wayne

4.0603 Huy hiệu vàng35 Huy hiệu bạc46 Huy hiệu đồng3 gold badges35 silver badges46 bronze badges

6

Có một thông số kỹ thuật mới có tên API hệ thống tệp gốc cho phép bạn thực hiện điều này đúng như sau:

const result = await window.chooseFileSystemEntries({ type: "save-file" });

Có một bản demo ở đây, nhưng tôi tin rằng nó đang sử dụng một thử nghiệm nguồn gốc để nó không hoạt động trong trang web của riêng bạn trừ khi bạn đăng ký hoặc bật cờ cấu hình và rõ ràng nó chỉ hoạt động trong Chrome. Nếu bạn đang tạo một ứng dụng điện tử thì đây có thể là một tùy chọn.

Đã trả lời ngày 1 tháng 5 năm 2020 lúc 13:03May 1, 2020 at 13:03

2

Có một thư viện JavaScript cho điều này, xem filesaver.js trên github

Tuy nhiên, chức năng saveAs() sẽ không gửi chuỗi thuần túy đến trình duyệt, bạn cần chuyển đổi nó thành blob:

function data2blob(data, isBase64) {
  var chars = "";

  if (isBase64)
    chars = atob(data);
  else
    chars = data;

  var bytes = new Array(chars.length);
  for (var i = 0; i < chars.length; i++) {
    bytes[i] = chars.charCodeAt(i);
  }

  var blob = new Blob([new Uint8Array(bytes)]);
  return blob;
}

Và sau đó gọi

<a href="data:application/xml;charset=utf-8,your code here" download="filename.html">Save</a>

0 trên blob, giống như:

var myString = "my string with some stuff";
saveAs( data2blob(myString), "myString.txt" );

Tất nhiên hãy nhớ bao gồm thư viện JavaScript đã đề cập ở trên trên trang web của bạn bằng cách sử dụng

<a href="data:application/xml;charset=utf-8,your code here" download="filename.html">Save</a>

1

Đã trả lời ngày 15 tháng 4 năm 2015 lúc 13:00Apr 15, 2015 at 13:00

Tomas Mtomas mTomas M

6.3895 Huy hiệu vàng25 Huy hiệu bạc33 Huy hiệu Đồng5 gold badges25 silver badges33 bronze badges

4

Giải pháp chỉ sử dụng JavaScript

function saveFile(fileName,urlFile){
    let a = document.createElement("a");
    a.style = "display: none";
    document.body.appendChild(a);
    a.href = urlFile;
    a.download = fileName;
    a.click();
    window.URL.revokeObjectURL(url);
    a.remove();
}

let textData = `El contenido del archivo
que sera descargado`;
let blobData = new Blob([textData], {type: "text/plain"});
let url = window.URL.createObjectURL(blobData);
//let url = "pathExample/localFile.png"; // LocalFileDownload
saveFile('archivo.txt',url);

Đã trả lời ngày 14 tháng 10 năm 2020 lúc 0:49Oct 14, 2020 at 0:49

1

Điều này là có thể bằng cách sử dụng Trình duyệt chéo này triển khai hàm HTML5

<a href="data:application/xml;charset=utf-8,your code here" download="filename.html">Save</a>

0: https://github.com/koffsyrup/filesaver.js

Nếu tất cả những gì bạn muốn làm là lưu văn bản thì tập lệnh trên hoạt động trong tất cả các trình duyệt (bao gồm tất cả các phiên bản của IE), không sử dụng gì ngoài JS.

Đã trả lời ngày 28 tháng 5 năm 2015 lúc 13:17May 28, 2015 at 13:17

Superphonicsuperphonicsuperphonic

7.8886 Huy hiệu vàng30 Huy hiệu bạc63 Huy hiệu Đồng6 gold badges30 silver badges63 bronze badges

0

Sử dụng

<a href="data:application/xml;charset=utf-8,your code here" download="filename.html">Save</a>

3:

const handle = await showSaveFilePicker({
    suggestedName: 'name.txt',
    types: [{
        description: 'Text file',
        accept: {'text/plain': ['.txt']},
    }],
});

const blob = new Blob(['Some text']);

const writableStream = await handle.createWritable();
await writableStream.write(blob);
await writableStream.close();

Đã trả lời ngày 16 tháng 7 lúc 12:43Jul 16 at 12:43

Richie Bendallrichie BendallRichie Bendall

6.5793 huy hiệu vàng35 Huy hiệu bạc55 Huy hiệu đồng3 gold badges35 silver badges55 bronze badges

1

Lấy cảm hứng từ câu trả lời @ronald-coarite, đây là giải pháp của tôi:

function saveTxtToFile(fileName: string, textData: string) {
  const blobData = new Blob([textData], { type: 'text/plain' });
  const urlToBlob = window.URL.createObjectURL(blobData);

  const a = document.createElement('a');
  a.style.setProperty('display', 'none');
  document.body.appendChild(a);
  a.href = urlToBlob;
  a.download = fileName;
  a.click();
  window.URL.revokeObjectURL(urlToBlob);
  a.remove();
}

saveTxtToFile('myFile.json', JSON.stringify(myJson));

Đã trả lời ngày 9 tháng 11 lúc 10:42Nov 9 at 10:42

HanshansHans

8768 Huy hiệu bạc18 Huy hiệu Đồng8 silver badges18 bronze badges