Javascript: загрузка данных в файл из содержимого на странице

: У меня есть домашняя страница, где я показываю диаграмму, которая была построена с использованием разделенных запятыми значений изнутри страницы. Я хотел бы предоставить пользователям возможность загружать данные в виде cvs файла, не обращаясь снова к серверу. (поскольку данные уже есть) Это возможно? Я предпочел бы чистое решение для JavaScript.

До сих пор я обнаружил: http://pixelgraphics.us/downloadify/test.html, но он включает флеш, которого я бы хотел избежать.

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

Ответы

Ответ 1

Обновление

Время, конечно, меняет вещи;-) Когда я впервые ответил на этот вопрос, IE8 был последним браузером IE (ноябрь 2010 г.), и, таким образом, не было сквозного браузера, чтобы выполнить это без кругового путешествия сервера или с помощью инструмента, требующего Flash.

@Zectburno answer предоставит вам то, что вам нужно сейчас, однако для исторического контекста следует знать, какие браузеры IE поддерживают эту функцию.

  • btoa() - undefined в IE8 и IE9
  • Blob доступен в IE10 +

Обязательно проверьте в браузерах, которые необходимо поддерживать. Несмотря на то, что пример Blob в другом ответе должен работать в IE10 +, он не работает для меня, просто нажимая на ссылку (браузер ничего не делает, без ошибок)... только если я щелкнул правой кнопкой мыши и сохранил цель как "file.csv", тогда перейдите к файлу и дважды щелкните его, я могу открыть файл.

Проверьте оба подхода (btoa/Blob) в этом JSFiddle. (здесь код)

<!doctype html>
<html>
<head>
</head>
<body>
  <a id="a" target="_blank">Download CSV (via btoa)</a>
  <script>
    var csv = "a,b,c\n1,2,3\n";
    var a = document.getElementById("a");
    a.href = "data:text/csv;base64," + btoa(csv);
  </script>
  <hr/>
  <a id="a2" download="Download.csv" type="text/csv">Download CSV (via Blob)</a>
  <script>
    var csv = "a,b,c\n1,2,3\n";
    var data = new Blob([csv]);
    var a2 = document.getElementById("a2");
    a2.href = URL.createObjectURL(data);
  </script>
</body>
</html>

Оригинальный ответ:

Я не думаю, что для этого есть опция.

Я бы просто отредактировал ваш код таким образом, чтобы при обнаружении Flash 10+ (93% насыщенности по состоянию на сентябрь 2009 г.) в пользовательской системе, предоставить параметр "Загрузить", в противном случае отказать серверному запросу.

Ответ 2

Протестировано на Safari 5, Firefox 6, Opera 12, Chrome 26.

<a id='a'>Download CSV</a>
<script>
    var csv = 'a,b,c\n1,2,3\n';
    var a = document.getElementById('a');
    a.href='data:text/csv;base64,' + btoa(csv);
</script>

HTML5

<a id='a' download='Download.csv' type='text/csv'>Download CSV</a>
<script>
    var csv = 'a,b,c\n1,2,3\n';
    var data = new Blob([csv]);
    var a = document.getElementById('a');
    a.href = URL.createObjectURL(data);
</script>

Ответ 3

Простое решение:

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

Использование

download("csv_data_here", "filename.csv", "text/csv");

Ответ 4

Насколько я знаю, это невозможно: вот почему был создан Downloadify.

Вы можете попробовать связать с data:URL, содержащий данные CSV, но будут проблемы с перекрестным браузером.

Ответ 5

function export(exportAs) {
    var csvText = tableRowsToCSV(this.headTable.rows);­
    csvText += tableRowsToCSV(this.bodyTable.rows);­
    //open the iframe doc for writing
    var expIFrame;
    if (strBrowser == "MSIE") expIFrame = document.exportiframe;
    else expIFrame = window.framesexportiframe;
    var doc = expIFrame.document;
    doc.open('text/plain', 'replace');
    doc.charset = "utf-8";
    doc.write(csvText);
    doc.close();
    var fileName = exportAs + ".txt";
    doc.execCommand("SaveAs", null, fileName);
}

function tableRowsToCSV(theRows) {
    var csv = "";
    var csvRow = "";
    var theCells;
    var cellData = "";
    for (var r = 0; r < theRows.length; r++) {
        theCells = theRows.item(r).cells;
        for (var c = 0; c < theCells.length; c++) {
            cellData = "";
            cellData = theCells.item(c).innerText;
            if (cellData.indexOf(",") != -1) cellData = "'" + cellData + "'";
            if (cellData != "") csvRow += "," + cellData;
        }
        if (csvRow != "") csvRow = csvRow.substring(1, csvRow.length);­
        csv += csvRow + "\n";
        csvRow = "";
    }
    return csv;
}

Я нашел этот код в другом месте, здесь, ранее

Ответ 6

Если у ваших пользователей есть современные браузеры, новый объект Blob может вам помочь.

На основе приведенного здесь примера https://developer.mozilla.org/en/docs/DOM/Blob ( "Пример использования конструктора Blob" ), вы можете сделать что-то вроде следующего:

var typedArray = "123,abc,456"; //your csv as a string
var blob = new Blob([typedArray], {type: "text/csv"});
var url = URL.createObjectURL(blob);
var a = document.querySelector("#linktocsv"); // the id of the <a> element where you will render the download link
a.href = url;
a.download = "file.csv";

Ответ 7

Самое полное решение, с которым я столкнулся, использует FileSaver.js, обрабатывая многие потенциальные проблемы с кросс-браузером для вас с резервными копиями.

Он использует объект Blob, как это сделали другие плакаты, и создатель даже создает Blob.js polyfill, если вам нужно поддерживать версии браузера, которые не поддерживают Blob