क्या केवल जावास्क्रिप्ट का उपयोग करके फ़ाइल को डेटा लिखना संभव है?


190

मैं जावास्क्रिप्ट का उपयोग करके मौजूदा फ़ाइल में डेटा लिखना चाहता हूं। मैं इसे कंसोल पर प्रिंट नहीं करना चाहता। मैं वास्तव में डेटा लिखना चाहता हूं abc.txt। मैंने कई उत्तर दिए गए प्रश्न पढ़े, लेकिन हर वह जहां वे कंसोल पर प्रिंट कर रहे थे। किसी जगह पर उन्होंने कोड दिया है लेकिन काम नहीं कर रहा है। तो कृपया कोई भी मेरी मदद कर सकता है वास्तव में फ़ाइल में डेटा कैसे लिखें।

मैंने कोड का उल्लेख किया है लेकिन इसका काम नहीं कर रहा है: इसकी त्रुटि दे रहा है:

अनकहा टाइप टाइप: अवैध कंस्ट्रक्टर

क्रोम पर और

SecurityError: ऑपरेशन असुरक्षित है।

मोज़िला पर

var f = "sometextfile.txt";

writeTextFile(f, "Spoon")
writeTextFile(f, "Cheese monkey")
writeTextFile(f, "Onion")

function writeTextFile(afilename, output)
{
  var txtFile =new File(afilename);
  txtFile.writeln(output);
  txtFile.close();
}

तो क्या हम वास्तव में केवल जावास्क्रिप्ट का उपयोग करके फाइल करने के लिए डेटा लिख ​​सकते हैं या नहीं?


2
इस भाई की जाँच करें: stackoverflow.com/questions/585234/…
welbornio

जवाबों:


89

इसके लिए कुछ सुझाव -

  1. यदि आप क्लाइंट मशीन पर फ़ाइल लिखने की कोशिश कर रहे हैं, तो आप इसे किसी भी क्रॉस-ब्राउज़र तरीके से नहीं कर सकते। IE में फ़ाइल को पढ़ने / लिखने के लिए ActiveX ऑब्जेक्ट का उपयोग करने के लिए "विश्वसनीय" अनुप्रयोगों को सक्षम करने के तरीके हैं।
  2. यदि आप इसे अपने सर्वर पर सहेजने का प्रयास कर रहे हैं, तो बस अपने सर्वर पर पाठ डेटा पर पास करें और कुछ सर्वर साइड भाषा का उपयोग करके फ़ाइल लेखन कोड निष्पादित करें।
  3. क्लाइंट की ओर से कुछ जानकारी संग्रहीत करने के लिए जो काफी छोटी है, आप कुकीज़ के लिए जा सकते हैं।
  4. स्थानीय संग्रहण के लिए HTML5 API का उपयोग करना।

27
एचटीएमएल 5 एपीआई केवल 5 एमबी पर अधिकतम होता है।
पचेरियर

हां, आप इसे चुने बिना सिस्टम फाइल में नहीं लिख सकते। आधिकारिक डॉक्स पढ़ें: w3.org/TR/file-upload/#security-discussion
मनोज घेडिया

216

आप ब्राउज़र का उपयोग करके Blobऔर में फ़ाइलें बना सकते हैं URL.createObjectURL। सभी हालिया ब्राउज़र इसका समर्थन करते हैं

आप सीधे आपके द्वारा बनाई गई फ़ाइल को नहीं बचा सकते हैं, क्योंकि इससे बड़े पैमाने पर सुरक्षा समस्याएं पैदा होंगी, लेकिन आप इसे उपयोगकर्ता के लिए डाउनलोड लिंक के रूप में प्रदान कर सकते हैं। आप डाउनलोड विशेषता का समर्थन करने वाले ब्राउज़रों में लिंक की downloadविशेषता के माध्यम से एक फ़ाइल नाम सुझा सकते हैं । किसी भी अन्य डाउनलोड के साथ, फ़ाइल डाउनलोड करने वाले उपयोगकर्ता को फ़ाइल नाम पर अंतिम कहना होगा।

var textFile = null,
  makeTextFile = function (text) {
    var data = new Blob([text], {type: 'text/plain'});

    // If we are replacing a previously generated file we need to
    // manually revoke the object URL to avoid memory leaks.
    if (textFile !== null) {
      window.URL.revokeObjectURL(textFile);
    }

    textFile = window.URL.createObjectURL(data);

    // returns a URL you can use as a href
    return textFile;
  };

यहाँ एक उदाहरण है जो इस तकनीक का उपयोग करता है ताकि मनमाने ढंग से पाठ को बचाया जा सकेtextarea

