У меня есть данные, которые я хочу записать в файл, и откройте диалоговое окно файла, чтобы пользователь мог выбрать, где сохранить файл. Было бы здорово, если бы он работал во всех браузерах, но он должен работать в Chrome. Я хочу сделать все это на стороне клиента.

По сути, я хочу знать, что поместить в эту функцию:

saveFile: function(data)
{
}

Свойство window.undefined недоступно для записи во всех современных браузерах (JavaScript 1.8.5 или позже). от Mozilla Документация:

Некоторые люди делают исключение: они допускают создание пользовательских атрибутов, добавляемых в DOM Javascript на стороне клиента во время выполнения. Они считают, что это нормально: поскольку пользовательские атрибуты добавляются в DOM только во время выполнения, HTML не содержит пользовательских атрибутов.

Очень незначительное улучшение кода с помощью Awesomeness01 (нет необходимости в теге привязки) с добавлением, как предложено в trueimage удалить элемент из первого

// Function to download data to a file
function download(data, filename, type) {
    var file = new Blob([data], {type: type});
    if (window.navigator.msSaveOrOpenBlob) // IE10 
        window.navigator.msSaveOrOpenBlob(file, filename);
    else { // Others
        var a = document.createElement("a"),
                url = URL.createObjectURL(file);
        a.href = url;
        a.download = filename;
        document.body.appendChild(a);
        a.click();
        setTimeout(function() {
            document.body.removeChild(a);
            window.URL.revokeObjectURL(url);  
        }, 0); 
    }
}

Проверено на корректную работу в Chrome, FireFox и IE10.

В Safari данные открываются на новой вкладке, и нужно было бы вручную сохранить этот файл.

Этот проект на github выглядит многообещающе:

Таким образом, он выдает тот же список ключей, что и вы, проверяя каждый ключ объекта с помощью hasOwnProperty. Вам не нужна эта дополнительная тестовая операция, чем и

FileSaver.js реализует интерфейс W3C saveAs () FileSaver в браузерах, которые изначально не поддерживают его.

Также посмотрите демо здесь: параметр

http://eligrey.com/demos/FileSaver.js/

function download(text, name, type) {
  var a = document.getElementById("a");
  var file = new Blob([text], {type: type});
  a.href = URL.createObjectURL(file);
  a.download = name;
}
<a href="" id="a">click here to download your file</a>
<button onclick="download('file text', 'myfilename.txt', 'text/plain')">Create file</button>

. Затем вы можете загрузить файл, поместив атрибут загрузки в тег привязки.

причина, по которой мне это нравится больше, чем создание URL-адрес данных заключается в том, что вам не нужно создавать длинный длинный URL-адрес, вы можете просто создать временный URL-адрес.

Вот

<!DOCTYPE html>
<html>
<head>
    <title>JS CSV</title>
</head>
<body>
    <button id="b">export to CSV</button>
    <script type="text/javascript">
        function exportToCsv() {
            var myCsv = "Col1,Col2,Col3nval1,val2,val3";

            window.open('data:text/csv;charset=utf-8,'   escape(myCsv));
        }

        var button = document.getElementById('b');
        button.addEventListener('click', exportToCsv);
    </script>
</body>
</html>
setTimeout("create('Hello world!', 'myfile.txt', 'text/plain')");
function create(text, name, type) {
  var dlbtn = document.getElementById("dlbtn");
  var file = new Blob([text], {type: type});
  dlbtn.href = URL.createObjectURL(file);
  dlbtn.download = name;
}
<a href="javascript:void(0)" id="dlbtn"><button>click here to download your file</button></a>

Для последних версий браузеров, таких как Chrome, вы можете использовать File API, как в этом уроке :

window.requestFileSystem  = window.requestFileSystem || window.webkitRequestFileSystem;
window.requestFileSystem(window.PERSISTENT, 5*1024*1024 /*5MB*/, saveFile, errorHandler);

Попробуйте использовать это, он загружает файл, и все, что вам нужно сделать, это отредактировать атрибуты onclick.

