Останнім часом я спіткнувся з WebGL і змусив читача Collada працювати. Проблема в тому, що вона досить повільна (Collada - це дуже багатослівний формат), тому я збираюся розпочати перетворення файлів у більш простий у використанні формат (можливо, JSON). У мене вже є код для розбору файлу в JavaScript, тому я можу також використовувати його як мій експортер! Проблема - економія.

Тепер я знаю, що я можу проаналізувати файл, надіслати результат на сервер, і браузер вимагає повернути файл назад із сервера як завантаження. Але насправді сервер не має нічого спільного з цим конкретним процесом, тож навіщо його включати? У мене вже є вміст потрібного файлу в пам'яті. Чи є спосіб, щоб я міг представити користувачеві завантаження за допомогою чистого JavaScript? (Я сумніваюся в цьому, але, можливо, запитаю ...)

І щоб було зрозуміло: я не намагаюся отримати доступ до файлової системи без відома користувачів! Користувач надасть файл (можливо, за допомогою перетягування), сценарій перетворить файл у пам'ять, а користувачеві буде запропоновано завантажити результат. Все це повинно бути "безпечним" заходом, що стосується браузера.

[EDIT]: Я не згадував про це вперед, тому плакати, які відповіли "Flash", є досить дійсними, але частина того, що я роблю, - це спроба виділити те, що можна зробити з чистим HTML5 ... тому Flash - це прямо в моєму випадку. (Хоча це абсолютно правильна відповідь для тих, хто робить "справжній" веб-додаток.) ​​У цьому випадку, схоже, мені не пощастило, якщо я не хочу залучати сервер. Все одно, дякую!

Гаразд, створення даних: URI, безумовно, робить фокус для мене, завдяки Метью та Деннкстеру, які вказали на цей варіант! Ось як я це роблю:

1) отримуйте весь вміст у рядку під назвою "content" (наприклад, створивши його там спочатку або прочитавши innerHTML тегу вже вбудованої сторінки).

2) Створіть URI даних:

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

Існують обмеження довжини залежно від типу браузера тощо, але, наприклад, Firefox 3.6.12 працює, щонайменше, до 256k. Кодування в Base64 натомість використання encodeURIComponent може зробити речі більш ефективними, але для мене це було нормально.

3) відкрити нове вікно та "перенаправити" його на цей запит URI для місцезнаходження завантаження моєї сторінки, створеної JavaScript:

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

Це воно.

Просте рішення для готових браузерів 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();
    }
}

Використання

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

HTML5 визначив window.saveAs(blob, filename)метод. Зараз він не підтримується жодним браузером. Але є бібліотека сумісності під назвою FileSaver.js, яка додає цю функцію до більшості сучасних браузерів (включаючи Internet Explorer 10+). Internet Explorer 10 підтримує navigator.msSaveBlob(blob, filename)метод ( MSDN ), який використовується у FileSaver.js для підтримки Internet Explorer.

Я написав публікацію в блозі з детальнішою інформацією щодо цієї проблеми.

Збереження великих файлів

Довгі URI даних можуть створювати проблеми з роботою у веб-переглядачах. Інший варіант збереження файлів, створених на базі клієнта, - розмістити їх вміст у об'єкті Blob (або Файл) та створити посилання для завантаження за допомогою URL.createObjectURL(blob). Це повертає URL-адресу, яку можна використовувати для отримання вмісту блобу. Клоба зберігається всередині браузера, поки не URL.revokeObjectURL()буде викликано або URL-адресу, або документ, який її створив, не закриється. Більшість веб-браузерів підтримують URL-адреси об’єктів , Opera Mini - єдиний, який не підтримує їх.

Примусове завантаження

Якщо дані є текстом або зображенням, браузер може відкрити файл, а не зберегти його на диску. Щоб заставити файл завантажитися після натискання на посилання, ви можете використовувати downloadатрибут. Однак не всі веб-браузери підтримують атрибут завантаження . Іншим варіантом є використання application/octet-streamяк mime-типу файлу, але це призводить до того, що файл буде представлений у вигляді двійкового блобу, що особливо непривітне для користувачів, якщо ви не можете або не можете вказати ім’я файлу. Дивіться також " Змусити відкрити" Зберегти як ... "спливаюче вікно відкрити за текстовим посиланням, натисніть на pdf у HTML ".

Вказання імені файлу

Якщо крапка створена за допомогою конструктора файлів, ви також можете встановити ім'я файлу, але лише кілька веб-браузерів (включаючи Chrome і Firefox) підтримують конструктор файлів . Ім’я файлу також може бути вказане як аргумент downloadатрибуту, але це залежить від тони безпеки . Internet Explorer 10 і 11 надає власний метод, msSaveBlob , для визначення імені файлу.

Приклад коду

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();
}

Погляньте на Дуга Neiner в Downloadify , який є на основі флеш - інтерфейс JavaScript , щоб зробити це.

Downloadify - це крихітна бібліотека JavaScript + Flash, яка дозволяє генерувати та зберігати файли під час польоту, у веб-переглядачі, без взаємодії із сервером.

Просте рішення!

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

Працює у всіх сучасних браузерах.

Ви можете створити URI даних . Однак існують обмеження щодо браузера.

