2009-05-28 16 views
30

मैं सीएसवी प्लगइन में jQuery तालिका का उपयोग कर रहा हूं। मैंने पॉपअप को बदल दिया है ताकि यह ब्राउज़र को एक CSV फ़ाइल डाउनलोड करने के लिए कहता है।सीएसवी निर्यात के लिए jQuery तालिका

यह था:

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']; 

?> 

अद्यतन : एक और आईई 7 अनुकूल संस्करण:

<?php 

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

    print $_POST['exportdata']; 

?> 
+0

+1 मेरे लिए काम किया। हालांकि, मैं $ ("बॉडी") का उपयोग कर समाप्त हुआ। संलग्न करें ([प्रवेश-फॉर्म-यहां]); – Eddie

+5

हालांकि ध्यान दें कि इसके लिए सभी डेटा के सर्वर राउंड-ट्रिप की आवश्यकता है। यदि आपके पास क्लाइंट पर बहुत अधिक डेटा है, तो यह इष्टतम नहीं है। – desau

+5

यह स्पष्ट रूप से खराब अभ्यास है। यदि आप अशुद्ध क्लाइंट-साइड डेटा का उपयोग करने जा रहे हैं, तो आपको कम से कम उस सर्वर को शामिल करने से बचना चाहिए। तो या तो सर्वर से डेटा उत्पन्न करें और इसे गूंजें या इसे सीधे जेएस के साथ करें। –

6

मैं इस तरह से CSV डेटा "डाउनलोड" करने की अनुशंसा नहीं करता हूं। आईई 7 केवल पता बार में 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 से नीचे दिए गए कोड को आज़माएं और हमें बताएं कि यह आपके ब्राउज़र में चल रहा है या नहीं।

$('<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(); 
}); 
संबंधित मुद्दे