किसी फ़ाइल को बनाने और सहेजने के लिए HTML5 / JavaScript का उपयोग करना

Question

मैं हाल ही में WebGL के साथ काम कर रहा हूं, और एक कोलाडा रीडर काम कर रहा हूं। समस्या यह बहुत धीमी है (कोलाडा एक बहुत ही क्रिया प्रारूप है), इसलिए मैं प्रारूप (शायद JSON) का उपयोग करने के लिए फ़ाइलों को एक आसान में परिवर्तित करने जा रहा हूं। मेरे पास पहले से ही फ़ाइल को जावास्क्रिप्ट में पार्स करने के लिए कोड है, इसलिए मैं अपने निर्यातक के रूप में भी इसका उपयोग कर सकता हूं! समस्या सहेज रही है।

अब, मुझे पता है कि मैं फ़ाइल को पार्स कर सकता हूं, सर्वर को परिणाम भेज सकता हूं, और ब्राउज़र को डाउनलोड के रूप में सर्वर से फाइल वापस करने का अनुरोध करता हूं। लेकिन वास्तव में सर्वर का इस विशेष प्रक्रिया से कोई लेना-देना नहीं है, इसलिए इसे शामिल क्यों करें? मेरे पास पहले से ही मेमोरी में वांछित फ़ाइल की सामग्री है। क्या कोई ऐसा तरीका है जिसे मैं शुद्ध जावास्क्रिप्ट का उपयोग करके उपयोगकर्ता को डाउनलोड के साथ प्रस्तुत कर सकता हूं? (मुझे संदेह है, लेकिन साथ ही पूछ सकते हैं ...)

और स्पष्ट होना: मैं उपयोगकर्ताओं के ज्ञान के बिना फाइल सिस्टम तक पहुंचने की कोशिश नहीं कर रहा हूं! उपयोगकर्ता एक फ़ाइल प्रदान करेगा (संभवतः ड्रैग एंड ड्रॉप के माध्यम से), स्क्रिप्ट फ़ाइल को मेमोरी में बदल देगी, और उपयोगकर्ता को परिणाम डाउनलोड करने के लिए प्रेरित किया जाएगा। जहां तक ​​ब्राउज़र का संबंध है, सभी को "सुरक्षित" गतिविधियां होनी चाहिए।

[संपादित करें]: मैंने इसका उल्टा उल्लेख नहीं किया, इसलिए "फ्लैश" का उत्तर देने वाले पोस्टर पर्याप्त रूप से मान्य हैं, लेकिन जो मैं कर रहा हूं उसका एक हिस्सा यह है कि शुद्ध एचटीएमएल 5 के साथ क्या किया जा सकता है, इसे उजागर करने का प्रयास किया जाता है ... इसलिए फ्लैश है मेरे मामले में सही है। (हालांकि यह "वास्तविक" वेब ऐप करने वाले किसी व्यक्ति के लिए पूरी तरह से मान्य उत्तर है।) यह मामला ऐसा लगता है जैसे मैं भाग्य से बाहर हूं जब तक कि मैं सर्वर को शामिल नहीं करना चाहता। फिर भी धन्यवाद!

Comments

आप स्वीकार किए गए उत्तर को बदलने पर विचार कर सकते हैं, अब विशुद्ध रूप से HTML तरीका लगता है

— Pekka

Answer 1

ठीक है, एक डेटा बना रहा है: URI निश्चित रूप से मेरे लिए ट्रिक करता है, मैथ्यू और डेन्केस्टर का धन्यवाद जो उस विकल्प को इंगित करता है! यहाँ मूल रूप से है कि मैं यह कैसे करूँ:

1) "कंटेंट" नामक एक स्ट्रिंग में सभी सामग्री प्राप्त करें (उदाहरण के लिए इसे शुरू में बनाकर या पहले से निर्मित पृष्ठ के टैग के आंतरिक HTML को पढ़कर)।

2) डेटा का निर्माण करें URI:

uriContent = "data:application/octet-stream," + encodeURIComponent(content);

ब्राउज़र प्रकार आदि के आधार पर लंबाई सीमाएं होंगी, लेकिन जैसे फ़ायरफ़ॉक्स 3.6.12 कम से कम 256k तक काम करता है। बेस ६४ में एनकोडरिकम्पोनेंट का उपयोग करने के बजाय एन्कोडिंग चीजों को अधिक कुशल बना सकता है, लेकिन मेरे लिए यह ठीक था।