यदि आप उपयोगकर्ता को किसी लिंक पर क्लिक करने की आवश्यकता के बजाय तुरंत डाउनलोड शुरू करना चाहते हैं, तो आप माउस घटनाओं का उपयोग करके लिंक पर माउस क्लिक का अनुकरण कर सकते हैं जैसा कि Lifecube के उत्तर ने किया था। मैंने एक अद्यतन उदाहरण बनाया है जो इस तकनीक का उपयोग करता है।

  var create = document.getElementById('create'),
    textbox = document.getElementById('textbox');

  create.addEventListener('click', function () {
    var link = document.createElement('a');
    link.setAttribute('download', 'info.txt');
    link.href = makeTextFile(textbox.value);
    document.body.appendChild(link);

    // wait for the link to be added to the document
    window.requestAnimationFrame(function () {
      var event = new MouseEvent('click');
      link.dispatchEvent(event);
      document.body.removeChild(link);
    });

  }, false);

1
@ फ़र्स्टब्लड क्या हिस्सा काम नहीं कर रहा है, क्या आपको कोई त्रुटि हो रही है? फ़ाइल और लिंक निर्माण सफारी 7+ में काम करना चाहिए (मेरा मानना ​​है कि अगर आप उपसर्ग संस्करण का उपयोग करते हैं तो सामान भी सफारी 6 में काम करना चाहिए URL)। फ़ाइल नाम सेट करना सफारी में काम नहीं करेगा क्योंकि इसने अभी भी downloadविशेषता को लागू नहीं किया है ।
बेकार कोड

1
मैं इसे सफारी 5.1 पर कोशिश कर रहा था :)
पहला रक्त

1
नई पंक्ति का चरित्र सहेजे गए दस्तावेज़
बेनी

1
@ नए अक्षर मौजूद हैं। जेएस \nयूनिक्स कार्यक्रमों की तरह नई लाइनों का प्रतिनिधित्व करने के लिए न्यूलाइन वर्ण का उपयोग करता है। आप शायद इसे विंडोज प्रोग्राम में देख रहे हैं, जैसे कि नोटपैड, जो \nचरित्र को एक नई लाइन के रूप में प्रस्तुत नहीं करता है । यदि आप चाहते हैं नई-पंक्तियों को सही ढंग से और उसमें लेख डालने से पहले, नोटपैड और कुछ अन्य Windows प्रोग्राम में प्रदान करने Blobके लिए प्रत्येक को बदलने के \nसाथ \r\n: text = text.replace(/\n/g, '\r\n')
बेकार कोड

2
@ user3241111 वास्तव में, यह काम नहीं करना चाहिए। सामान की तरह यह सब असामान्य नहीं है। मैंने इसे करने के हैकर के तरीके देखे हैं ;-) अतीत में मैं भी mouseoverलिंक पर फ़ाइल को उत्पन्न करने के साथ दूर हो गया हूं , लेकिन यह इस बात पर निर्भर करता है कि यह कितना प्रसंस्करण कर रहा है जो महान काम नहीं कर सकता है।
बेकार संहिता

41

यदि आप ब्राउज़र जावास्क्रिप्ट के बारे में बात कर रहे हैं, तो आप सुरक्षा कारण के लिए सीधे स्थानीय फ़ाइल में डेटा नहीं लिख सकते हैं। HTML 5 नए एपीआई केवल आपको फाइलें पढ़ने की अनुमति दे सकते हैं।

लेकिन अगर आप डेटा लिखना चाहते हैं, और उपयोगकर्ता को स्थानीय फ़ाइल के रूप में डाउनलोड करने में सक्षम बनाते हैं। निम्नलिखित कोड काम करता है:

    function download(strData, strFileName, strMimeType) {
    var D = document,
        A = arguments,
        a = D.createElement("a"),
        d = A[0],
        n = A[1],
        t = A[2] || "text/plain";

    //build download link:
    a.href = "data:" + strMimeType + "charset=utf-8," + escape(strData);


    if (window.MSBlobBuilder) { // IE10
        var bb = new MSBlobBuilder();
        bb.append(strData);
        return navigator.msSaveBlob(bb, strFileName);
    } /* end if(window.MSBlobBuilder) */



    if ('download' in a) { //FF20, CH19
        a.setAttribute("download", n);
        a.innerHTML = "downloading...";
        D.body.appendChild(a);
        setTimeout(function() {
            var e = D.createEvent("MouseEvents");
            e.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
            a.dispatchEvent(e);
            D.body.removeChild(a);
        }, 66);
        return true;
    }; /* end if('download' in a) */



    //do iframe dataURL download: (older W3)
    var f = D.createElement("iframe");
    D.body.appendChild(f);
    f.src = "data:" + (A[2] ? A[2] : "application/octet-stream") + (window.btoa ? ";base64" : "") + "," + (window.btoa ? window.btoa : escape)(strData);
    setTimeout(function() {
        D.body.removeChild(f);
    }, 333);
    return true;
}