function download(text, name, type) {
  var a = document.getElementById("a");
  a.style.display = "block";
  var file = new Blob([text], {type: type});
  a.href = URL.createObjectURL(file);
  a.download = name;
}
#a { display: none; }
<a href="" id="a" download>click here to download your file</a>
<button onclick="download('file text', 'myfilename.txt', 'text/plain')">Create file</button>

, вы можете считать, что undefined представляет отсутствие значения на системном уровне, неожиданное или подобное ошибке, а null представляет представление уровня программы, нормальное или ожидаемое отсутствие значения.

var aFileParts = ['<a id="a"><b id="b">hey!</b></a>'];
var oMyBlob = new Blob(aFileParts, {type : 'text/html'}); // the blob
window.open(URL.createObjectURL(oMyBlob));

Вы не можете сделать это исключительно в Javascript. Javascript, работающий в браузерах, пока не имеет достаточных разрешений (были предложения) по соображениям безопасности.

Вместо этого я бы порекомендовал использовать Downloadify :

Крошечная библиотека Flash JavaScript, которая позволяет создавать и загружать текстовые файлы без взаимодействия с сервером.

Вы можете увидеть простую демонстрацию говорится, что , где вы предоставляете содержание и может проверить сохранение / отмена / обработку ошибок.

Javascript имеет API-интерфейс FileSystem. Если вы можете справиться с тем, чтобы эта функция работала только в Chrome, хорошей отправной точкой будет следующее: http://www.html5rocks.com/en/tutorials/file/filesystem/ Глядя на вывод

Для Chrome и Firefox я использовал чисто JavaScript-метод. { *} является наиболее популярной реализацией стандарта ECMAScript. Основные функции Javascript основаны на стандарте ECMAScript, но Javascript также имеет другие дополнительные функции, которых нет в спецификации / стандарте ECMA.

(Мое приложение не может использовать пакет, такой как Blob.js, потому что он подается из специального механизма: DSP с Сервер WWWeb забит и практически ничего не осталось.)

function FileSave(sourceText, fileIdentity) {
    var workElement = document.createElement("a");
    if ('download' in workElement) {
        workElement.href = "data:"   'text/plain'   "charset=utf-8,"   escape(sourceText);
        workElement.setAttribute("download", fileIdentity);
        document.body.appendChild(workElement);
        var eventMouse = document.createEvent("MouseEvents");
        eventMouse.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        workElement.dispatchEvent(eventMouse);
        document.body.removeChild(workElement);
    } else throw 'File saving not supported for this browser';
}

Notes, caveats и weasel-words:

  • , который я имел успех с этим кодом в клиентах Chrome и Firefox, работающих в средах Linux (Maipo) и Windows (7 и 10).
  • Однако, если следует использовать sourceText больше, чем МБ, иногда Chrome (только иногда) застревает в своей загрузке без каких-либо указаний на сбой ; Firefox до сих пор не демонстрировал такого поведения. Причиной может быть некоторое ограничение BLOB-объектов в Chrome. Честно говоря, я просто не знаю ;, если у кого-нибудь есть идеи, как исправить (или хотя бы обнаружить), пожалуйста, напишите. Если происходит аномалия загрузки, когда браузер Chrome закрыт, он генерирует диагностику, такую ​​как Chrome browser diagnostic

StreamSaver — альтернатива для сохранения очень больших файлов без необходимости хранить все данные в памяти.
но он не принимает _ (подчеркивание) в качестве специального символа (например, Aa12345_).

Вы можете либо получить программу записи и вручную записать в нее Uint8Array, либо передать двоичный readableStream в поток записи

!): { *} Весь способ сделать перенаправление со стороны клиента: Пример , обратитесь к документации по MDN.

  • Как сохранить несколько файлов в виде zip , который передает сообщение на
  • передачу readableStream из, например, Response или blob.stream() для StreamSaver
  • Вот пример в простейшей форме:
  • можно создать с помощью

имеет iframe с указанным

const fileStream = streamSaver.createWriteStream('filename.txt')

new Response('StreamSaver is awesome').body
  .pipeTo(fileStream)
  .then(success, error)

Если вы хотите сохранить большой двоичный объект, вы просто конвертируете его в readableStream

new Response(blob).body.pipeTo(...) // response hack
blob.stream().pipeTo(...) // feature reference