3) एक नई विंडो खोलें और इसे "रीडायरेक्ट" करें यह यूआरआई मेरे जावास्क्रिप्ट उत्पन्न पृष्ठ के डाउनलोड स्थान के लिए संकेत देता है:

newWindow = window.open(uriContent, 'neuesDokument');

बस।

Comments

यदि आप पॉपअप का उपयोग करने से बचना चाहते हैं, जो अवरुद्ध हो सकता है, तो आप location.hrefसामग्री को सेट कर सकते हैं । location.href = uriContent।

— एलेक्स टरपिन

हाय मैं यह कोशिश की, लेकिन यह फ़ाइल को .part फ़ाइल के रूप में डाउनलोड करता है। मैं फिलाटाइप कैसे सेट कर सकता हूं?

— सेदात बस्तर

@ SedatBaşar डेटा यूआरआई फ़ाइल नाम सेट करने का समर्थन नहीं करते हैं, आपको ब्राउज़र पर माइम प्रकार का उपयोग करके एक उपयुक्त एक्सटेंशन सेट करने पर भरोसा करना होगा। लेकिन यदि माइम प्रकार ब्राउज़र द्वारा प्रदान किया जा सकता है तो वह इसे डाउनलोड नहीं करेगा, लेकिन यह इसे प्रदर्शित करेगा। ऐसा करने के कुछ अन्य तरीके हैं, लेकिन IE <10 में न तो काम करते हैं।

— प्रातः

IE वास्तव में यूआरआई और फ़ायरफ़ॉक्स डेटा को सोप नहीं करता है और फ़ाइलों को यादृच्छिक नाम से सहेजता है।

— नाइलंड

मुझे लगता है कि हम इसे जरूरत से ज्यादा कठिन बना रहे हैं। इस पृष्ठ पर अपना JS कंसोल खोलें location.href = "data:application/octet-stream," + encodeURIComponent(jQuery('#answer-4551467 .post-text').first().text());और इसे डालें और यह एक फ़ाइल के लिए @ Nøk के उत्तर की सामग्री को बचाएगा। मेरे पास इसका परीक्षण करने के लिए IE नहीं है, लेकिन यह वेबकिट के लिए काम करता है।

— ब्रूनो ब्रोंस्की

Answer 2

HTML5 तैयार ब्राउज़रों के लिए सरल समाधान ...

function download(filename, text) {
    var pom = document.createElement('a');
    pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
    pom.setAttribute('download', filename);

    if (document.createEvent) {
        var event = document.createEvent('MouseEvents');
        event.initEvent('click', true, true);
        pom.dispatchEvent(event);
    }
    else {
        pom.click();
    }
}

प्रयोग

download('test.txt', 'Hello world!');

Comments

यदि आप स्रोत यूआरएल को जानते हैं कि आप इसे डाउनलोड करना चाहते हैं तो यह सबसे अच्छा उपाय है!

— साइडलॉसन

फ़ाइल-नाम सेट करने की क्षमता इसे विजेता बनाती है।

— ओमण

इस विधि ने क्रोम में काम किया जब तक कि नवीनतम अद्यतन जो मैंने कुछ दिनों पहले (35.0.1916.114 मीटर) प्राप्त किया था। अब यह आंशिक रूप से काम करता है कि फ़ाइल नाम और एक्सटेंशन अब काम नहीं करता (यह हमेशा फ़ाइल डाउनलोड का नाम देता है। चाहे जो भी पारित हो।)

— सेविन 7

मेरे पास क्रोम 42.0.2311.90 है, और यह मुझे अपेक्षित फ़ाइल नाम के साथ काम कर रहा है।

— सौरभ कुमार

यदि डेटा की मात्रा पर एक सीमा है जिसे शामिल किया जा सकता है?

— कास्पर ली

Answer 3

HTML5 ने एक window.saveAs(blob, filename)विधि को परिभाषित किया । यह अभी किसी भी ब्राउज़र द्वारा समर्थित नहीं है। लेकिन FileSaver.js नामक एक संगतता पुस्तकालय है जो इस फ़ंक्शन को अधिकांश आधुनिक ब्राउज़रों (इंटरनेट एक्सप्लोरर 10+ सहित) में जोड़ता है। Internet Explorer 10 एक navigator.msSaveBlob(blob, filename)विधि ( MSDN ) का समर्थन करता है , जिसका उपयोग Internet Explorer समर्थन के लिए FileSaver.js में किया जाता है।

मैंने इस समस्या के बारे में अधिक विवरण के साथ एक ब्लॉग पोस्टिंग लिखी ।

Comments

