जावास्क्रिप्ट: पृष्ठ

सेटिंग में सामग्री से फ़ाइल करने के लिए डेटा डाउनलोड करें निम्न है: मेरे पास एक ऐसा होमपेज है जहां मैं एक आरेख प्रदर्शित करता हूं जिसे पृष्ठ के भीतर सेमा सेपरेटेड मानों का उपयोग करके बनाया गया है। मैं उपयोगकर्ताओं को फिर से सर्वर से संपर्क किए बिना सीवीएस फ़ाइल के रूप में डेटा डाउनलोड करने की संभावना देना चाहता हूं। (जैसा कि डेटा पहले से मौजूद है) क्या यह किसी भी तरह से संभव है? मैं एक शुद्ध जावास्क्रिप्ट समाधान पसंद करेंगे।जावास्क्रिप्ट: पृष्ठ

अब तक मैंने पाया है: http://pixelgraphics.us/downloadify/test.html लेकिन इसमें फ्लैश शामिल है जिसे मैं टालना चाहता हूं।

मुझे कल्पना नहीं है कि इस सवाल से पहले नहीं पूछा गया है। मुझे दोहरी पोस्ट करने के लिए खेद है, लेकिन ऐसा लगता है कि मैंने गलत कीवर्ड या कुछ उपयोग किया है - मुझे इन मंचों में कोई समाधान नहीं मिला है।

स्रोत

2010-11-15 Simon

अद्यतन:

समय निश्चित रूप से चीजों को बदलता है ;-) जब मैं पहली बार इस सवाल IE8 नवीनतम IE ब्राउज़र उपलब्ध था (नवंबर 2010) के जवाब दिए और इस तरह वहां के बिना यह पूरा करने के लिए कोई पार ब्राउज़र तरीका था सर्वर के लिए एक राउंड ट्रिप, या फ्लैश की आवश्यकता वाले टूल का उपयोग करना।

@Zectburno's answer आपको अब जो चाहिए उसे प्राप्त करेगा, हालांकि ऐतिहासिक संदर्भ के बारे में पता होना चाहिए कि कौन सा आईई ब्राउज़र किस सुविधा का समर्थन करता है।

btoa() IE8 और IE9
ब्लॉब में अपरिभाषित है IE10 +

ब्राउज़र आपको समर्थन करने की आवश्यकता में परीक्षण करने के लिए सुनिश्चित करें उपलब्ध है। भले ही दूसरे उत्तर में ब्लॉब उदाहरण आईई 10 + में काम करना चाहिए, यह मेरे लिए काम नहीं करता है बस लिंक पर क्लिक करें (ब्राउज़र कुछ भी नहीं करता है, कोई त्रुटि नहीं) ... केवल अगर मैं दायाँ क्लिक करता हूं और "file.csv" के रूप में लक्ष्य को सहेजता हूं तो फ़ाइल पर नेविगेट करें और डबल-क्लिक करें, क्या मैं फ़ाइल खोल सकता हूं।

मुझे नहीं लगता कि वहाँ एक विकल्प यह के लिए उपलब्ध है:

Test both approaches (btoa/Blob) in this JSFiddle.

<!doctype html> 
<html> 
<head> 
</head> 
<body> 
    <a id="a" target="_blank">Download CSV (via btoa)</a> 
    <script> 
    var csv = "a,b,c\n1,2,3\n"; 
    var a = document.getElementById("a"); 
    a.href = "data:text/csv;base64," + btoa(csv); 
    </script> 
    <hr/> 
    <a id="a2" download="Download.csv" type="text/csv">Download CSV (via Blob)</a> 
    <script> 
    var csv = "a,b,c\n1,2,3\n"; 
    var data = new Blob([csv]); 
    var a2 = document.getElementById("a2"); 
    a2.href = URL.createObjectURL(data); 
    </script> 
</body> 
</html>

मूल उत्तर (यहाँ कोड है)।

मैं बस आपके कोड को समायोजित करूंगा जैसे कि उपयोगकर्ता के सिस्टम पर फ्लैश 10+ (93% saturation as of September 2009) पता चला है, डाउनलोडिफ़ विकल्प प्रदान करें, अन्यथा सर्वर-साइड अनुरोध पर फ़ॉलबैक करें।

स्रोत

2010-11-15 13:57:54 scunliffe

लागू किया जा सकता है बनाता है dowloadify जावास्क्रिप्ट से? मेरे डिजाइन को फिट करने के लिए एक फ्लैश बटन बनाना मुश्किल होगा। –

@ TomášZato हाँ इसे जावास्क्रिप्ट द्वारा बुलाया जा सकता है: https://github.com/dcneiner/Downloadify – scunliffe

