Экспорт в CSV в JQuery - PullRequest
       25

Экспорт в CSV в JQuery

45 голосов
/ 09 января 2011

Я динамически генерирую div, который выглядит следующим образом:

<div id='PrintDiv'>
        <table id="mainTable">
            <tr>
                <td>
                    Col1
                </td>
                <td>
                    Col2
                </td>
                <td>
                    Col3
                </td>
            </tr>
            <tr>
                <td>
                    Val1
                </td>
                <td>
                    Val2
                </td>
                <td>
                    Val3
                </td>
            </tr>
            <tr>
                <td>
                    Val11
                </td>
                <td>
                    Val22
                </td>
                <td>
                    Val33
                </td>
            </tr>
            <tr>
                <td>
                    Val111
                </td>
                <td>
                    Val222
                </td>
                <td>
                    Val333
                </td>
            </tr>
        </table>
    </div>

И на странице также много элементов.Теперь, как я могу получить CSV-файл, как это:

Col1,Col2,Col3
Val1,Val2,Val3
Val11,Val22,Val33
Val111,Val222,Val333

с использованием jQuery?

нужен также файл dailog сохранить окно, как это:

alt text

Спасибо.

Ответы [ 7 ]

96 голосов
/ 28 сентября 2011

Это можно сделать только на стороне клиента, в браузере, который принимает URI данных :

data:application/csv;charset=utf-8,content_encoded_as_url

В вашем примере URI данных должен быть:

data:application/csv;charset=utf-8,Col1%2CCol2%2CCol3%0AVal1%2CVal2%2CVal3%0AVal11%2CVal22%2CVal33%0AVal111%2CVal222%2CVal333

Вы можете вызвать этот URI:

  • , используя window.open
  • или установив window.location
  • или с помощью якоря
  • добавив атрибут загрузки, он будет работать в Chrome, все равно придется тестировать в IE.

Чтобы проверить, просто скопируйте URI выше и вставьте в адресную строку браузера.Или проверьте привязку ниже на странице HTML:

<a download="somedata.csv" href="data:application/csv;charset=utf-8,Col1%2CCol2%2CCol3%0AVal1%2CVal2%2CVal3%0AVal11%2CVal22%2CVal33%0AVal111%2CVal222%2CVal333">Example</a>

Чтобы создать контент, получая значения из таблицы, вы можете использовать table2CSV и выполнить:

var data = $table.table2CSV({delivery:'value'});

$('<a></a>')
    .attr('id','downloadFile')
    .attr('href','data:text/csv;charset=utf8,' + encodeURIComponent(data))
    .attr('download','filename.csv')
    .appendTo('body');

$('#downloadFile').ready(function() {
    $('#downloadFile').get(0).click();
});

Большинство, если не все, версии IE не поддерживают навигацию к каналу передачи данных, поэтому должен быть осуществлен взлом, часто с iframe.Используя iFrame в сочетании с document.execCommand('SaveAs'..), вы можете получить аналогичное поведение в большинстве используемых в настоящее время версий IE.

25 голосов
/ 11 декабря 2012