पॉपअप को अवरुद्ध करने के बारे में क्या? इस लाइब्रेरी का व्यवहार @ Nøk के समाधान के समान है। फ़ायरफ़ॉक्स में सादा पाठ एक नए में खोला गया है। केवल Chrome इसे सहेजने का प्रयास करता है, लेकिन यह एक्सटेंशन बदल देता है (मुझे कोई एक्सटेंशन नहीं के साथ एक dotfile की आवश्यकता है)।

— ciembor

@ciembor (ऑब्जेक्ट url +) डाउनलोड विशेषता संस्करण (जो मैं क्रोम के साथ उपयोग करता हूं) आपको एक फ़ाइल नाम सेट करने देता है। यह क्रोम में मेरे लिए काम करता है।

— Panzi

@ciembor आहा और एक पॉपअप अवरुद्ध नहीं है अगर एक क्लिक सीधे इसका कारण बनता है।

— Panzi

FileSaver.js IE का समर्थन करता है

— एली ग्रे

W3C कहता है: इस दस्तावेज़ पर काम बंद कर दिया गया है और इसे लागू करने के लिए आधार के रूप में संदर्भित या उपयोग नहीं किया जाना चाहिए।

— वाईकिट कुंग

Answer 4

बड़ी फ़ाइलों को सहेज रहा है

लंबे डेटा URIs ब्राउज़रों में प्रदर्शन की समस्या दे सकते हैं। क्लाइंट-साइड जनरेट की गई फ़ाइलों को सहेजने का एक अन्य विकल्प, अपनी सामग्री को बूँद (या फ़ाइल) ऑब्जेक्ट में डालना और उपयोग करके एक डाउनलोड लिंक बनाना है।URL.createObjectURL(blob) । यह एक URL देता है जिसका उपयोग बूँद की सामग्री को पुनः प्राप्त करने के लिए किया जा सकता है। ब्लॉब को ब्राउज़र के अंदर तब तक स्टोर किया जाता है जब तक URL.revokeObjectURL()कि उसे URL पर नहीं कहा जाता है या इसे बनाने वाले डॉक्यूमेंट को बंद नहीं किया जाता है। अधिकांश वेब ब्राउज़रों के पास ऑब्जेक्ट URL के लिए समर्थन है , ओपेरा मिनी एकमात्र है जो उन्हें समर्थन नहीं करता है।

एक डाउनलोड मजबूर

यदि डेटा पाठ या छवि है, तो ब्राउज़र डिस्क को सहेजने के बजाय, फ़ाइल को खोल सकता है। फ़ाइल को लिंक पर क्लिक करने के कारण डाउनलोड करने के लिए, आप downloadविशेषता का उपयोग कर सकते हैं । हालांकि, सभी वेब ब्राउज़र में डाउनलोड विशेषता का समर्थन नहीं है । एक अन्य विकल्प का उपयोग करना हैapplication/octet-stream फ़ाइल के माइम-प्रकार के रूप में , लेकिन यह फ़ाइल को बाइनरी ब्लॉब के रूप में प्रस्तुत करने का कारण बनता है जो विशेष रूप से उपयोगकर्ता-अनफेयर है यदि आप फ़ाइल नाम निर्दिष्ट नहीं करते हैं या नहीं कर सकते हैं। ' ' इस रूप में सहेजें ... 'को खोलने के लिए टेक्स्ट लिंक पर पॉपअप खोलें ' HTML में पीडीएफ के लिए क्लिक करें 'पर क्लिक करें ।

एक फ़ाइल नाम निर्दिष्ट करना

यदि फ़ाइल निर्माता के साथ बूँद बनती है, तो आप फ़ाइल नाम भी सेट कर सकते हैं, लेकिन केवल कुछ वेब ब्राउज़र (क्रोम और फ़ायरफ़ॉक्स सहित) में फ़ाइल निर्माता के लिए समर्थन है । फ़ाइलनाम को downloadविशेषता के तर्क के रूप में भी निर्दिष्ट किया जा सकता है , लेकिन यह सुरक्षा के एक टन के अधीन है । इंटरनेट एक्सप्लोरर 10 और 11 एक फ़ाइलनाम निर्दिष्ट करने के लिए अपना स्वयं का तरीका, msSaveBlob प्रदान करता है ।

उदाहरण कोड