इसके प्रयेाग के लिए:

download('the content of the file', 'filename.txt', 'text/plain');


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

1
उपरोक्त समाधान एक प्रकार का पुराना है। आपको html 5 जावास्क्रिप्ट लिबास पर विचार करने की आवश्यकता हो सकती है। github.com/eligrey/FileSaver.js
Lifecube

FileSaver.js का उपयोग कर @ Lifecube, क्या उपयोगकर्ता के संपर्क के बिना फ़ाइल को स्वचालित रूप से सहेजने का एक तरीका है? धन्यवाद! जेएस के लिए नया; आपकी सभी मदद की सराहना की जाती है
नाथन

2
उपयोगकर्ता को यह जाने बिना किसी फ़ाइल को सहेजने के बारे में कई प्रश्नों के लिए: इस तरह का व्यवहार सिर्फ डिजाइन से बचा जाता है। इससे पंडोरा का आसानी से उपयोग होने वाले सुरक्षा खतरों का पिटारा खुल जाएगा। कुकीज़ विपणन उद्देश्यों के लिए डेटा एकत्र करने के लिए हैं।
अरी ओकोनेंन

नोट: मैं विंडोज 10 पर फ़ायरफ़ॉक्स v76 में। Html के रूप में एक html फ़ाइल डाउनलोड करने के लिए इसे प्राप्त नहीं कर सकता। डाउनलोड ने .pdf को इसके अंत में जोड़ा है।
CSchwarz

23

उपरोक्त उत्तर उपयोगी है, लेकिन, मुझे कोड मिला जो आपको बटन क्लिक पर सीधे टेक्स्ट फ़ाइल डाउनलोड करने में मदद करता है। इस कोड में आप अपनी filenameइच्छानुसार बदलाव भी कर सकते हैं । यह HTML5 के साथ शुद्ध जावास्क्रिप्ट फ़ंक्शन है। मेरे लिये कार्य करता है!

function saveTextAsFile()
{
    var textToWrite = document.getElementById("inputTextToSave").value;
    var textFileAsBlob = new Blob([textToWrite], {type:'text/plain'});
    var fileNameToSaveAs = document.getElementById("inputFileNameToSaveAs").value;
      var downloadLink = document.createElement("a");
    downloadLink.download = fileNameToSaveAs;
    downloadLink.innerHTML = "Download File";
    if (window.webkitURL != null)
    {
        // Chrome allows the link to be clicked
        // without actually adding it to the DOM.
        downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
    }
    else
    {
        // Firefox requires the link to be added to the DOM
        // before it can be clicked.
        downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
        downloadLink.onclick = destroyClickedElement;
        downloadLink.style.display = "none";
        document.body.appendChild(downloadLink);
    }

    downloadLink.click();
}

2
अति उत्कृष्ट। ओपेरा पर मेरे लिए काम करता है। अज्ञात फ़ंक्शन को प्रतिस्थापित करने की आवश्यकता है: "document.body.removeChild (event.target)" बयान द्वारा "नष्ट कर दिया गया"
steveOw

3
उपयोग करते समय आपको सावधान रहने की आवश्यकता है createObjectURL। जेएस में अधिकांश चीजों के विपरीत, आपके द्वारा बनाई जाने वाली वस्तुओं को स्वचालित रूप से एकत्र नहीं किया जाता है जब उनके पास कोई संदर्भ नहीं होता है; पृष्ठ बंद होने पर वे केवल कचरा एकत्र करते हैं। चूँकि आप URL.revokeObjectURL()इस कोड का उपयोग अंतिम कॉल द्वारा उपयोग की जाने वाली मेमोरी को मुक्त करने के लिए नहीं कर रहे हैं , आपके पास मेमोरी लीक है; यदि उपयोगकर्ता saveTextFileकई बार कॉल करता है, तो वे अधिक से अधिक मेमोरी का उपभोग करना जारी रखेंगे क्योंकि आपने इसे कभी जारी नहीं किया।
बेकार कोड


6

इस मामले में नए Blobसमाधान का उपयोग करने के लिए यह सीमित नहीं है, यह सुनिश्चित करने के लिए है कि आधुनिक ब्राउज़र में सबसे अच्छा समाधान है, इस सरल दृष्टिकोण का उपयोग करना अभी भी संभव है, जिस तरह से फ़ाइल आकार में एक सीमा होती है:

