Gần đây tôi đã chơi với WebGL và đã có một trình đọc Collada hoạt động. Vấn đề là nó khá chậm (Collada là một định dạng rất dài), vì vậy tôi sẽ bắt đầu chuyển đổi các tệp sang định dạng dễ sử dụng hơn (có thể là JSON). Tôi đã có mã để phân tích tệp trong JavaScript, vì vậy tôi cũng có thể sử dụng nó làm nhà xuất khẩu của mình! Vấn đề là tiết kiệm.

Bây giờ, tôi biết rằng tôi có thể phân tích cú pháp tệp, gửi kết quả đến máy chủ và yêu cầu trình duyệt quay lại tệp từ máy chủ dưới dạng tải xuống. Nhưng trong thực tế, máy chủ không liên quan gì đến quá trình đặc biệt này, vậy tại sao nó lại liên quan? Tôi đã có nội dung của tập tin mong muốn trong bộ nhớ. Có cách nào để tôi có thể trình bày cho người dùng tải xuống bằng JavaScript thuần không? (Tôi nghi ngờ điều đó, nhưng cũng có thể hỏi ...)

Và để rõ ràng: Tôi không cố gắng truy cập hệ thống tập tin mà không có kiến ​​thức của người dùng! Người dùng sẽ cung cấp một tệp (có thể thông qua kéo và thả), tập lệnh sẽ chuyển đổi tệp trong bộ nhớ và người dùng sẽ được nhắc tải xuống kết quả. Tất cả trong số đó phải là các hoạt động "an toàn" khi có liên quan đến trình duyệt.

[EDIT]: Tôi đã không đề cập đến nó trước, vì vậy những người đăng bài trả lời "Flash" là đủ hợp lệ, nhưng một phần trong những gì tôi đang làm là cố gắng làm nổi bật những gì có thể được thực hiện với HTML5 thuần túy ... vì vậy Flash là ngay trong trường hợp của tôi. (Mặc dù đó là một câu trả lời hoàn toàn hợp lệ cho bất kỳ ai làm một ứng dụng web "thực sự".) Đó là trường hợp có vẻ như tôi không gặp may trừ khi tôi muốn liên quan đến máy chủ. Dẫu sao cũng xin cảm ơn!

OK, tạo dữ liệu: URI chắc chắn thực hiện thủ thuật cho tôi, nhờ Matthew và Dennkster chỉ ra tùy chọn đó! Về cơ bản đây là cách tôi làm:

1) lấy tất cả nội dung thành một chuỗi gọi là "nội dung" (ví dụ: bằng cách tạo nội dung đó ban đầu hoặc bằng cách đọc InternalHTML của thẻ của một trang đã được xây dựng).

2) Xây dựng URI dữ liệu:

uriContent = "data:application/octet-stream," + encodeURIComponent(content);

Sẽ có giới hạn độ dài tùy thuộc vào loại trình duyệt, v.v., nhưng ví dụ Firefox 3.6.12 hoạt động cho đến ít nhất 256k. Mã hóa trong Base64 thay vì sử dụng encodeURIComponent có thể giúp mọi thứ hiệu quả hơn, nhưng đối với tôi điều đó là ổn.

3) mở một cửa sổ mới và "chuyển hướng" nó tới lời nhắc URI này để biết vị trí tải xuống của trang JavaScript được tạo của tôi:

newWindow = window.open(uriContent, 'neuesDokument');

Đó là nó.

Giải pháp đơn giản cho các trình duyệt sẵn sàng HTML5 ...

function download(filename, text) {
    var pom = document.createElement('a');
    pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
    pom.setAttribute('download', filename);

    if (document.createEvent) {
        var event = document.createEvent('MouseEvents');
        event.initEvent('click', true, true);
        pom.dispatchEvent(event);
    }
    else {
        pom.click();
    }
}

Sử dụng

download('test.txt', 'Hello world!');