var file;
var data = [];
data.push("This is a test\n");
data.push("Of creating a file\n");
data.push("In a browser\n");
var properties = {type: 'text/plain'}; // Specify the file's mime-type.
try {
  // Specify the filename using the File constructor, but ...
  file = new File(data, "file.txt", properties);
} catch (e) {
  // ... fall back to the Blob constructor if that isn't supported.
  file = new Blob(data, properties);
}
var url = URL.createObjectURL(file);
document.getElementById('link').href = url;

<a id="link" target="_blank" download="file.txt">Download</a>

Comments

क्या मैं फ़ाइल को बचाने के लिए एक फ़ोल्डर (निर्देशिका) निर्दिष्ट करने के लिए एक संवाद (पॉपअप) दिखा सकता हूं?

— केल्विन

@ कैल्विन: मैंने एक डाउनलोड को मजबूर करने और फ़ाइल नाम प्रदान करने के तरीके को समझाने के लिए उत्तर अपडेट किया है। IE के लिए, मेरा मानना ​​है कि आप msSaveBlob"इस रूप में सहेजें" संवाद खोलने के लिए उपयोग कर सकते हैं । अन्य ब्राउज़रों के लिए, आपका एकमात्र विकल्प डाउनलोड लिंक के संदर्भ मेनू से मैन्युअल रूप से "इस रूप में सहेजें" चुनना है।

— bcmpinc

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

— bcmpinc

@bcmpinc stackoverflow.com/questions/36444507/…

— fdrv

यह एक बहुत ही उपयोगी और जानकारीपूर्ण उत्तर है। एक और बात जो मेरे जैसे लोगों की मदद कर सकती है: सेटिंग के बाद document.getElementById('link').href = url;, आपका कोड आगे बढ़ सकता है और तत्व की .click()विधि का उपयोग करके लिंक को आग लगा सकता है ।

— लार्स

Answer 5

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

Comments

ContentType का क्या प्रभाव है? इसका क्या उपयोग है?

— उरई

यह एक नवीनतम क्रोम में भी ठीक काम करता है, @ Mat Pokj Pokorný के उत्तर के विपरीत। धन्यवाद।

— अलेक्जेंडर एमेलकिन

यह मेरे लिए FF36 या IE11 पर काम नहीं करता है। यदि मैं Matěj Pokorný के रूप में सुझाए गए a.clickकोड का उपयोग document.createEvent()करता हूं, तो यह FF पर काम करता है, लेकिन IE में नहीं। मैंने क्रोम की कोशिश नहीं की है।

— पीटर हल

Answer 6

डौग Neiner के पर एक नजर डालें Downloadify जो एक फ्लैश आधारित जावास्क्रिप्ट इंटरफ़ेस यह करने के लिए है।

Downloadify एक छोटी सी जावास्क्रिप्ट + फ्लैश लाइब्रेरी है, जो सर्वर पर, बिना सर्वर इंटरेक्शन के, पीढ़ी और ब्राउजर में फाइलों को सहेजने में सक्षम बनाती है।

Comments

ज्यादातर लोगों के लिए, यह संभवतः उत्तर है कि उन्हें आवश्यकता होगी। इसलिए भले ही यह मेरी विशिष्ट आवश्यकताओं को पूरा नहीं करता (जैसा कि ऊपर बताया गया है) मैं इसे स्वीकृत उत्तर के रूप में चिह्नित कर रहा हूं।

— तोजी

@ तोजी आह, मैं देख रहा हूं। हो सकता है कि HTML 5बैनर के तहत फिर से पूछें और फिर से वाक्यांश और तदनुसार टैग करें? यह उन उपयोगकर्ताओं को आकर्षित करने की संभावना होगी जो उस विशिष्ट क्षेत्र के बारे में जानते हैं (अभी भी एक छोटी सी भीड़, अभी मुझे लगता है)। मुझे पूरा यकीन है कि यह HTML 5 में किया जा सकता है लेकिन मुझे नहीं पता कि कैसे।

— पेक्का

क्या downloadify.info Downloadify डोमेन खरीदा / स्थानांतरित किया गया है, और यदि ऐसा है तो एक नया स्थान है? वर्तमान साइट दिए गए उत्तर के लिए पूरी तरह से असंबंधित लगती है।

— क्रिस्टोइस हेवर्ड

यह प्रयोग HTML5 का जवाब नहीं है ... - शीर्षक वाला प्रश्न।

— Ixx

@ अच्छी तरह से निष्पक्ष होने के लिए, कि उत्तर पोस्ट किए जाने के बाद जोड़ा गया था। फिर भी, आप सही हैं। नीचे दिए गए उत्तर को स्वीकार किया जाना चाहिए

— पेका

Answer 7

सरल समाधान!