Я використовував FileSaver ( https://github.com/eligrey/FileSaver.js ), і він працює чудово.
Наприклад, я зробив цю функцію для експорту журналів, відображених на сторінці.
Ви маєте пройти масив для отримання екземпляра Blob, тому я просто, можливо, не написав це правильно, але це працює для мене.
На всякий випадок будьте обережні з заміною: це синтаксис, щоб зробити це глобальним, інакше він замінить лише перший, з яким він зустрічається.

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");
}

Я знайшов два простих підходи, які працюють для мене. По-перше, за допомогою вже натиснутого aелемента та введення даних для завантаження. По-друге, генеруючи aелемент із завантаженими даними, виконуючи a.click()та видаляючи їх знову. Але другий підхід працює лише в тому випадку, якщо він також викликається дією натискання користувача. (Деякі) Блок браузера click()з інших контекстів, наприклад, під час завантаження або спрацьовування після таймауту (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>

Ось посилання на метод URI даних, запропонований Метью, він працював на сафарі, але це не добре, тому що я не зміг встановити тип файлу, він зберігається як "невідомий", і тоді мені доведеться піти туди пізніше і змінити його в порядку для перегляду файлу ...

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

Ви можете використовувати localStorage. Це еквівалент файлів cookie Html5. Здається, він працює на Chrome і Firefox, АЛЕ на Firefox, мені потрібно було завантажити його на сервер. Тобто тестування безпосередньо на домашньому комп’ютері не працювало.

Я опрацьовую приклади HTML5. Перейдіть на сторінку http://facturing.purchase.edu/jeanine.meyer/html5/html5explain.html та перейдіть до лабіринту. Інформація для відновлення лабіринту зберігається за допомогою localStorage.

Я прийшов до цієї статті, шукаючи HTML5 JavaScript для завантаження та роботи з XML-файлами. Це те ж саме, що і старші html та JavaScript ????

спробуйте

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

Якщо ви хочете завантажити двійкові дані, подивіться тут

Оновлення

2020.06.14 я оновлюю Chrome до 83.0 і вище, так що зупинка фрагмента працює (через обмеження безпеки пісочниці ) - але версія JSFiddle працює - тут

Як уже згадувалося раніше, API File разом з API FileWriter і FileSystem можуть використовуватися для зберігання файлів на машині клієнта з контексту вкладки / вікна браузера.

Однак є кілька речей, що стосуються останніх двох API, про які слід пам’ятати:

• Зараз реалізація API існує лише у веб-переглядачах Chromium (Chrome & Opera)
• Обидва API були вилучені з треку стандартів W3C 24 квітня 2014 року, і на сьогоднішній день є власником
• В майбутньому можливе видалення (зараз фірмових) API з веб-переглядачів
• Для зберігання файлів, створених за допомогою API, використовується пісочниця (розташування на диску, поза яким файли не дають ефекту)
• Віртуальна файлова система (структура каталогів , яка не обов'язково існує на диску в тій же формі , що робить , коли доступ з браузера) використовується представляють файли , створені з допомогою API -

Ось прості приклади того, як API, прямо та опосередковано, використовуються в тандемі для цього:

Запечені продукти *

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

Використання сировини API, FileWriter та FileSystem

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);

Хоча API-файли FileSystem та FileWriter вже не відповідають стандартам, на мою думку, їх використання може бути виправданим у деяких випадках, оскільки:

• Поновлений інтерес з боку постачальників веб-переглядачів, які не реалізують, можуть повернути їх на себе
• Проникнення на ринок веб-переглядачів (на основі хрому) є високим
• Google (основний внесок у Chromium) не вказав API та дату закінчення терміну служби

Однак, чи стосується "деяких випадків" ваше власне, вирішувати.

* BakedGoods тут підтримує не хто інший, як цей хлопець :)

Цей потік був неоціненним для того, щоб з'ясувати, як генерувати двійковий файл та спонукати завантажувати названий файл, і все це в коді клієнта без сервера.

Першим кроком для мене було генерування двійкової крапки з даних, які я економив. Існує безліч зразків для цього для одного бінарного типу, в моєму випадку у мене є двійковий формат з декількома типами, який ви можете передавати як масив для створення краплі.

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;
}

Наступним кроком є ​​те, щоб браузер запропонував користувачу завантажити цю крапку із заздалегідь заданою назвою.

Все, що мені було потрібно, було названим посиланням, яке я додав у HTML5, що я міг повторно використовувати для перейменування початкового імені файлу. Я зберігав його прихованим, оскільки посилання не потребує відображення.

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

Останній крок - спонукати користувача завантажити файл.

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

Ось підручник з експорту файлів у вигляді ZIP:

Перед початком роботи є бібліотека для збереження файлів, назва бібліотеки - fileSaver.js, цю бібліотеку можна знайти тут. Почнемо, тепер включіть необхідні бібліотеки:

<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>

Тепер скопіюйте цей код, і цей код завантажить поштовий файл з файлом hello.txt із вмістом Hello World. Якщо все спрацює нормально, це завантажить файл.

<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>

Це завантажить файл під назвою file.zip. Більше ви можете прочитати тут: http://www.wapgee.com/story/248/guide-to-create-zip-files-using-javascript-by-using-jszip-library