कोई नहीं देखता कि यह मेरे प्रश्न का उत्तर कैसे है। मैंने "दस्तावेज़ीकरण" पढ़ा है, हालांकि मेरा सवाल यह था कि डाउनलोड जावास्क्रिप्ट से ट्रिगर किया जा सकता है। दुर्भाग्य से [असंभव] (https://github.com/dcneiner/Downloadify/issues/20) - डाउनलोड करें बटन क्लिक किया जाना चाहिए। –

जहां तक मुझे पता है, यह संभव नहीं है: यही कारण है कि डाउनलोडिफ़ाई बनाई गई थी।

आप CSV डेटा वाले data:URL से लिंक करने का प्रयास कर सकते हैं, लेकिन क्रॉस-ब्राउज़र समस्या होगी।

स्रोत

2010-11-15 13:50:23

function export(exportAs) { 
    var csvText = tableRowsToCSV(this.headTable.rows); 
    csvText += tableRowsToCSV(this.bodyTable.rows); 
    //open the iframe doc for writing 
    var expIFrame; 
    if (strBrowser == "MSIE") expIFrame = document.exportiframe; 
    else expIFrame = window.framesexportiframe; 
    var doc = expIFrame.document; 
    doc.open('text/plain', 'replace'); 
    doc.charset = "utf-8"; 
    doc.write(csvText); 
    doc.close(); 
    var fileName = exportAs + ".txt"; 
    doc.execCommand("SaveAs", null, fileName); 
} 

function tableRowsToCSV(theRows) { 
    var csv = ""; 
    var csvRow = ""; 
    var theCells; 
    var cellData = ""; 
    for (var r = 0; r < theRows.length; r++) { 
     theCells = theRows.item(r).cells; 
     for (var c = 0; c < theCells.length; c++) { 
      cellData = ""; 
      cellData = theCells.item(c).innerText; 
      if (cellData.indexOf(",") != -1) cellData = "'" + cellData + "'"; 
      if (cellData != "") csvRow += "," + cellData; 
     } 
     if (csvRow != "") csvRow = csvRow.substring(1, csvRow.length); 
     csv += csvRow + "\n"; 
     csvRow = ""; 
    } 
    return csv; 
}

मैं कहीं और इस कोड को पाया, here, पहले से

स्रोत

2010-11-15 14:39:42 Blowsie

expIFrame = window.framesexportiframe; // खिड़की में कोई framesexportiframe संपत्ति नहीं है! –

सफारी 5, फ़ायरफ़ॉक्स 6, ओपेरा 12, क्रोम 26 पर परीक्षण किया गया।

<a id='a'>Download CSV</a> 
<script> 
    var csv = 'a,b,c\n1,2,3\n'; 
    var a = document.getElementById('a'); 
    a.href='data:text/csv;base64,' + btoa(csv); 
</script>

एचटीएमएल 5

<a id='a' download='Download.csv' type='text/csv'>Download CSV</a> 
<script> 
    var csv = 'a,b,c\n1,2,3\n'; 
    var data = new Blob([csv]); 
    var a = document.getElementById('a'); 
    a.href = URL.createObjectURL(data); 
</script>

स्रोत

2011-09-16 00:53:42 Zectbumo

यह मैं उपयोग करता हूं, हालांकि मोज़िला फ़ायरफ़ॉक्स में, यह बड़ी फ़ाइलों (> 6 एमबी) के लिए भयानक laggs का कारण बनता है। –

यदि यूआरएल बहुत बड़ा है, तो डाउनलोड क्रोम में बस असफल हो जाएगा। –

यह सुनकर सहायक होगा कि आपका मतलब "बहुत बड़ा" है। आप कितने एमबी डाउनलोड करने की कोशिश कर रहे हैं? आपको HTML 5 विधि का उपयोग करने की आवश्यकता हो सकती है क्योंकि पुरानी विधि केवल ब्राउज़र के आधार पर ~ 4kB को संभाल सकती है। – Zectbumo

अपने उपयोगकर्ताओं डेट ब्राउज़र करने के लिए है, तो नए ब्लॉब ऑब्जेक्ट आप मदद कर सकता है।

उदाहरण के आधार पर यहां https://developer.mozilla.org/en/docs/DOM/Blob ("ब्लॉब निर्माता उदाहरण उपयोग"), आप निम्नलिखित की तरह कुछ कर सकते हैं:

var typedArray = "123,abc,456"; //your csv as a string 
var blob = new Blob([typedArray], {type: "text/csv"}); 
var url = URL.createObjectURL(blob); 
var a = document.querySelector("#linktocsv"); // the id of the <a> element where you will render the download link 
a.href = url; 
a.download = "file.csv";

स्रोत

2013-04-25 11:03:04

HTML:

<a href="javascript:onDownload();">Download</a>

जावास्क्रिप्ट:

function onDownload() { 
    document.location = 'data:Application/octet-stream,' + 
         encodeURIComponent(dataToDownload); 
}

How to Download Data as a File From JavaScript

से लिया गया

स्रोत

2013-06-19 05:42:12 Sneg

यह एक साधारण समाधान है, लेकिन जैसा कि मूल स्रोत पर बताया गया है, यह अभी तक डाउनलोड फ़ाइल को नाम देने का एक तरीका नहीं है। अगर कोई इस समस्या का समाधान जानता है, तो इसकी सराहना की जाएगी। –

सरल समाधान:

function download(content, filename, contentType) 
{ 
    if(!contentType) contentType = 'application/octet-stream'; 
     var a = document.createElement('a'); 
     var blob = new Blob([content], {'type':contentType}); 
     a.href = window.URL.createObjectURL(blob); 
     a.download = filename; 
     a.click(); 
}

प्रयोग

download("csv_data_here", "filename.csv", "text/csv");

स्रोत

2013-10-07 17:06:19

''एप्लिकेशन/ऑक्टेट-स्ट्रीम' 'मेरे लिए कुंजी थी: +1: –

सबसे व्यापक समाधान मैं भर में FileSaver.js उपयोग कर रहा है, फ़ॉलबैक साथ आप के लिए कई संभावित पार ब्राउज़र मुद्दों से निपटने चल चुके हैं।

यह अन्य पोस्टर के रूप में Blob वस्तु का लाभ लेता है किया है, और निर्माता ऐसी स्थिति में जब Blob.js polyfill आप ब्राउज़र संस्करणों का समर्थन करने की आवश्यकता है का समर्थन नहीं करते कि Blob

स्रोत

2014-10-01 01:38:15

जावास्क्रिप्ट: पृष्ठ

उत्तर

संबंधित मुद्दे