<a download="My-FileName.txt" href="data:application/octet-stream,HELLO-WORLDDDDDDDD">Click here</a>

सभी आधुनिक ब्राउज़रों में काम करता है।

Comments

नमस्ते, क्या आप जानते हैं कि window.open या किसी अन्य जावास्क्रिप्ट फ़ंक्शन का उपयोग करके "डाउनलोड" विशेषता व्यवहार को कैसे निर्दिष्ट किया जाए?

— 18

@yucer कोई डाउनलोड विशेषता नहीं है (या उस मामले के लिए कोई विशेषता) window.open()। यह अप्रासंगिक है। आप इस पद्धति का उपयोग कर सकते हैं और इस .click()पर बल दे सकते हैं, लेकिन समय को देखते रहें क्योंकि यदि आप .click()शरीर को तत्व संलग्न करने से पहले कॉल करते हैं तो फ़ायरफ़ॉक्स इसे पसंद नहीं करता है।

— ब्रैड

लेकिन दुख की बात है कि सभी स्पेस डिलीट हो जाते हैं। मेरे मामले में यह वास्तविक बुरा है क्योंकि मैं एसवीजी फ़ाइल के लिए स्रोत कोड डाउनलोड करना चाहता हूं।

— फ्रैंकनैप्स

रिक्त स्थान संरक्षित हैं यदि आप

— माइक रेडब्रिज

फायरफॉक्स में नाम नहीं चुन सकते, लेकिन क्रोम काम करता है

— भिक्खु सुभूति

Answer 8

आप एक डेटा यूआरआई उत्पन्न कर सकते हैं । हालाँकि, ब्राउज़र-विशिष्ट सीमाएँ हैं।

Comments

यह दिलचस्प है। मौका मिलने पर मैं इसे और देखूंगा। धन्यवाद!

— तोजी

@quantumpotato, वास्तव में URL उत्पन्न करना समझाने के लिए थोड़ा मुश्किल है। सभी नटखट किरकिरा RFC 2397 में है । आप परीक्षण के लिए इस तरह के उपकरणों का उपयोग कर सकते हैं । फिर, अपने वास्तविक ऐप के लिए, आप अपनी भाषा के लिए डेटा URI या आधार 64 लाइब्रेरी की खोज कर सकते हैं। यदि आपको यह नहीं मिलता है, तो बेझिझक एक अनुवर्ती प्रश्न पूछें। कुछ ब्राउज़र-विशिष्ट सीमाएँ विकिपीडिया लेख में दी गई हैं । उदाहरण के लिए, IE लंबाई और प्रकार (जैसे पाठ / html नहीं) को सीमित करता है।

— मैथ्यू फ्लैशेन

डेटा URL उत्पन्न करना उतना मुश्किल नहीं है: "data:text/plain;charset=UTF-8,"+encodeURIComponent(text)लेकिन हां, IE डेटा URL के आकार को एक अनुपयोगी राशि तक सीमित करता है और यह उन्हें window.open(...)या iframes (मुझे लगता है) जैसी चीजों के लिए समर्थन नहीं करता है ।

— पणजी

@panzi, यह उतना आसान नहीं है। एक बात के लिए, यह कोलडा या JSON के लिए सही MIME प्रकार नहीं है।

— मैथ्यू फ्लैशेन

बहुत गैर-जानकारीपूर्ण उत्तर। कृपया, यदि आप उनका उल्लेख करते हैं, तो ब्राउज़रों के लिए विनिर्देशों को जोड़ें।

— टोडुआ

Answer 9