function download() {
                var fileContents=JSON.stringify(jsonObject, null, 2);
                var fileName= "data.json";

                var pp = document.createElement('a');
                pp.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(fileContents));
                pp.setAttribute('download', fileName);
                pp.click();
            }
            setTimeout(function() {download()}, 500);

$('#download').on("click", function() {
  function download() {
    var jsonObject = {
      "name": "John",
      "age": 31,
      "city": "New York"
    };
    var fileContents = JSON.stringify(jsonObject, null, 2);
    var fileName = "data.json";

    var pp = document.createElement('a');
    pp.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(fileContents));
    pp.setAttribute('download', fileName);
    pp.click();
  }
  setTimeout(function() {
    download()
  }, 500);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="download">Download me</button>


3

फ़ाइल उत्पन्न करने के लिए उपयोक्ता @ बेकार-कोड ( https://stackoverflow.com/a/21016088/327386 ) द्वारा कोड का उपयोग करें । यदि आप फ़ाइल को स्वचालित रूप से डाउनलोड करना चाहते हैं, तो textFileवह पास करें जो इस फ़ंक्शन के लिए जनरेट किया गया था:

var downloadFile = function downloadURL(url) {
    var hiddenIFrameID = 'hiddenDownloader',
    iframe = document.getElementById(hiddenIFrameID);
    if (iframe === null) {
        iframe = document.createElement('iframe');
        iframe.id = hiddenIFrameID;
        iframe.style.display = 'none';
        document.body.appendChild(iframe);
    }
    iframe.src = url;
}

5
पता नहीं क्यों यह एक नीचे वोट मिला। इससे मेरा काम बनता है। वोट डाउन करने वाले लोगों को कम से कम एक टिप्पणी छोड़नी चाहिए कि यह मतदान क्यों हुआ!
RPM

5
मैं निराश नहीं हुआ, लेकिन वास्तव में मतदान पर टिप्पणी करना सीधे हतोत्साहित करता है। उपयोगकर्ता को किसी पोस्ट की सामग्री पर टिप्पणी करनी चाहिए, और किसी पोस्ट की सामग्री पर वोट देना चाहिए, लेकिन उन्हें अपने वोटों पर टिप्पणी नहीं करनी चाहिए। यदि कोई व्यक्ति बिना किसी टिप्पणी के वोट देता है, तो आप इसका अर्थ "यह उत्तर उपयोगी है" या "यह उत्तर उपयोगी नहीं है" वोट के आधार पर ले सकते हैं।

यह काम नहीं कर रहा है .. यह फ़ाइल डाउनलोड नहीं करता है। यह सिर्फ एक आइफ्रेम बनाता है जो छिपा हुआ है। मैंने क्रोम और फ़ायरफ़ॉक्स
NaiveCoder

2

मुझे यहां अच्छे उत्तर मिले, लेकिन एक सरल तरीका भी मिला।

बूँद बनाने के लिए बटन और डाउनलोड लिंक को एक लिंक में जोड़ा जा सकता है, क्योंकि लिंक तत्व में एक ऑनक्लिक विशेषता हो सकती है। (रिवर्स संभव नहीं लगता है, बटन पर एक href जोड़ने से काम नहीं होता है।)

आप लिंक को बटन का उपयोग करके स्टाइल कर सकते हैं bootstrap, जो स्टाइल के अलावा अभी भी शुद्ध जावास्क्रिप्ट है।

बटन और डाउनलोड लिंक को मिलाने से कोड भी कम हो जाता है, क्योंकि इनमें से कम बदसूरत getElementByIdकॉल की जरूरत होती है।

इस उदाहरण को टेक्स्ट-ब्लॉब बनाने और इसे डाउनलोड करने के लिए केवल एक बटन क्लिक की आवश्यकता है:

<a id="a_btn_writetofile" download="info.txt" href="#" class="btn btn-primary" 
   onclick="exportFile('This is some dummy data.\nAnd some more dummy data.\n', 'a_btn_writetofile')"
>
   Write To File
</a>

<script>
    // URL pointing to the Blob with the file contents
    var objUrl = null;
    // create the blob with file content, and attach the URL to the downloadlink; 
    // NB: link must have the download attribute
    // this method can go to your library
    function exportFile(fileContent, downloadLinkId) {
        // revoke the old object URL to avoid memory leaks.
        if (objUrl !== null) {
            window.URL.revokeObjectURL(objUrl);
        }
        // create the object that contains the file data and that can be referred to with a URL
        var data = new Blob([fileContent], { type: 'text/plain' });
        objUrl = window.URL.createObjectURL(data);
        // attach the object to the download link (styled as button)
        var downloadLinkButton = document.getElementById(downloadLinkId);
        downloadLinkButton.href = objUrl;
    };
</script>

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.