2009-05-28 7 views
30

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

Это было:

function popup(data) { 
    var generator = window.open('', 'csv', 'height=400,width=600'); 
    generator.document.write('<html><head><title>CSV</title>'); 
    generator.document.write('</head><body >'); 
    generator.document.write('<textArea cols=70 rows=15 wrap="off" >'); 
    generator.document.write(data); 
    generator.document.write('</textArea>'); 
    generator.document.write('</body></html>'); 
    generator.document.close(); 
    return true; 
} 

Я изменил его:

function popup(data) { 
    window.location='data:text/csv;charset=utf8,' + encodeURIComponent(data); 
    return true; 
} 

Он работает, по большей части. Он по-прежнему требует, чтобы вы нашли свое программное обеспечение для работы с электронными таблицами и создали свое собственное имя файла ... потому что оно создает странное имя файла (пример: 14YuskG_.csv.part).

Любые предложения по улучшению этого?

+4

JQuery таблицы в CSV Plugin: http://www.kunalbabre.com/projects/table2CSV.php, благодаря Кунал Babre – timborden

ответ

20

Найдено решение, которое работает (с помощью от http://www.topsemtips.com/2008/11/save-html-table-to-excel-using-jquery/):

Я изменил функцию:

function popup(data) { 
    $("#main div.inner").append('<form id="exportform" action="export.php" method="post" target="_blank"><input type="hidden" id="exportdata" name="exportdata" /></form>'); 
    $("#exportdata").val(data); 
    $("#exportform").submit().remove(); 
    return true; 
} 

И создал файл export.php:

<?php 

    header("Content-type: application/vnd.ms-excel; name='excel'"); 
    header("Content-Disposition: filename=export.csv"); 
    header("Pragma: no-cache"); 
    header("Expires: 0"); 

    print $_REQUEST['exportdata']; 

?> 

Update : Дополнительная версия IE7:

<?php 

    header('Content-Type: application/force-download'); 
    header('Content-disposition: attachment; filename=filename.csv'); 

    print $_POST['exportdata']; 

?> 
+0

+1 Работал для меня. Хотя, в итоге я использовал $ («body»). Append ([enter-form-here]); – Eddie

+5

Хотя обратите внимание, что для этого требуется серверное перемещение всех данных. Если у вас много данных на клиенте, это не оптимально. – desau

+5

Это явно плохая практика. Если вы собираетесь использовать нечистые данные на стороне клиента, вы должны, по крайней мере, избегать использования этого сервера. Таким образом, либо создавайте данные с сервера, либо эхо-сигналы, либо просто делайте это с помощью js напрямую. –

6

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

7

спасибо за ваш вопрос и ответ, хорошо сработал для меня. Вот (почти идентична) ASP.Net версия вашего решения, что я использую:

Изменить table2CSV.js Всплывающей функции:

function popup(data) { 
     $("body").append('<form id="exportform" action="CsvExport.ashx" method="post" target="_blank"><input type="hidden" id="exportdata" name="exportdata" /></form>'); 
     $("#exportdata").val(data); 
     $("#exportform").submit().remove(); 
     return true; 
} 

отмечая переход от export.php к .ashx общий обработчик.

Общий код обработчика:

public void ProcessRequest (HttpContext context) { 
    context.Response.ContentType = "application/force-download"; 
    context.Response.AddHeader("content-disposition", "filename=filename.csv"); 

    context.Response.Write(context.Request.Form["exportdata"]); 
} 
1

Не совместим со всеми браузерами, но не на стороне сервера не требуется! Попробуйте код ниже using JSFiddle и сообщите нам, если он запущен в вашем браузере.

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