HTML5 đã định nghĩa một window.saveAs(blob, filename)phương thức. Nó không được hỗ trợ bởi bất kỳ trình duyệt nào ngay bây giờ. Nhưng có một thư viện tương thích có tên FileSaver.js bổ sung chức năng này cho hầu hết các trình duyệt hiện đại (bao gồm cả Internet Explorer 10+). Internet Explorer 10 hỗ trợ một navigator.msSaveBlob(blob, filename)phương thức ( MSDN ), được sử dụng trong FileSaver.js để hỗ trợ Internet Explorer.

Tôi đã viết một bài đăng blog với nhiều chi tiết hơn về vấn đề này.

Lưu tập tin lớn

URI dữ liệu dài có thể gây ra vấn đề về hiệu suất trong trình duyệt. Một tùy chọn khác để lưu các tệp được tạo ở phía máy khách, là đặt nội dung của chúng vào đối tượng Blob (hoặc Tệp) và tạo liên kết tải xuống bằng cách sử dụng URL.createObjectURL(blob). Điều này trả về một URL có thể được sử dụng để lấy nội dung của blob. Các blob được lưu trữ bên trong trình duyệt cho đến khi URL.revokeObjectURL()được gọi trên URL hoặc tài liệu đã tạo nó được đóng lại. Hầu hết các trình duyệt web đều hỗ trợ URL đối tượng , Opera Mini là trình duyệt duy nhất không hỗ trợ chúng.

Buộc tải xuống

Nếu dữ liệu là văn bản hoặc hình ảnh, trình duyệt có thể mở tệp, thay vì lưu nó vào đĩa. Để khiến tệp được tải xuống khi nhấp vào liên kết, bạn có thể sử dụng downloadthuộc tính. Tuy nhiên, không phải tất cả các trình duyệt web đều hỗ trợ thuộc tính tải xuống . Một tùy chọn khác là sử dụng application/octet-streamnhư loại mime của tệp, nhưng điều này làm cho tệp được hiển thị dưới dạng blob nhị phân, đặc biệt không thân thiện với người dùng nếu bạn không hoặc không thể chỉ định tên tệp. Xem thêm ' Buộc mở cửa sổ bật lên "Lưu dưới dạng ..." tại liên kết văn bản, nhấp vào pdf trong HTML '.

Chỉ định tên tệp

Nếu blob được tạo bằng Trình tạo tệp, bạn cũng có thể đặt tên tệp, nhưng chỉ một số trình duyệt web (bao gồm Chrome & Firefox) có hỗ trợ cho Trình tạo tệp . Tên tệp cũng có thể được chỉ định làm đối số chodownload thuộc tính, nhưng điều này phải chịu rất nhiều cân nhắc về bảo mật . Internet Explorer 10 và 11 cung cấp phương thức riêng của mình, msSaveBlob , để chỉ định tên tệp.

Mã ví dụ

var file;
var data = [];
data.push("This is a test\n");
data.push("Of creating a file\n");
data.push("In a browser\n");
var properties = {type: 'text/plain'}; // Specify the file's mime-type.
try {
  // Specify the filename using the File constructor, but ...
  file = new File(data, "file.txt", properties);
} catch (e) {
  // ... fall back to the Blob constructor if that isn't supported.
  file = new Blob(data, properties);
}
var url = URL.createObjectURL(file);
document.getElementById('link').href = url;

<a id="link" target="_blank" download="file.txt">Download</a>

function download(content, filename, contentType)
{
    if(!contentType) contentType = 'application/octet-stream';
        var a = document.createElement('a');
        var blob = new Blob([content], {'type':contentType});
        a.href = window.URL.createObjectURL(blob);
        a.download = filename;
        a.click();
}

Hãy xem Doug Neiner Downloadify , giao diện JavaScript dựa trên Flash để thực hiện việc này.

Downloadify là một thư viện JavaScript + Flash nhỏ cho phép tạo và lưu tệp nhanh chóng, trong trình duyệt mà không cần tương tác với máy chủ.

