2009-05-28 28 views
30

Tôi đang sử dụng Bảng jQuery vào Plugin CSV. Tôi đã thay đổi cửa sổ bật lên để cho trình duyệt tải xuống tệp CSV.Bảng jQuery để xuất CSV

Đó là:

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

Tôi đã thay đổi nó để:

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

Nó hoạt động, đối với hầu hết các phần. Nó vẫn yêu cầu bạn tìm phần mềm bảng tính của bạn, và tạo tên tập tin của riêng bạn ... bởi vì nó tạo ra một tên tập tin lạ (Ví dụ: 14YuskG_.csv.part).

Bất kỳ đề xuất nào về cách cải thiện điều này?

+4

jQuery Bảng để Plugin CSV: http://www.kunalbabre.com/projects/table2CSV.php, nhờ Kunal Babre – timborden

Trả lời

20

Tìm thấy một giải pháp mà làm việc (với sự giúp đỡ từ http://www.topsemtips.com/2008/11/save-html-table-to-excel-using-jquery/):

Tôi đã thay đổi chức năng để:

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

Và tạo ra các tập tin 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']; 

?> 

Cập nhật : Phiên bản thân thiện với IE7 khác:

<?php 

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

    print $_POST['exportdata']; 

?> 
+0

1 Làm việc cho tôi. Mặc dù, tôi đã sử dụng $ ("body"). Append ([enter-form-here]); – Eddie

+5

Mặc dù lưu ý rằng điều này đòi hỏi một máy chủ khứ hồi của tất cả các dữ liệu. Nếu bạn có rất nhiều dữ liệu trên máy khách, điều này không phải là tối ưu. – desau

+5

Đây rõ ràng là thực hành không tốt. Nếu bạn đang sử dụng dữ liệu phía máy khách không rõ ràng, ít nhất bạn nên tránh liên quan đến máy chủ trong đó. Vì vậy, hoặc là tạo ra dữ liệu từ máy chủ và echo nó hoặc chỉ đơn giản là làm điều đó với js trực tiếp. –

6

Tôi không khuyên bạn nên "tải xuống" dữ liệu CSV theo cách này. IE7 chỉ cho phép lên đến 2000 ký tự trong thanh địa chỉ, do đó rất có thể là tệp của bạn bị cắt ngắn.

7

cảm ơn câu hỏi và câu trả lời của bạn, đã làm việc tốt cho tôi. Dưới đây là (gần như giống hệt nhau) ASP.Net phiên bản của giải pháp của bạn mà tôi đang sử dụng:

Thay đổi table2CSV.js sổ popup chức năng để:

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

Ghi nhận sự thay đổi từ export.php đến một ashx xử lý chung.

Mã handler chung:

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

Không tương thích với tất cả các trình duyệt, nhưng không có phía máy chủ cần thiết! Hãy thử mã bên dưới using JSFiddle và cho chúng tôi biết nếu mã đang chạy trong trình duyệt của bạn.

$('<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(); 
}); 
Các vấn đề liên quan