2013-07-25 3 views
1

У меня есть веб-приложение, которое должно иметь возможность экспортировать некоторые данные javascript (в основном массивы) в Microsoft Excel. Мне сказали, что лучший способ сделать это - сохранить мои данные в виде файла CSV. Я знаю, что есть много потоков, которые касаются подобных проблем, но до сих пор я не нашел точно, что я ищу ... Я хотел бы обойти вызов веб-службы и сделать это через клиентскую сторону.Сохранить данные javascript в Excel

Следуя некоторым предложениям, я попытался записать свои массивы на диск с использованием URI данных. Вот код, который я имею в JavaScript:

function exportToCsv() { 

     var data = [JSONdata.mass, JSONdata.waterMass, JSONdata.bedTemp, JSONdata.evapRate]; 
     var keys = ["Mass(kg)", "H2O Mass in Bed(kg)", "Bed Temperature(kg)", "Evaporation Rate"]; 

     var str; 
     var orderedData = []; 
     for (var i = 0, iLen = data.length; i < iLen; i++) { 
      temp = data[i]; 
      for (var j = 0, jLen = temp.length; j < jLen; j++) { 

       if (!orderedData[j]) { 
        orderedData.push([temp[j]]); 
       } else { 
        orderedData[j].push(temp[j]); 
       } 
      } 
     } 


     str = keys.join(',') + '\r\n' + orderedData.join('\r\n');  



     var uri = 'data:application/csv;charset=UTF-8,' + str; 
     window.open(uri);  

} 

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

Я просмотрел в Download и FileSaver.js, но не удалось найти хорошую документацию. Кажется, что это должно быть довольно легко сделать ... Пожалуйста, протяните руку!

Заранее благодарен!


EDIT/UPDATE

я в конечном итоге получить мое решение работать с использованием FileSaver.js. Мои данные были заголовком, за которым следуют четыре больших двойных массива, поэтому CVS был для меня достаточно хорошим форматом. Вот код, который я использовал, чтобы получить мои файлы CSV, чтобы сохранить должным образом:

function exportExcel() 
    { 
     var data = [JSONdata.mass, JSONdata.waterMass, JSONdata.bedTemp, JSONdata.evapRate]; 
     //var data = [[1,2,3,4,5],[11,22,33,44,55],[111,222,333,444,555],[1111,2222,3333,4444,5555]]; 
     var keys = ['"Mass(kg)"', '"H2O Mass in Bed(kg)"', '"Bed Temperature(kg)"', '"Evaporation Rate"']; 

     var convertToCSV = function(data, keys) { 
      var orderedData = []; 
      for (var i = 0, iLen = data.length; i < iLen; i++) { 
       temp = data[i]; 
       for (var j = 0, jLen = temp.length; j < jLen; j++) { 

        quotes = ['"'+temp[j]+'"']; 
        if (!orderedData[j]) { 
         orderedData.push([quotes]); 
        } else { 
         orderedData[j].push(quotes); 
        } 
       } 
      } 
      return keys.join(',') + '\r\n' + orderedData.join('\r\n'); 
     } 


     var str = convertToCSV(data, keys); 

     var blob = new Blob([str], {type: "text/plain;charset=utf-8"}); 
     var filename = prompt("Please enter the filename"); 
     if(filename!=null && filename!="") 
      saveAs(blob, [filename+'.csv']); 
     else 
      alert("please enter a filename!");   

    } 

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

+0

Вы заметили, что 'orderedData' становится пустым после цикла' for'? Appart из того, что файл, который я получаю после загрузки, кажется прекрасным (только заголовки). Вот [скрипка] (http://jsfiddle.net/4mZ39/). –

+0

Для меня файл имеет только заголовки, и все данные поступают в одну ячейку Excel вместо правильного распределения по таблице ... – tbogatchev

+0

Что вы пытаетесь выполнить с помощью 'for'loop? –

ответ

2

Я был в состоянии понять и воспроизвести поведение, которое вы описываете. Проблема с кодом, который генерирует URI, заключается в том, что он не кодирует содержимое str.

Вот линия, что я изменился, обратите внимание на упаковку переменной str с встроенной функцией encodeURI():

var uri = 'data:application/csv;charset=UTF-8,' + encodeURI(str); 

Вот скрипка, который генерирует CSV файл с новой строкой включено: DEMO. Я упростил цикл for, так как orderedData оказался пустым после его выполнения.

Обратите внимание, что в Excel сгенерированы файлы «CSV», на самом деле не используются запятые, а точки с запятой. Поэтому, если вы хотите использовать файл в Excel, замените , на ;. Вот файл, совместимый с Excel: DEMO.

+0

Благодарим за терпение. Я по-прежнему получаю результаты только в одной ячейке таблицы (2 ячейки в версии Excel). Есть ли способ получить все данные, правильно распределенные через ячейки таблицы? – tbogatchev

+0

Каким образом выглядит содержание файла, который вы загружаете? –

+0

Это просто заголовок и четыре массива двойников. В итоге я получил свое решение для работы с FileSaver.js. Я опубликую то, что я сделал в редактировании. – tbogatchev

-1

Easy way to turn Javascript array into comma-separated list?

, кажется, хороший поток на этом, и относительно простой реализации функциональности вы хотите.

Есть ли причина, по которой это не сработало для вас?

EDIT:

Похоже, вы заинтересованы в HTML5 FileSaver, хотя я не знаю, насколько широко это поддерживается, казалось бы выполнить свою функциональность.

это: http://updates.html5rocks.com/2011/08/Saving-generated-files-on-the-client-side

и это: How can i generate a file and offer it for download in plain javascript?

+1

У меня есть список, это не проблема. Я хотел бы загрузить список как файл CSV или Excel с приглашением загрузки. – tbogatchev