Giải pháp đơn giản!

<a download="My-FileName.txt" href="data:application/octet-stream,HELLO-WORLDDDDDDDD">Click here</a>

Hoạt động trong tất cả các trình duyệt hiện đại.

Bạn có thể tạo URI dữ liệu . Tuy nhiên, có những hạn chế dành riêng cho trình duyệt.

Tôi đã sử dụng FileSaver ( https://github.com/eligrey/FileSaver.js ) và nó hoạt động tốt.
Ví dụ, tôi đã thực hiện chức năng này để xuất nhật ký được hiển thị trên một trang.
Bạn phải vượt qua một mảng cho sự phát sinh của Blob, vì vậy tôi chỉ có thể không viết điều này đúng cách, nhưng nó hiệu quả với tôi.
Trong trường hợp, hãy cẩn thận với sự thay thế: đây là cú pháp để tạo ra toàn cầu này, nếu không nó sẽ chỉ thay thế cái đầu tiên anh ta gặp.

exportLogs : function(){
    var array = new Array();

    var str = $('#logs').html();
    array[0] = str.replace(/<br>/g, '\n\t');

    var blob = new Blob(array, {type: "text/plain;charset=utf-8"});
    saveAs(blob, "example.log");
}

Tôi tìm thấy hai cách tiếp cận đơn giản phù hợp với tôi. Đầu tiên, sử dụng một ayếu tố đã được nhấp và tiêm dữ liệu tải xuống. Và thứ hai, tạo một aphần tử với dữ liệu tải xuống, thực thi a.click()và xóa nó một lần nữa. Nhưng cách tiếp cận thứ hai chỉ hoạt động nếu được gọi bởi hành động nhấp chuột của người dùng. (Một số) Khối trình duyệt click()từ các bối cảnh khác như khi tải hoặc kích hoạt sau khi hết thời gian (setTimeout).

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="UTF-8">
    <script type="text/javascript">
      function linkDownload(a, filename, content) {
        contentType =  'data:application/octet-stream,';
        uriContent = contentType + encodeURIComponent(content);
        a.setAttribute('href', uriContent);
        a.setAttribute('download', filename);
      }
      function download(filename, content) {
        var a = document.createElement('a');
        linkDownload(a, filename, content);
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
      }
    </script>
   </head>
  <body>
    <a href="#" onclick="linkDownload(this, 'test.txt', 'Hello World!');">download</a>
    <button onclick="download('test.txt', 'Hello World!');">download</button>
  </body>
</html>

Đây là một liên kết đến phương pháp URI dữ liệu mà Mathew đã đề xuất, nó hoạt động trên safari, nhưng không tốt vì tôi không thể đặt filetype, nó được lưu thành "không xác định" và sau đó tôi phải quay lại đó và thay đổi nó theo thứ tự để xem tập tin ...

http://www.nihilogic.dk/labs/canvas2image/

Bạn có thể sử dụng localStorage. Đây là tương đương Html5 của cookie. Nó dường như hoạt động trên Chrome và Firefox NHƯNG trên Firefox, tôi cần tải nó lên máy chủ. Đó là, thử nghiệm trực tiếp trên máy tính ở nhà của tôi không hoạt động.

Tôi đang làm việc với các ví dụ HTML5. Tới http://faculty.purchase.edu/jeanine.meyer/html5/html5explain.html và di chuyển đến một mê cung. Thông tin để xây dựng lại mê cung được lưu trữ bằng localStorage.

Tôi đã đến bài viết này để tìm kiếm HTML5 JavaScript để tải và làm việc với các tệp xml. Có giống với html và JavaScript cũ hơn không ????

thử

let a = document.createElement('a');
a.href = "data:application/octet-stream,"+encodeURIComponent('"My DATA"');
a.download = 'myFile.json';
a.click(); // we not add 'a' to DOM so no need to remove

Nếu bạn muốn tải xuống dữ liệu nhị phân, hãy xem tại đây

Cập nhật

2020,06,14 Tôi nâng cấp Chrome lên 83.0 trở lên, dừng đoạn trích SO (do hạn chế bảo mật hộp cát ) - nhưng phiên bản JSFiddle hoạt động - tại đây

Như đã đề cập trước đây về API tệp , cùng với API FileWriter và FileSystem có thể được sử dụng để lưu trữ tệp trên máy của khách hàng từ ngữ cảnh của tab / cửa sổ trình duyệt.

Tuy nhiên, có một số điều liên quan đến hai API sau mà bạn cần biết:

• Việc triển khai API hiện chỉ tồn tại trong các trình duyệt dựa trên Chromium (Chrome & Opera)
• Cả hai API đã được gỡ khỏi theo dõi tiêu chuẩn W3C vào ngày 24 tháng 4 năm 2014 và cho đến nay là độc quyền
• Việc loại bỏ các API (hiện là độc quyền) khỏi các trình duyệt triển khai trong tương lai là một khả năng
• Một hộp cát (một vị trí trên đĩa bên ngoài các tệp có thể không tạo ra hiệu ứng) được sử dụng để lưu trữ các tệp được tạo bằng API
• Một hệ thống tệp ảo (cấu trúc thư mục không nhất thiết tồn tại trên đĩa ở dạng tương tự như khi truy cập từ trong trình duyệt) được sử dụng đại diện cho các tệp được tạo bằng API

Dưới đây là các ví dụ đơn giản về cách các API được sử dụng, trực tiếp và gián tiếp, song song để thực hiện việc này:

Bánh nướng *

bakedGoods.get({
        data: ["testFile"],
        storageTypes: ["fileSystem"],
        options: {fileSystem:{storageType: Window.PERSISTENT}},
        complete: function(resultDataObj, byStorageTypeErrorObj){}
});

Sử dụng API tệp, FileWriter và FileSystem thô

function onQuotaRequestSuccess(grantedQuota)
{

    function saveFile(directoryEntry)
    {

        function createFileWriter(fileEntry)
        {

            function write(fileWriter)
            {
                var dataBlob = new Blob(["Hello world!"], {type: "text/plain"});
                fileWriter.write(dataBlob);              
            }

            fileEntry.createWriter(write);
        }

        directoryEntry.getFile(
            "testFile", 
            {create: true, exclusive: true},
            createFileWriter
        );
    }

    requestFileSystem(Window.PERSISTENT, grantedQuota, saveFile);
}

var desiredQuota = 1024 * 1024 * 1024;
var quotaManagementObj = navigator.webkitPersistentStorage;
quotaManagementObj.requestQuota(desiredQuota, onQuotaRequestSuccess);

Mặc dù API FileSystem và FileWriter không còn trên đường chuẩn, nhưng theo tôi, việc sử dụng chúng có thể được biện minh trong một số trường hợp, bởi vì:

• Sự quan tâm mới từ các nhà cung cấp trình duyệt không triển khai có thể đặt họ lại ngay trên đó
• Tỷ lệ thâm nhập thị trường của các trình duyệt triển khai (dựa trên Chromium) cao
• Google (người đóng góp chính cho Chromium) đã không đưa ra và ngày kết thúc cho các API

Tuy nhiên, "một số trường hợp" có bao gồm chính bạn hay không, là do bạn quyết định.

* Bakedoods được duy trì bởi không ai khác ngoài anh chàng này ngay tại đây :)