Это моя реализация (основана на: https://gist.github.com/3782074):

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

<table class="download">...</table>
<a href="" download="name.csv">DOWNLOAD CSV</a>

JS:

$("a[download]").click(function(){
    $("table.download").toCSV(this);    
});

Код

jQuery.fn.toCSV = function(link) {
  var $link = $(link);
  var data = $(this).first(); //Only one table
  var csvData = [];
  var tmpArr = [];
  var tmpStr = '';
  data.find("tr").each(function() {
      if($(this).find("th").length) {
          $(this).find("th").each(function() {
            tmpStr = $(this).text().replace(/"/g, '""');
            tmpArr.push('"' + tmpStr + '"');
          });
          csvData.push(tmpArr);
      } else {
          tmpArr = [];
             $(this).find("td").each(function() {
                  if($(this).text().match(/^-{0,1}\d*\.{0,1}\d+$/)) {
                      tmpArr.push(parseFloat($(this).text()));
                  } else {
                      tmpStr = $(this).text().replace(/"/g, '""');
                      tmpArr.push('"' + tmpStr + '"');
                  }
             });
          csvData.push(tmpArr.join(','));
      }
  });
  var output = csvData.join('\n');
  var uri = 'data:application/csv;charset=UTF-8,' + encodeURIComponent(output);
  $link.attr("href", uri);
}

Примечания :

  • Использует теги th для заголовков. Если их нет, их нет добавлено.
  • Этот код распознает числа в формате: - ####. ## (вам потребуется изменить код для принятия других форматов, например, с использованием запятых).

UPDATE

Моя предыдущая реализация работала нормально, но она не установила имя файла csv. Код был изменен для использования имени файла, но для него требуется элемент . Кажется, что вы не можете динамически генерировать элемент и запускать событие «click» (возможно, из соображений безопасности?).

DEMO

http://jsfiddle.net/nLj74t0f/

(К сожалению, jsfiddle не может сгенерировать файл и вместо этого выдает ошибку: «пожалуйста, используйте запрос POST», не позволяйте этой ошибке помешать вам протестировать этот код в вашем приложении).

6 голосов
/ 08 августа 2013

Недавно я разместил бесплатную библиотеку программного обеспечения для этого: "html5csv.js" - GitHub

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

После загрузки файла "html5csv.js" проблема сканирования таблицы и создания CSV состоит из одной строки:

CSV.begin('#PrintDiv').download('MyData.csv').go();

Вот демонстрация JSFiddle вашего примера с этим кодом .

Внутренне, для Firefox / Chrome это решение, ориентированное на URL данных, аналогично тому, что предлагали @italo, @lepe и @adeneo (по другому вопросу). Для IE

Вызов CSV.begin() настраивает систему для чтения данных во внутренний массив. Эта выборка тогда происходит. Затем .download() создает внутреннюю ссылку на URL-адрес данных и щелкает по ней с помощью щелчка по ссылке. Это передает файл конечному пользователю.

Согласно caniuse IE10 не поддерживает <a download=...>. Так что для IE моя библиотека вызывает navigator.msSaveBlob() внутренне, как , предложенное @Manu Sharma

5 голосов
/ 11 января 2011

Вот две РАБОТЫ к проблеме запуска загрузок только с клиента.В более поздних браузерах вы должны смотреть на «blob»


1.Перетащите таблицу

Знаете ли вы, что вы можете просто перетащить свой стол в Excel?

Вот как выбрать таблицу, которую нужно либо вырезать, либо пройти, либо перетащить

Выберите полную таблицу с помощью Javascript (для копирования в буфер обмена)


2.создайте всплывающую страницу из вашего div

Хотя не создаст диалоговое окно сохранения , если всплывающее окно , получающееся в результате , сохраняется с расширением .csv, Excel будет корректно обработан.

Строка может быть
w.document.write("row1.1\trow1.2\trow1.3\nrow2.1\trow2.2\trow2.3");
, например, разделенная табуляцией с переводом строки для строк.

Существуют плагины, которые создадут для вас строку, например http://plugins.jquery.com/project/table2csv

var w = window.open('','csvWindow'); // popup, may be blocked though
// the following line does not actually do anything interesting with the 
// parameter given in current browsers, but really should have. 
// Maybe in some browser it will. It does not hurt anyway to give the mime type
w.document.open("text/csv");
w.document.write(csvstring); // the csv string from for example a jquery plugin
w.document.close();

ОТКАЗ ОТ ОТВЕТСТВЕННОСТИ : Это обходные пути, которые не полностьюответить на вопрос, который в настоящее время имеет ответ для большинства браузеров: не возможно только на клиенте

4 голосов
/ 11 января 2011

Используя только jQuery, вы не можете избежать вызова на сервере.

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

Чтобы получить правильный CSV, вам просто нужно убрать все ненужные теги и поставить «,» между данными.

1 голос
/ 09 января 2011

Вы не можете избежать вызова сервера здесь, JavaScript просто не может (из соображений безопасности) сохранить файл в файловой системе пользователя. Вам нужно будет отправить свои данные на сервер и it отправить .csv в виде ссылки или вложения напрямую.

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

0 голосов
/ 10 июня 2015

Просто попробуйте следующее кодирование ... очень просто создать CSV со значениями таблиц HTML. Нет проблем с браузером

<!DOCTYPE html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>        
        <script src="http://www.csvscript.com/dev/html5csv.js"></script>
<script>
$(document).ready(function() {

 $('table').each(function() {
    var $table = $(this);

    var $button = $("<button type='button'>");
    $button.text("Export to CSV");
    $button.insertAfter($table);

    $button.click(function() {     
         CSV.begin('table').download('Export.csv').go();
    });
  });  
})

</script>
    </head>
<body>
<div id='PrintDiv'>
<table style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>      
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>        
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>        
    <td>80</td>
  </tr>
</table>
</div>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...