2009-05-28 3 views
30

jQuery 테이블에서 CSV 플러그인을 사용하고 있습니다. 브라우저에 CSV 파일을 다운로드하도록 팝업을 변경했습니다. jQuery 테이블에서 CSV 내보내기

그것은이었다

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

그것은 대부분의 작품 : 나는 그것을 변경했습니다

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

. 이상한 파일 이름 (예 : 14YuskG_.csv.part)이 만들어지기 때문에 스프레드 시트 소프트웨어를 찾고 파일 이름을 직접 만들어야합니다.

개선 방법에 대한 제안 사항이 있으십니까?

+4

jQuery를 테이블 : 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']; 

?> 

업데이트 : 더 많은 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

귀하의 질의 응답에 감사 드리며, 저에게 잘 맞았습니다.

변경 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; 
} 

.ASHX에 export.php에서의 변화를 주목 여기에 내가 사용하고 솔루션의 (거의 동일) ASP.Net 버전입니다 제네릭 처리기.

일반 처리기 코드 :

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으로 시도하고 브라우저에서 실행 중인지 알려주십시오. CSV 플러그인에

$('<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(); 
}); 
관련 문제