Chuỗi này là vô giá để tìm ra cách tạo tệp nhị phân và lời nhắc tải xuống tệp đã đặt tên, tất cả trong mã máy khách mà không cần máy chủ.

Bước đầu tiên đối với tôi là tạo blob nhị phân từ dữ liệu mà tôi đang lưu. Có rất nhiều mẫu để thực hiện điều này cho một loại nhị phân duy nhất, trong trường hợp của tôi, tôi có một định dạng nhị phân với nhiều loại mà bạn có thể chuyển qua dưới dạng một mảng để tạo blob.

saveAnimation: function() {

    var device = this.Device;
    var maxRow = ChromaAnimation.getMaxRow(device);
    var maxColumn = ChromaAnimation.getMaxColumn(device);
    var frames = this.Frames;
    var frameCount = frames.length;

    var writeArrays = [];


    var writeArray = new Uint32Array(1);
    var version = 1;
    writeArray[0] = version;
    writeArrays.push(writeArray.buffer);
    //console.log('version:', version);


    var writeArray = new Uint8Array(1);
    var deviceType = this.DeviceType;
    writeArray[0] = deviceType;
    writeArrays.push(writeArray.buffer);
    //console.log('deviceType:', deviceType);


    var writeArray = new Uint8Array(1);
    writeArray[0] = device;
    writeArrays.push(writeArray.buffer);
    //console.log('device:', device);


    var writeArray = new Uint32Array(1);
    writeArray[0] = frameCount;
    writeArrays.push(writeArray.buffer);
    //console.log('frameCount:', frameCount);

    for (var index = 0; index < frameCount; ++index) {

      var frame = frames[index];

      var writeArray = new Float32Array(1);
      var duration = frame.Duration;
      if (duration < 0.033) {
        duration = 0.033;
      }
      writeArray[0] = duration;
      writeArrays.push(writeArray.buffer);

      //console.log('Frame', index, 'duration', duration);

      var writeArray = new Uint32Array(maxRow * maxColumn);
      for (var i = 0; i < maxRow; ++i) {
        for (var j = 0; j < maxColumn; ++j) {
          var color = frame.Colors[i][j];
          writeArray[i * maxColumn + j] = color;
        }
      }
      writeArrays.push(writeArray.buffer);
    }

    var blob = new Blob(writeArrays, {type: 'application/octet-stream'});

    return blob;
}