मैंने FileSaver ( https://github.com/eligrey/FileSaver.js ) का उपयोग किया है और यह ठीक काम करता है।
उदाहरण के लिए, मैंने यह कार्य किसी पृष्ठ पर प्रदर्शित लॉग को निर्यात करने के लिए किया था।
आपको बूँद के अस्थिरता के लिए एक सरणी पास करनी होगी, इसलिए मैंने शायद इसे सही तरीके से नहीं लिखा था, लेकिन यह मेरे लिए काम करता है।
बस के मामले में, प्रतिस्थापन के साथ सावधान रहें: यह इस वैश्विक बनाने के लिए सिंटैक्स है, अन्यथा यह केवल पहले वाले को बदल देगा जो उसे मिलता है।

exportLogs : function(){
    var array = new Array();

    var str = $('#logs').html();
    array[0] = str.replace(/<br>/g, '\n\t');

    var blob = new Blob(array, {type: "text/plain;charset=utf-8"});
    saveAs(blob, "example.log");
}

Comments

FileSaver बढ़िया है, यहाँ IE-IE10 के लिए एक IE शिम है प्री -1010 प्रीवियस: (फ़ाइल नाम, फ़ाइल नाम, mimetype) {var w = window.open (); var doc = w.document; doc.open (mimetype, 'प्रतिस्थापित'); doc.charset = "utf-8"; (filecontent) doc.write; doc.close (); doc.execCommand ("सेवएज़", अशक्त, फ़ाइल नाम); }

— अकम

@ Aqm के शिम के बारे में चेतावनी: यह स्क्रिप्ट टैग निष्पादित करता है।

— GameFreak

इसके अलावा, यह डाल करने के लिए वांछनीय हो सकता है w.close();के बादexecCommand

— GameFreak

Answer 10

मुझे दो सरल दृष्टिकोण मिले जो मेरे लिए काम करते हैं। सबसे पहले, पहले से ही क्लिक किए गए aतत्व का उपयोग करना और डाउनलोड डेटा को इंजेक्ट करना। और दूसरा, aडाउनलोड डेटा के साथ एक तत्व उत्पन्न करना, a.click()इसे फिर से निष्पादित और निकालना। लेकिन दूसरा दृष्टिकोण केवल तभी काम करता है जब उपयोगकर्ता द्वारा आह्वान किया जाता है और साथ ही कार्रवाई भी होती है। (कुछ) click()अन्य संदर्भों से ब्राउज़र ब्लॉक करना जैसे टाइमआउट (सेट टाइमआउट) के बाद लोड करना या ट्रिगर करना।

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="UTF-8">
    <script type="text/javascript">
      function linkDownload(a, filename, content) {
        contentType =  'data:application/octet-stream,';
        uriContent = contentType + encodeURIComponent(content);
        a.setAttribute('href', uriContent);
        a.setAttribute('download', filename);
      }
      function download(filename, content) {
        var a = document.createElement('a');
        linkDownload(a, filename, content);
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
      }
    </script>
   </head>
  <body>
    <a href="#" onclick="linkDownload(this, 'test.txt', 'Hello World!');">download</a>
    <button onclick="download('test.txt', 'Hello World!');">download</button>
  </body>
</html>

Comments

आप aदस्तावेज़ में सम्मिलित कर सकते हैं (संभवतः के साथ "display:none"), इसे क्लिक करें, और फिर इसे हटा दें।

— तेईपेम्म

ब्राउज़रों में यह काम करेगा जहां डाउनलोड विशेषता भी आधुनिक और सफारी की तरह समर्थित नहीं है .. caniuse.com/#feat=download

— मुहम्मद उमर

शराब के तहत सिर्फ सफारी 5.0 का परीक्षण किया। पहला संस्करण काम करता है, दूसरा नहीं। मैंने IE 8 (वाइन) का परीक्षण किया और यह काम नहीं करता है।

— माईकेल

Answer 11

यहाँ डेटा का लिंक दिया गया है URI विधि मैथ्यू ने सुझाव दिया, यह सफारी पर काम करता है, लेकिन अच्छी तरह से नहीं क्योंकि मैं फिलाटाइप सेट नहीं कर सका, यह "अज्ञात" के रूप में सहेजा जाता है और फिर मुझे बाद में फिर से वहां जाना होगा और इसे क्रम में बदलना होगा फ़ाइल देखने के लिए ...

http://www.nihilogic.dk/labs/canvas2image/

Answer 12

आप लोकलस्टोरेज का उपयोग कर सकते हैं। यह कुकीज़ के बराबर Html5 है। यह फ़ायरफ़ॉक्स पर क्रोम और फ़ायरफ़ॉक्स बट पर काम करने के लिए प्रतीत होता है, मुझे इसे एक सर्वर पर अपलोड करने की आवश्यकता थी। यह है, मेरे घर कंप्यूटर पर सीधे परीक्षण काम नहीं किया।

मैं HTML5 उदाहरणों पर काम कर रहा हूं। Http://facademy.purchase.edu/jeanine.meyer/html5/html5explain.html पर जाएं और भूलभुलैया पर स्क्रॉल करें। भूलभुलैया को फिर से बनाने की जानकारी स्थानीयस्टोरेज का उपयोग करके संग्रहीत की जाती है।

मैं इस लेख के लिए HTML5 जावास्क्रिप्ट लोड करने और xml फ़ाइलों के साथ काम करने के लिए देख रहा था। क्या यह पुराने html और JavaScript के समान है ????

Answer 13

प्रयत्न

let a = document.createElement('a');
a.href = "data:application/octet-stream,"+encodeURIComponent('"My DATA"');
a.download = 'myFile.json';
a.click(); // we not add 'a' to DOM so no need to remove

यदि आप बाइनरी डेटा डाउनलोड करना चाहते हैं तो यहां देखें

अपडेट करें

2020.06.14 मैं क्रोम को 83.0 और एसओ स्निपेट स्टॉप वर्क्स ( सैंडबॉक्स सुरक्षा प्रतिबंधों के कारण ) से अपग्रेड करता हूं - लेकिन JSFiddle वर्जन काम करता है - यहां

Answer 14

जैसा कि पहले फ़ाइल एपीआई, FileWriter और FileSystem के साथ उल्लेख किया गया था API एक ब्राउज़र टैब / विंडो के संदर्भ से क्लाइंट की मशीन पर फ़ाइलों को संग्रहीत करने के लिए इस्तेमाल किया जा सकता है।

हालाँकि, बाद की दो एपीआई से संबंधित कई बातें हैं जिनके बारे में आपको जानकारी होनी चाहिए:

• वर्तमान में एपीआई के कार्यान्वयन केवल क्रोमियम-आधारित ब्राउज़रों (क्रोम और ओपेरा) में मौजूद हैं
• 24 अप्रैल 2014 को दोनों APIs को W3C मानकों के ट्रैक से हटा दिया गया था और अब तक का मालिकाना हक है
• भविष्य में ब्राउज़रों को लागू करने से (अब मालिकाना) एपीआई हटाने की संभावना है
• API के साथ बनाई गई फ़ाइलों को संग्रहीत करने के लिए एक सैंडबॉक्स (डिस्क पर एक स्थान जिसके बाहर फाइलें कोई प्रभाव नहीं पैदा कर सकती हैं) का उपयोग किया जाता है
• एक वर्चुअल फाइल सिस्टम (एक निर्देशिका संरचना जो जरूरी नहीं कि डिस्क पर उसी रूप में मौजूद हो जो वह ब्राउज़र के भीतर से एक्सेस करते समय होती है) का उपयोग एपीआई के साथ बनाई गई फाइलों का प्रतिनिधित्व करता है।

यह करने के लिए सीधे और अप्रत्यक्ष रूप से एपीआई का उपयोग कैसे किया जाता है, इसके सरल उदाहरण हैं:

बेक्डगूड्स *

bakedGoods.get({
        data: ["testFile"],
        storageTypes: ["fileSystem"],
        options: {fileSystem:{storageType: Window.PERSISTENT}},
        complete: function(resultDataObj, byStorageTypeErrorObj){}
});

कच्ची फ़ाइल, FileWriter और FileSystem API का उपयोग करना

function onQuotaRequestSuccess(grantedQuota)
{

    function saveFile(directoryEntry)
    {

        function createFileWriter(fileEntry)
        {

            function write(fileWriter)
            {
                var dataBlob = new Blob(["Hello world!"], {type: "text/plain"});
                fileWriter.write(dataBlob);              
            }

            fileEntry.createWriter(write);
        }

        directoryEntry.getFile(
            "testFile", 
            {create: true, exclusive: true},
            createFileWriter
        );
    }

    requestFileSystem(Window.PERSISTENT, grantedQuota, saveFile);
}

var desiredQuota = 1024 * 1024 * 1024;
var quotaManagementObj = navigator.webkitPersistentStorage;
quotaManagementObj.requestQuota(desiredQuota, onQuotaRequestSuccess);

हालाँकि फ़ाइलसिस्टम और फ़ाइलराइटर एपीआई अब मानकों के अनुसार नहीं हैं, उनका उपयोग कुछ मामलों में उचित हो सकता है, मेरी राय में, क्योंकि:

• संयुक्त राष्ट्र के लागू करने वाले ब्राउज़र विक्रेताओं से नवीनीकृत ब्याज उन्हें इस पर वापस ला सकता है
• कार्यान्वयन (क्रोमियम-आधारित) ब्राउज़रों का बाजार प्रवेश अधिक है
• Google (क्रोमियम का मुख्य कंट्रिब्यूटर) ने एपीआई को जीवन की तारीख और अंत नहीं दिया है

क्या "कुछ मामले" आपके स्वयं के होते हैं, हालांकि, आपके लिए यह तय करना है।

* BakedGoods को इस लड़के के अलावा और किसी ने यहाँ नहीं रखा है :)