Bước tiếp theo là làm cho trình duyệt nhắc người dùng tải xuống blob này với tên được xác định trước.

Tất cả những gì tôi cần là một liên kết có tên tôi đã thêm vào HTML5 mà tôi có thể sử dụng lại để đổi tên tập tin ban đầu. Tôi đã giấu nó vì liên kết không cần hiển thị.

<a id="lnkDownload" style="display: none" download="client.chroma" href="" target="_blank"></a>

Bước cuối cùng là nhắc người dùng tải tập tin.

var data = animation.saveAnimation();
var uriContent = URL.createObjectURL(data);
var lnkDownload = document.getElementById('lnkDownload');
lnkDownload.download = 'theDefaultFileName.extension';
lnkDownload.href = uriContent;
lnkDownload.click();

Đây là một hướng dẫn để xuất các tệp dưới dạng ZIP:

Trước khi bắt đầu, có một thư viện để lưu tệp, tên của thư viện là fileSaver.js, Bạn có thể tìm thấy thư viện này ở đây. Bây giờ, hãy bắt đầu, bao gồm các thư viện cần thiết:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.4/jszip.min.js"  type="text/javascript"></script>
<script type="text/javascript" src="https://fastcdn.org/FileSaver.js/1.1.20151003/FileSaver.js" ></script>

Bây giờ sao chép mã này và mã này sẽ tải xuống tệp zip với tệp hello.txt có nội dung Hello World. Nếu mọi thứ hoạt động tốt, điều này sẽ tải xuống một tập tin.

<script type="text/javascript">
    var zip = new JSZip();
    zip.file("Hello.txt", "Hello World\n");
    zip.generateAsync({type:"blob"})
    .then(function(content) {
        // see FileSaver.js
        saveAs(content, "file.zip");
    });
</script>

Điều này sẽ tải xuống một tập tin gọi là file.zip. Bạn có thể đọc thêm tại đây: http://www.wapgee.com/story/248/guide-to-create-zip-files-USE-javascript-by-USE-jszip-l Library