Answer 15

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

मेरे लिए पहला कदम डेटा से बाइनरी बूँद पैदा कर रहा था जिसे मैं बचा रहा था। एकल बाइनरी प्रकार के लिए ऐसा करने के लिए बहुत सारे नमूने हैं, मेरे मामले में मेरे पास कई प्रकारों के साथ एक द्विआधारी प्रारूप है जिसे आप बूँद बनाने के लिए एक सरणी के रूप में पारित कर सकते हैं।

saveAnimation: function() {

    var device = this.Device;
    var maxRow = ChromaAnimation.getMaxRow(device);
    var maxColumn = ChromaAnimation.getMaxColumn(device);
    var frames = this.Frames;
    var frameCount = frames.length;

    var writeArrays = [];


    var writeArray = new Uint32Array(1);
    var version = 1;
    writeArray[0] = version;
    writeArrays.push(writeArray.buffer);
    //console.log('version:', version);


    var writeArray = new Uint8Array(1);
    var deviceType = this.DeviceType;
    writeArray[0] = deviceType;
    writeArrays.push(writeArray.buffer);
    //console.log('deviceType:', deviceType);


    var writeArray = new Uint8Array(1);
    writeArray[0] = device;
    writeArrays.push(writeArray.buffer);
    //console.log('device:', device);


    var writeArray = new Uint32Array(1);
    writeArray[0] = frameCount;
    writeArrays.push(writeArray.buffer);
    //console.log('frameCount:', frameCount);

    for (var index = 0; index < frameCount; ++index) {

      var frame = frames[index];

      var writeArray = new Float32Array(1);
      var duration = frame.Duration;
      if (duration < 0.033) {
        duration = 0.033;
      }
      writeArray[0] = duration;
      writeArrays.push(writeArray.buffer);

      //console.log('Frame', index, 'duration', duration);

      var writeArray = new Uint32Array(maxRow * maxColumn);
      for (var i = 0; i < maxRow; ++i) {
        for (var j = 0; j < maxColumn; ++j) {
          var color = frame.Colors[i][j];
          writeArray[i * maxColumn + j] = color;
        }
      }
      writeArrays.push(writeArray.buffer);
    }

    var blob = new Blob(writeArrays, {type: 'application/octet-stream'});

    return blob;
}

अगला कदम यह है कि उपयोगकर्ता को पूर्वनिर्धारित नाम के साथ इस बूँद को डाउनलोड करने के लिए संकेत देने के लिए ब्राउज़र प्राप्त करें।

मुझे जो कुछ भी चाहिए था वह एक नामित लिंक था जिसे मैंने एचटीएमएल 5 में जोड़ा था कि मैं शुरुआती फ़ाइलनाम का नाम बदलने के लिए पुन: उपयोग कर सकता हूं। मैंने इसे छिपा कर रखा है क्योंकि लिंक को डिस्प्ले की आवश्यकता नहीं है।

<a id="lnkDownload" style="display: none" download="client.chroma" href="" target="_blank"></a>

अंतिम चरण उपयोगकर्ता को फ़ाइल डाउनलोड करने के लिए संकेत देना है।

var data = animation.saveAnimation();
var uriContent = URL.createObjectURL(data);
var lnkDownload = document.getElementById('lnkDownload');
lnkDownload.download = 'theDefaultFileName.extension';
lnkDownload.href = uriContent;
lnkDownload.click();

Answer 16

यहाँ ज़िप के रूप में फ़ाइलों को निर्यात करने के लिए एक ट्यूटोरियल है:

आरंभ करने से पहले, फ़ाइलों को सहेजने के लिए एक पुस्तकालय है, पुस्तकालय का नाम फ़ाइलसैवर है। जेएस, आप इस पुस्तकालय को यहाँ देख सकते हैं। आइए शुरू करते हैं, अब, आवश्यक लाइब्रेरी शामिल करें:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.4/jszip.min.js"  type="text/javascript"></script>
<script type="text/javascript" src="https://fastcdn.org/FileSaver.js/1.1.20151003/FileSaver.js" ></script>

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

<script type="text/javascript">
    var zip = new JSZip();
    zip.file("Hello.txt", "Hello World\n");
    zip.generateAsync({type:"blob"})
    .then(function(content) {
        // see FileSaver.js
        saveAs(content, "file.zip");
    });
</script>

यह file.zip नामक एक फाइल डाउनलोड करेगा। आप यहाँ और अधिक पढ़ सकते हैं: http://www.wapgee.com/story/248/guide-to-create-zip-files-use-javascript-by-use-jszip-library